Добавлено расширение темы Chakra UI, реализован компонент AppHeader с переключением темной/светлой темы, обновлены стили для поддержки темной темы, улучшена загрузка компонентов с учетом цветовой схемы.

src/components/xl-spinner/xl-spinner.tsx

@@ -3,18 +3,23 @@ import {
     Container,
     Center,
     Spinner,
+    useColorMode
 } from '@chakra-ui/react'
 
-export const XlSpinner = () => (
-    <Container maxW="container.xl">
-        <Center h="300px">
-            <Spinner
-                thickness="4px"
-                speed="0.65s"
-                emptyColor="gray.200"
-                color="blue.500"
-                size="xl"
-            />
-        </Center>
-    </Container>
-)
+export const XlSpinner = () => {
+    const { colorMode } = useColorMode();
+    
+    return (
+        <Container maxW="container.xl">
+            <Center h="300px">
+                <Spinner
+                    thickness="4px"
+                    speed="0.65s"
+                    emptyColor={colorMode === 'light' ? 'gray.200' : 'gray.600'}
+                    color={colorMode === 'light' ? 'blue.500' : 'blue.300'}
+                    size="xl"
+                />
+            </Center>
+        </Container>
+    )
+}