Skip to content

F
frontend
Commit 30c12294 authored by tom's avatar tom Committed by isstuev
Browse files
Options

color mode configuration

parent af043c03
Hide whitespace changes
Inline Side-by-side
Showing with 41 additions and 30 deletions
pages/_document.tsx
View file @ 30c12294
import React from 'react'; import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document' import Document, { Html, Head, Main, NextScript } from 'next/document'
import { ColorModeScript } from '@chakra-ui/react';
import theme from '../theme'
class MyDocument extends Document { class MyDocument extends Document {
render() { render() {
...@@ -16,6 +18,7 @@ class MyDocument extends Document { ...@@ -16,6 +18,7 @@ class MyDocument extends Document {
/> />
</Head> </Head>
<body> <body>
<ColorModeScript initialColorMode={ theme.config.initialColorMode }/>
<Main/> <Main/>
<NextScript/> <NextScript/>
</body> </body>
......
theme/config.ts 0 → 100644
View file @ 30c12294
import { type ThemeConfig } from '@chakra-ui/react';
const config: ThemeConfig = {
initialColorMode: 'system',
useSystemColorMode: false,
}
export default config;
theme/index.ts
View file @ 30c12294
...@@ -4,12 +4,14 @@ import typography from './foundations/typography'; ...@@ -4,12 +4,14 @@ import typography from './foundations/typography';
import borders from './foundations/borders'; import borders from './foundations/borders';
import colors from './foundations/colors'; import colors from './foundations/colors';
import components from './components/index'; import components from './components/index';
import config from './config';
const overrides = { const overrides = {
...typography, ...typography,
...borders, ...borders,
colors, colors,
components, components,
config,
} }
export default extendTheme(overrides); export default extendTheme(overrides);
ui/Page/Page.tsx
View file @ 30c12294
import React from 'react'; import React from 'react';
import { Box, HStack, LightMode, VStack } from '@chakra-ui/react'; import { Box, HStack, VStack } from '@chakra-ui/react';
import Navigation from '../navigation/Navigation'; import Navigation from '../navigation/Navigation';
import Header from '../header/Header'; import Header from '../header/Header';
...@@ -10,31 +10,27 @@ interface Props { ...@@ -10,31 +10,27 @@ interface Props {
const Page = ({ children }: Props) => { const Page = ({ children }: Props) => {
return ( return (
<LightMode> <HStack
<HStack w="100%"
w="100%" minH="100vh"
minH="100vh" spacing={ 16 }
bgColor="white" alignItems="stretch"
spacing={ 16 } paddingRight="60px"
alignItems="stretch" >
paddingRight="60px" <Navigation/>
> <VStack width="100%">
<Navigation/> <Header/>
<VStack width="100%"> <Box
<Header/> as="main"
<Box borderRadius="base"
as="main" w="100%"
borderRadius="base" overflow="hidden"
w="100%" py={ 8 }
overflow="hidden" >
bgColor="white" { children }
py={ 8 } </Box>
> </VStack>
{ children } </HStack>
</Box>
</VStack>
</HStack>
</LightMode>
); );
}; };
......
ui/header/Header.tsx
View file @ 30c12294
import React from 'react'; import React from 'react';
import { Box, HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center } from '@chakra-ui/react'; import { HStack, InputGroup, Input, InputLeftAddon, InputLeftElement, Center, Switch, useColorMode } from '@chakra-ui/react';
import { SearchIcon } from '@chakra-ui/icons' import { SearchIcon } from '@chakra-ui/icons'
import Identicon from 'react-identicons'; import Identicon from 'react-identicons';
import styles from './Header.module.css'; import styles from './Header.module.css';
const AccountNav = () => { const Header = () => {
const { toggleColorMode } = useColorMode();
return ( return (
<HStack <HStack
as="header" as="header"
...@@ -23,7 +25,7 @@ const AccountNav = () => { ...@@ -23,7 +25,7 @@ const AccountNav = () => {
</InputLeftElement> </InputLeftElement>
<Input paddingInlineStart="50px" placeholder="Search by addresses / transactions /block/ token ... "/> <Input paddingInlineStart="50px" placeholder="Search by addresses / transactions /block/ token ... "/>
</InputGroup> </InputGroup>
<Box>Switch</Box> <Switch size="lg" onChange={ toggleColorMode }/>
<Center minWidth="50px" width="50px" height="50px" bg="blackAlpha.100" borderRadius="50%" overflow="hidden"> <Center minWidth="50px" width="50px" height="50px" bg="blackAlpha.100" borderRadius="50%" overflow="hidden">
{ /* the displayed size is 40px, but we need to generate x2 for retina displays */ } { /* the displayed size is 40px, but we need to generate x2 for retina displays */ }
<Identicon className={ styles.identicon } string="randomness" size={ 80 }/> <Identicon className={ styles.identicon } string="randomness" size={ 80 }/>
...@@ -32,4 +34,4 @@ const AccountNav = () => { ...@@ -32,4 +34,4 @@ const AccountNav = () => {
) )
} }
export default AccountNav; export default Header;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment