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

src/components/app-header/app-header.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+  Flex,
+  IconButton,
+  useColorMode,
+} from '@chakra-ui/react';
+import { MoonIcon, SunIcon } from '@chakra-ui/icons';
+
+interface AppHeaderProps {
+  serviceMenuContainerRef?: React.RefObject<HTMLDivElement>;
+}
+
+export const AppHeader = ({ serviceMenuContainerRef }: AppHeaderProps) => {
+  const { colorMode, toggleColorMode } = useColorMode();
+  
+  return (
+    <Flex 
+      as="header" 
+      width="100%" 
+      py={4} 
+      px={8} 
+      justifyContent="space-between" 
+      alignItems="center"
+      position="sticky"
+      top={0}
+      zIndex={10}
+      bg={colorMode === 'light' ? 'white' : 'gray.800'}
+      boxShadow="sm"
+    >
+      {serviceMenuContainerRef && <div id="dots" ref={serviceMenuContainerRef}></div>}
+      
+      <IconButton
+        aria-label={colorMode === 'light' ? 'Включить темную тему' : 'Включить светлую тему'}
+        icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+        onClick={toggleColorMode}
+        variant="ghost"
+        size="md"
+      />
+    </Flex>
+  );
+}; 

src/components/app-header/index.ts

@@ -0,0 +1 @@
+export { AppHeader } from './app-header'; 

src/components/index.ts

@@ -0,0 +1,4 @@
+export { PageLoader } from './page-loader/page-loader';
+export { XlSpinner } from './xl-spinner/xl-spinner';
+export { ErrorBoundary } from './error-boundary';
+export { AppHeader } from './app-header'; 

src/components/page-loader/page-loader.tsx

@@ -3,18 +3,23 @@ import {
     Spinner,
     Container,
     Center,
+    useColorMode
 } from '@chakra-ui/react'
 
-export const PageLoader = () => (
-    <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 PageLoader = () => {
+    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>
+    )
+}

src/components/user-card/style.ts

@@ -10,10 +10,10 @@ export const Avatar = styled.img`
 
 export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
   list-style: none;
-  background-color: #ffffff;
+  background-color: var(--chakra-colors-white);
   padding: 16px;
   border-radius: 12px;
-  box-shadow: 2px 2px 6px #0000005c;
+  box-shadow: 2px 2px 6px var(--chakra-colors-blackAlpha-400);
   transition: all 0.5;
   position: relative;
   width: 180px;
@@ -31,11 +31,22 @@ export const Wrapper = styled.div<{ warn?: boolean; width?: string | number }>`
   ${(props) =>
     props.warn
       ? css`
-          background-color: #000000;
+          background-color: var(--chakra-colors-blackAlpha-800);
           opacity: 0.7;
-          color: #e4e4e4;
+          color: var(--chakra-colors-gray-200);
         `
       : ''}
+
+  .chakra-ui-dark & {
+    background-color: var(--chakra-colors-gray-700);
+    color: var(--chakra-colors-white);
+    box-shadow: 2px 2px 6px var(--chakra-colors-blackAlpha-600);
+  }
+  
+  .chakra-ui-dark &.warn {
+    background-color: var(--chakra-colors-blackAlpha-900);
+    color: var(--chakra-colors-gray-300);
+  }
 `
 
 export const AddMissedButton = styled.button`
@@ -43,11 +54,12 @@ export const AddMissedButton = styled.button`
   bottom: 8px;
   right: 12px;
   border: none;
-  background-color: #00000000;
+  background-color: transparent;
   opacity: 0.2;
+  color: inherit;
 
   :hover {
     cursor: pointer;
     opacity: 1;
   }
-`
+`

src/components/user-card/user-card.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { sha256 } from 'js-sha256'
+import { useColorMode } from '@chakra-ui/react'
 
 import { User } from '../../__data__/model'
 
@@ -26,10 +27,20 @@ export const UserCard = ({
   onAddUser?: (user: User) => void
   wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>;
 }) => {
+  const { colorMode } = useColorMode();
+  
   return (
-    <Wrapper warn={!present} as={wrapperAS} width={width}>
+    <Wrapper 
+      warn={!present} 
+      as={wrapperAS} 
+      width={width}
+      className={!present ? 'warn' : ''}
+    >
       <Avatar src={student.picture || getGravatarURL(student.email, null)} />
-      <p style={{ marginTop: 6 }}>
+      <p style={{ 
+        marginTop: 6,
+        color: colorMode === 'light' ? 'inherit' : 'var(--chakra-colors-gray-100)'
+      }}>
         {student.name || student.preferred_username}{' '}
       </p>
       {onAddUser && !present && (

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>
+    )
+}