Merge pull request #22 from ajnart/ajnart/issue21

Add darkmode switch in settings menu #21
ajnart · May 9, 2022 · 7be2283 · 7be2283
2 parents cb3abbc + 43c0465
commit 7be2283
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/components/ColorSchemeToggle/ColorSchemeSwitch.tsx b/components/ColorSchemeToggle/ColorSchemeSwitch.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { createStyles, Switch, Group, useMantineColorScheme } from '@mantine/core';
+import { Sun, MoonStars } from 'tabler-icons-react';
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    position: 'relative',
+    '& *': {
+      cursor: 'pointer',
+    },
+  },
+
+  icon: {
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    top: 3,
+  },
+
+  iconLight: {
+    left: 4,
+    color: theme.white,
+  },
+
+  iconDark: {
+    right: 4,
+    color: theme.colors.gray[6],
+  },
+}));
+
+export function ColorSchemeSwitch() {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const { classes, cx } = useStyles();
+
+  return (
+    <Group>
+      <div className={classes.root}>
+        <Sun className={cx(classes.icon, classes.iconLight)} size={18} />
+        <MoonStars className={cx(classes.icon, classes.iconDark)} size={18} />
+        <Switch checked={colorScheme === 'dark'} onChange={() => toggleColorScheme()} size="md" />
+      </div>
+      Switch to {colorScheme === 'dark' ? 'light' : 'dark'} mode
+    </Group>
+  );
+}
diff --git a/components/Settings/SettingsMenu.tsx b/components/Settings/SettingsMenu.tsx
@@ -8,13 +8,16 @@ import {
   Tooltip,
   SegmentedControl,
 } from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
 import { useState } from 'react';
 import { Settings as SettingsIcon } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
+import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import SaveConfigComponent from '../Config/SaveConfig';
 
 function SettingsMenu(props: any) {
   const { config, setConfig } = useConfig();
+  const colorScheme = useColorScheme();
   const matches = [
     { label: 'Google', value: 'https://google.com/search?q=' },
     { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
@@ -46,6 +49,7 @@ function SettingsMenu(props: any) {
       </Group>
       <Group direction="column">
         <Switch
+          size="md"
           onChange={(e) =>
             setConfig({
               ...config,
@@ -59,6 +63,7 @@ function SettingsMenu(props: any) {
           label="Enable search bar"
         />
       </Group>
+      <ColorSchemeSwitch />
       <SaveConfigComponent />
       <Text
         style={{

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
@@ -11,7 +11,6 @@ import {
 import { useBooleanToggle } from '@mantine/hooks';
 import { NextLink } from '@mantine/next';
 import { Logo } from './Logo';
-import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
 import CalendarComponent from '../modules/calendar/CalendarModule';
 
@@ -119,7 +118,6 @@ export function Header({ links }: HeaderResponsiveProps) {
     <Head height={HEADER_HEIGHT} mb={10} className={classes.root}>
       <Container className={classes.header}>
         <Group>
-          <ColorSchemeToggle />
           <NextLink style={{ textDecoration: 'none' }} href="/">
             <Logo style={{ fontSize: 22 }} />
           </NextLink>