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 Document, { Html, Head, Main, NextScript } from 'next/document'
import { ColorModeScript } from '@chakra-ui/react';
import theme from '../theme'
class MyDocument extends Document {
render() {
......@@ -16,6 +18,7 @@ class MyDocument extends Document {
/>
</Head>
<body>
<ColorModeScript initialColorMode={ theme.config.initialColorMode }/>
<Main/>
<NextScript/>
</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';
import borders from './foundations/borders';
import colors from './foundations/colors';
import components from './components/index';
import config from './config';
const overrides = {
...typography,
...borders,
colors,
components,
config,
}
export default extendTheme(overrides);
ui/Page/Page.tsx
View file @ 30c12294
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 Header from '../header/Header';
......@@ -10,31 +10,27 @@ interface Props {
const Page = ({ children }: Props) => {
return (
<LightMode>
<HStack
w="100%"
minH="100vh"
bgColor="white"
spacing={ 16 }
alignItems="stretch"
paddingRight="60px"
>
<Navigation/>
<VStack width="100%">
<Header/>
<Box
as="main"
borderRadius="base"
w="100%"
overflow="hidden"
bgColor="white"
py={ 8 }
>
{ children }
</Box>
</VStack>
</HStack>
</LightMode>
<HStack
w="100%"
minH="100vh"
spacing={ 16 }
alignItems="stretch"
paddingRight="60px"
>
<Navigation/>
<VStack width="100%">
<Header/>
<Box
as="main"
borderRadius="base"
w="100%"
overflow="hidden"
py={ 8 }
>
{ children }
</Box>
</VStack>
</HStack>
);
};
......
ui/header/Header.tsx
View file @ 30c12294
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 Identicon from 'react-identicons';
import styles from './Header.module.css';
const AccountNav = () => {
const Header = () => {
const { toggleColorMode } = useColorMode();
return (
<HStack
as="header"
......@@ -23,7 +25,7 @@ const AccountNav = () => {
</InputLeftElement>
<Input paddingInlineStart="50px" placeholder="Search by addresses / transactions /block/ token ... "/>
</InputGroup>
<Box>Switch</Box>
<Switch size="lg" onChange={ toggleColorMode }/>
<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 */ }
<Identicon className={ styles.identicon } string="randomness" size={ 80 }/>
......@@ -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