Mode switcher style improvements

Now active mode is more apparent due to surface background and primary
text color, and the default text color changed to fade text to improve
contrast

src/components/themeManager/modeSwitcher.tsx

@@ -4,12 +4,40 @@ import { capitalize } from "../../lib/text"
 import { themeState } from "./themeState"
 import { icons } from "../icons"
 import { styled } from "solid-styled-components"
+import { theme } from "../../theme"
 
 const Wrapper = styled(ButtonGroup)`
+  position: relative;
   width: max-content;
-  button {
-    padding-left: 1rem;
-    padding-right: 1rem;
+  overflow: hidden;
+`
+
+const SwitcherButton = styled(Button)`
+  z-index: 2;
+  padding: 0.5rem 1rem 0.5rem 0.75rem;
+  align-items: center;
+  color: ${theme.fadeText};
+  iconify-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem;
+  }
+  span {
+    font-size: 1rem;
+  }
+  &.selected {
+    background: ${theme.surface};
+  }
+  @media (max-width: 768px) {
+    padding: 0.5rem 0.75rem;
+    iconify-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      font-size: 1.5rem;
+    }
+    span {
+      display: none;
+    }
   }
 `
 
@@ -20,17 +48,19 @@ const modeIcons = {
 }
 
 const ModeSwitcher = () => {
+  const modes = ['light', 'dark', 'auto'] as const
+
   return (
     <Wrapper>
-      <For each={['light', 'dark', 'auto'] as const}>
+      <For each={modes}>
         {(mode, i) => (
           <>
-            <Button
+            <SwitcherButton
               classList={{ selected: themeState.themeConfig.get().mode === mode }}
               onClick={() => themeState.changeMode(mode)}>
               <iconify-icon icon={modeIcons[mode]} />
-              {capitalize(mode)}
-            </Button>
+              <span>{capitalize(mode)}</span>
+            </SwitcherButton>
             <Show when={i() !== 2}>
               <GroupSeparator />
             </Show>