Dark/Light icon can now be changed with useOsSetting.

src/client/js/components/Navbar/PersonalDropdown.jsx

@@ -100,13 +100,13 @@ const PersonalDropdown = (props) => {
 
   const LightIcon = props => (
     <>
-      <div id={props.id} className={`px-2 lightmode-icon ${useOsSettings ? 'use-os-setting' : ''}`}><LightModeIcon /></div>
+      <div id={props.id} className={`px-2 lightmode-icon ${useOsSettings ? 'use-os-settings' : ''}`}><LightModeIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Light</UncontrolledTooltip>
     </>
   );
   const DarkIcon = props => (
     <>
-      <div id={props.id} className={`px-2 darkmode-icon ${useOsSettings ? 'fill-muted' : ''}`}><DarkModeIcon /></div>
+      <div id={props.id} className={`px-2 darkmode-icon ${useOsSettings ? 'use-os-settings' : ''}`}><DarkModeIcon /></div>
       <UncontrolledTooltip placement="bottom" fade={false} target={props.id}>Dark</UncontrolledTooltip>
     </>
   );

src/client/styles/scss/theme/_apply-colors.scss

@@ -86,16 +86,11 @@ pre:not(.hljs):not(.CodeMirror-line) {
   .sidebar-drawer-icon {
     fill: $color-global;
   }
-  .lightmode-icon,
-  .darkmode-icon {
-    .use-os-setting {
-      fill: red !important;
-    }
-  }
-}
 
-.fill-muted {
-  fill: blue !important;
+  .lightmode-icon.use-os-settings,
+  .darkmode-icon.use-os-settings {
+    fill: $secondary;
+  }
 }
 
 .dropdown-item {