From 48f7b458c504b2e05a399542142a0fceeb5cea68 Mon Sep 17 00:00:00 2001 From: Paulius Dambrauskas Date: Sun, 20 Aug 2023 13:39:38 +0300 Subject: [PATCH] Add support for dark mode --- frontend/public/images/logo.svg | 12 ++++++++++-- frontend/src/components/Layout.tsx | 12 +++++++++++- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/frontend/public/images/logo.svg b/frontend/public/images/logo.svg index 687b2cfb..59cd0c20 100644 --- a/frontend/public/images/logo.svg +++ b/frontend/public/images/logo.svg @@ -1,10 +1,18 @@ - 8AFC26A1-E88A-4874-BB76-AA395EEC6BC0 + - + diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 569e98d5..a358041f 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -1,8 +1,9 @@ import React, {ReactNode} from 'react'; -import {Box, Divider, Flex, Stack, Image, Link} from '@chakra-ui/react'; +import {Box, Divider, Flex, Stack, Image, Link, Spacer, IconButton, useColorMode} from '@chakra-ui/react'; import ButtonLink from './ButtonLink'; import {generatePath, useLocation} from 'react-router'; import {RoutePath} from '../configuration/consts'; +import {MoonIcon, SunIcon} from '@chakra-ui/icons'; interface Props { children?: ReactNode; @@ -11,6 +12,7 @@ interface Props { const Layout: React.FC = ({children}) => { const match = useLocation(); + const {colorMode, toggleColorMode} = useColorMode(); return ( @@ -23,6 +25,14 @@ const Layout: React.FC = ({children}) => { Sessions + + : } + aria-label="Toggle Color Mode" + title="Toggle Color Mode" + />