110 lines
2.1 KiB
TypeScript
110 lines
2.1 KiB
TypeScript
import { StrictMode } from 'react';
|
|
import { createRoot } from 'react-dom/client';
|
|
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
|
|
import './index.css';
|
|
import App from './App.tsx';
|
|
|
|
const theme = extendTheme({
|
|
config: {
|
|
initialColorMode: 'dark',
|
|
useSystemColorMode: false,
|
|
},
|
|
styles: {
|
|
global: {
|
|
body: {
|
|
bg: 'gray.900',
|
|
color: 'white'
|
|
}
|
|
}
|
|
},
|
|
colors: {
|
|
gray: {
|
|
700: '#2D3748',
|
|
800: '#1A202C',
|
|
900: '#171923',
|
|
},
|
|
},
|
|
components: {
|
|
Button: {
|
|
defaultProps: {
|
|
colorScheme: 'gray',
|
|
variant: 'outline',
|
|
},
|
|
variants: {
|
|
solid: {
|
|
bg: 'gray.700',
|
|
color: 'white',
|
|
_hover: {
|
|
bg: 'gray.600',
|
|
},
|
|
_active: {
|
|
bg: 'gray.500',
|
|
},
|
|
},
|
|
outline: {
|
|
borderColor: 'gray.600',
|
|
color: 'gray.300',
|
|
_hover: {
|
|
bg: 'gray.700',
|
|
},
|
|
_active: {
|
|
bg: 'gray.600',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
IconButton: {
|
|
defaultProps: {
|
|
colorScheme: 'gray',
|
|
variant: 'outline',
|
|
},
|
|
variants: {
|
|
ghost: {
|
|
color: 'gray.400',
|
|
_hover: {
|
|
bg: 'gray.700',
|
|
},
|
|
_active: {
|
|
bg: 'gray.600',
|
|
},
|
|
},
|
|
outline: {
|
|
borderColor: 'gray.600',
|
|
color: 'gray.300',
|
|
_hover: {
|
|
bg: 'gray.700',
|
|
},
|
|
_active: {
|
|
bg: 'gray.600',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
Menu: {
|
|
baseStyle: {
|
|
list: {
|
|
bg: 'gray.800',
|
|
borderColor: 'gray.600',
|
|
},
|
|
item: {
|
|
bg: 'gray.800',
|
|
_hover: {
|
|
bg: 'gray.700',
|
|
},
|
|
_focus: {
|
|
bg: 'gray.700',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
createRoot(document.getElementById('root')!).render(
|
|
<StrictMode>
|
|
<ChakraProvider theme={theme}>
|
|
<App />
|
|
</ChakraProvider>
|
|
</StrictMode>,
|
|
);
|