Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 15:05:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add darkmode switch in settings menu #21

Browse Source
This commit is contained in:
Aj - Thomas
2022-05-09 01:35:11 +02:00
parent 580b2d72d1
commit 43c0465e52
3 changed files with 50 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/ColorSchemeToggle/ColorSchemeSwitch.tsx Normal file
View File

@@ -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>
);
}

5
components/Settings/SettingsMenu.tsx
View File

@@ -8,13 +8,16 @@ import {
Tooltip, Tooltip,
SegmentedControl, SegmentedControl,
} from '@mantine/core'; } from '@mantine/core';
import { useColorScheme } from '@mantine/hooks';
import { useState } from 'react'; import { useState } from 'react';
import { Settings as SettingsIcon } from 'tabler-icons-react'; import { Settings as SettingsIcon } from 'tabler-icons-react';
import { useConfig } from '../../tools/state'; import { useConfig } from '../../tools/state';
import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
import SaveConfigComponent from '../Config/SaveConfig'; import SaveConfigComponent from '../Config/SaveConfig';
function SettingsMenu(props: any) { function SettingsMenu(props: any) {
const { config, setConfig } = useConfig(); const { config, setConfig } = useConfig();
const colorScheme = useColorScheme();
const matches = [ const matches = [
{ label: 'Google', value: 'https://google.com/search?q=' }, { label: 'Google', value: 'https://google.com/search?q=' },
{ label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' }, { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
@@ -46,6 +49,7 @@ function SettingsMenu(props: any) {
</Group> </Group>
<Group direction="column"> <Group direction="column">
<Switch <Switch
size="md"
onChange={(e) => onChange={(e) =>
setConfig({ setConfig({
...config, ...config,
@@ -59,6 +63,7 @@ function SettingsMenu(props: any) {
label="Enable search bar" label="Enable search bar"
/> />
</Group> </Group>
<ColorSchemeSwitch />
<SaveConfigComponent /> <SaveConfigComponent />
<Text <Text
style={{ style={{

2
components/layout/Header.tsx
View File

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