Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-08 22:45:49 +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,
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={{

2
components/layout/Header.tsx
View File

@@ -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>