github.com/lauslim12/expert-systems@v0.0.0-20221115131159-018513aad29c/web/src/index.tsx (about) 1 import 'focus-visible/dist/focus-visible'; 2 import './utils/i18n'; 3 4 import { 5 type ThemeOverride, 6 ChakraProvider, 7 ColorModeScript, 8 extendTheme, 9 } from '@chakra-ui/react'; 10 import React from 'react'; 11 import ReactDOM from 'react-dom/client'; 12 13 import App from './App'; 14 import reportWebVitals from './reportWebVitals'; 15 16 /** 17 * Fallback fonts. 18 */ 19 const fallbackFonts = 20 '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'; 21 22 /** 23 * Renders whole application in React 18. 24 */ 25 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 26 <React.StrictMode> 27 <ChakraProvider 28 resetCSS 29 theme={extendTheme({ 30 styles: { 31 global: { 32 '::selection': { 33 backgroundColor: '#FBB6CE', 34 color: '#000', 35 }, 36 }, 37 }, 38 fonts: { 39 body: `Karla, ${fallbackFonts}`, 40 heading: `Karla, ${fallbackFonts}`, 41 }, 42 config: { 43 initialColorMode: 'system', 44 useSystemColorMode: true, 45 disableTransitionOnChange: false, 46 }, 47 } as ThemeOverride)} 48 > 49 <ColorModeScript initialColorMode="system" /> 50 <App /> 51 </ChakraProvider> 52 </React.StrictMode> 53 ); 54 55 // If you want to start measuring performance in your app, pass a function 56 // to log results (for example: reportWebVitals(console.log)) 57 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 58 reportWebVitals();