styles: adjust styling for different themes

app/assets/javascripts/components/NotesOptions.tsx

@@ -67,7 +67,7 @@ export const NotesOptions = observer(
             Show preview
           </span>
         </Switch>
-        <div className="h-1px my-2 bg-secondary-contrast"></div>
+        <div className="h-1px my-2 bg-border"></div>
         {appState.tags.tagsCount > 0 && (
           <Disclosure
             open={tagsMenuOpen}

app/assets/javascripts/components/NotesOptionsPanel.tsx

@@ -46,13 +46,13 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
         onBlur={closeOnBlur}
         ref={buttonRef}
         className={
-          'bg-transparent border-solid border-1 border-gray-300 ' +
+          'bg-transparent border-solid border-1 border-neutral ' +
           'cursor-pointer w-32px h-32px rounded-full p-0 ' +
           'flex justify-center items-center'
         }
       >
         <VisuallyHidden>Actions</VisuallyHidden>
-        <MoreIcon className="fill-current block" />
+        <MoreIcon className="fill-current color-text block" />
       </DisclosureButton>
       <DisclosurePanel
         onKeyUp={(event) => {

app/assets/javascripts/components/Switch.tsx

@@ -30,7 +30,7 @@ export const Switch: FunctionalComponent<SwitchProps> = (
           setChecked(event.target.checked);
           props.onChange(event.target.checked);
         }}
-        className={`sn-switch ${checked ? 'bg-info' : 'bg-secondary-contrast'}`}
+        className={`sn-switch ${checked ? 'bg-info' : 'bg-neutral'}`}
       >
         <CustomCheckboxInput
           {...({