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

src/app.tsx

@@ -4,15 +4,24 @@ import { Global } from '@emotion/react'
 import { BrowserRouter } from 'react-router-dom';
 import ruLocale from 'dayjs/locale/ru';
 import dayjs from 'dayjs';
-import { ChakraProvider } from '@chakra-ui/react'
+import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react'
 
 import { Dashboard } from './dashboard';
 import { globalStyles } from './global.styles';
 
 dayjs.locale('ru', ruLocale);
 
+// Расширяем тему Chakra UI
+const theme = extendTheme({
+  config: {
+    initialColorMode: 'light',
+    useSystemColorMode: false,
+  },
+})
+
 const App = ({ store }) => (
-    <ChakraProvider>
+    <ChakraProvider theme={theme}>
+        <ColorModeScript initialColorMode={theme.config.initialColorMode} />
         <BrowserRouter>
             <Helmet>
                 <meta name="viewport" content="width=device-width, user-scalable=no" />

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 = () => (
+export const PageLoader = () => {
-    <Container maxW="container.xl">
+    const { colorMode } = useColorMode();
-        <Center h="300px">
+    
-            <Spinner
+    return (
-                thickness="4px"
+        <Container maxW="container.xl">
-                speed="0.65s"
+            <Center h="300px">
-                emptyColor="gray.200"
+                <Spinner
-                color="blue.500"
+                    thickness="4px"
-                size="xl"
+                    speed="0.65s"
-            />
+                    emptyColor={colorMode === 'light' ? 'gray.200' : 'gray.600'}
-        </Center>
+                    color={colorMode === 'light' ? 'blue.500' : 'blue.300'}
-    </Container>
+                    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 = () => (
+export const XlSpinner = () => {
-    <Container maxW="container.xl">
+    const { colorMode } = useColorMode();
-        <Center h="300px">
+    
-            <Spinner
+    return (
-                thickness="4px"
+        <Container maxW="container.xl">
-                speed="0.65s"
+            <Center h="300px">
-                emptyColor="gray.200"
+                <Spinner
-                color="blue.500"
+                    thickness="4px"
-                size="xl"
+                    speed="0.65s"
-            />
+                    emptyColor={colorMode === 'light' ? 'gray.200' : 'gray.600'}
-        </Center>
+                    color={colorMode === 'light' ? 'blue.500' : 'blue.300'}
-    </Container>
+                    size="xl"
-)
+                />
+            </Center>
+        </Container>
+    )
+}

src/dashboard.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, Suspense } from 'react'
+import React, { useEffect, Suspense, useRef, useState } from 'react'
 import { Routes, Route, useNavigate } from 'react-router-dom'
 import { Provider } from 'react-redux'
-import { getNavigationsValue } from '@brojs/cli'
+import { getNavigationValue } from '@brojs/cli'
-import { Box, Container, Spinner, VStack } from '@chakra-ui/react'
+import { Box, Container, Spinner, VStack, useColorMode } from '@chakra-ui/react'
 
 import {
   CourseListPage,
@@ -11,7 +11,31 @@ import {
   UserPage,
   AttendancePage,
 } from './pages'
-import { ErrorBoundary } from './components/error-boundary'
+import { ErrorBoundary, AppHeader } from './components'
+import { keycloak } from './__data__/kc'
+
+const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'
+
+const loadServiceMenu = () => {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script')
+    script.src = MENU_SCRIPT_URL
+    script.onload = () => setTimeout(() => resolve(true), 1000)
+    script.onerror = reject
+    document.body.appendChild(script)
+  })
+}
+
+declare global {
+  interface Window {
+    createServiceMenu?: (options: any) => {
+      show: () => void;
+      hide: () => void;
+      update: () => void;
+      destroy: () => void;
+    };
+  }
+}
 
 const Wrapper = ({ children }: { children: React.ReactElement }) => (
   <Suspense
@@ -37,49 +61,97 @@ const Wrapper = ({ children }: { children: React.ReactElement }) => (
   </Suspense>
 )
 
-export const Dashboard = ({ store }) => (
+interface DashboardProps {
-  <Provider store={store}>
+  store: any; // Используем any, поскольку точный тип store не указан
-    <Routes>
+}
-      <Route
+
-        path={getNavigationsValue('journal.main')}
+export const Dashboard = ({ store }: DashboardProps) => {
-        element={
+  const serviceMenuContainerRef = useRef<HTMLDivElement>(null);
-          <Wrapper>
+  const serviceMenuInstanceRef = useRef<any>(null);
-            <CourseListPage />
+  const [serviceMenu, setServiceMenu] = useState(false);
-          </Wrapper>
+  const { colorMode } = useColorMode();
+
+  useEffect(() => {
+    loadServiceMenu().then(() => {
+      setServiceMenu(true)
+    }).catch(console.error)
+  }, [])
+  
+  useEffect(() => {
+    // Проверяем, что библиотека загружена и есть контейнер для меню
+    if (window.createServiceMenu && serviceMenuContainerRef.current && serviceMenu) {
+      // Создаем меню сервисов
+      serviceMenuInstanceRef.current = window.createServiceMenu({
+        accessToken: keycloak.token,
+        apiUrl: 'https://admin.bro-js.ru',
+        targetElement: serviceMenuContainerRef.current,
+        styles: {
+          dotColor: colorMode === 'light' ? '#333' : '#ccc',
+          hoverColor: colorMode === 'light' ? '#eee' : '#444',
+          backgroundColor: colorMode === 'light' ? '#fff' : '#2D3748',
+          textColor: colorMode === 'light' ? '#333' : '#fff',
+        },
+        translations: {
+          menuTitle: 'Сервисы BRO',
+          menuAriaLabel: 'Сервисы BRO',
         }
-      />
+      });
-      <Route
+    }
-        path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`}
+
-        element={
+    // Очистка при размонтировании
-          <Wrapper>
+    return () => {
-            <LessonListPage />
+      if (serviceMenuInstanceRef.current) {
-          </Wrapper>
+        serviceMenuInstanceRef.current.destroy();
-        }
+        serviceMenuInstanceRef.current = null;
-      />
+      }
-      <Route
+    };
-        path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`}
+  }, [keycloak.token, serviceMenu, colorMode]);
-        element={
+  
-          <Wrapper>
+  return (
-            <UserPage />
+    <Provider store={store}>
-          </Wrapper>
+      <AppHeader serviceMenuContainerRef={serviceMenuContainerRef} />
-        }
+      <Routes>
-      />
+        <Route
-      <Route
+          path={getNavigationValue('journal.main')}
-        path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`}
+          element={
-        element={
+            <Wrapper>
-          <Wrapper>
+              <CourseListPage />
-            <LessonDetailsPage />
+            </Wrapper>
-          </Wrapper>
+          }
-        }
+        />
-      />
+        <Route
-      <Route
+          path={`${getNavigationValue('journal.main')}/lessons-list/:courseId`}
-        path={`${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`}
+          element={
-        element={
+            <Wrapper>
-          <Wrapper>
+              <LessonListPage />
-            <AttendancePage />
+            </Wrapper>
-          </Wrapper>
+          }
-        }
+        />
-      />
+        <Route
-    </Routes>
+          path={`${getNavigationValue('journal.main')}/u/:lessonId/:accessId`}
-  </Provider>
+          element={
-)
+            <Wrapper>
+              <UserPage />
+            </Wrapper>
+          }
+        />
+        <Route
+          path={`${getNavigationValue('journal.main')}/lesson/:courseId/:lessonId`}
+          element={
+            <Wrapper>
+              <LessonDetailsPage />
+            </Wrapper>
+          }
+        />
+        <Route
+          path={`${getNavigationValue('journal.main')}${getNavigationValue('link.journal.attendance')}`}
+          element={
+            <Wrapper>
+              <AttendancePage />
+            </Wrapper>
+          }
+        />
+      </Routes>
+    </Provider>
+  )
+}

src/global.styles.ts

@@ -30,6 +30,27 @@ body {
     /* font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; */
     font-weight: 600;
 }
+
+/* Стили для темной темы */
+html[data-theme="dark"] body {
+    color: #fff;
+    background: radial-gradient(
+        farthest-side at bottom left,
+        rgba(23, 138, 3, 0.709), 
+        rgba(0, 0, 0, 0) 65%
+    ),
+    radial-gradient(
+        farthest-corner at bottom center,
+        rgba(155, 155, 7, 0.5), 
+        rgba(0, 0, 0, 0) 40%
+    ),
+    radial-gradient(
+        farthest-side at bottom right,
+        rgba(0, 116, 153, 0.6), 
+        rgb(18, 25, 31) 65%
+    );
+}
+
 #app {
     height: 100%;
     overflow-y: auto;

src/pages/attendance/attendance.tsx

@@ -130,7 +130,7 @@ const ShortText = ({ text }: { text: string }) => {
 
   if (needShortText) {
     return (
-      <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+      <Tooltip label={text} fontSize="12px" top="16px">
         <Text>{text.slice(0, 20)}...</Text>
       </Tooltip>
     )

src/pages/course-list/course-list.tsx

@@ -19,38 +19,14 @@ import {
   useColorMode,
 } from '@chakra-ui/react'
 import { useForm, Controller } from 'react-hook-form'
-
+import { AddIcon } from '@chakra-ui/icons'
-const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'
-
-const loadServiceMenu = () => {
-  return new Promise((resolve, reject) => {
-    const script = document.createElement('script')
-    script.src = MENU_SCRIPT_URL
-    script.onload = () => setTimeout(() => resolve(true), 1000)
-    script.onerror = reject
-    document.body.appendChild(script)
-  })
-}
 
 import { ErrorSpan } from '../style'
-declare global {
-  interface Window {
-    createServiceMenu?: (options: any) => {
-      show: () => void;
-      hide: () => void;
-      update: () => void;
-      destroy: () => void;
-    };
-  }
-}
-
 import { useAppSelector } from '../../__data__/store'
 import { api } from '../../__data__/api/api'
 import { isTeacher } from '../../utils/user'
-import { AddIcon } from '@chakra-ui/icons'
 import { PageLoader } from '../../components/page-loader/page-loader'
 import { CourseCard } from './course-card'
-import { keycloak } from '../../__data__/kc'
 
 interface NewCourseForm {
   startDt: string
@@ -65,13 +41,7 @@ export const CoursesList = () => {
   const [showForm, setShowForm] = useState(false)
   const toastRef = useRef(null)
 
-  const [serviceMenu, setServiceMenu] = useState(false)
+  const { colorMode } = useColorMode();
-
-  useEffect(() => {
-    loadServiceMenu().then(() => {
-      setServiceMenu(true)
-    }).catch(console.error)
-  }, [])
 
   const {
     control,
@@ -111,39 +81,6 @@ export const CoursesList = () => {
     }
   }, [crucQuery.isSuccess])
 
-  const serviceMenuContainerRef = useRef<HTMLDivElement>(null)
-  const serviceMenuInstanceRef = useRef<any>(null)
-
-  useEffect(() => {
-    // Проверяем, что библиотека загружена и есть контейнер для меню
-    if (window.createServiceMenu && serviceMenuContainerRef.current) {
-      // Создаем меню сервисов
-      serviceMenuInstanceRef.current = window.createServiceMenu({
-        accessToken: keycloak.token,
-        apiUrl: 'https://admin.bro-js.ru',
-        targetElement: serviceMenuContainerRef.current,
-        styles: {
-          dotColor: '#333',
-          hoverColor: '#eee',
-          backgroundColor: '#fff',
-          textColor: '#333',
-        },
-        translations: {
-          menuTitle: 'Сервисы BRO',
-          menuAriaLabel: 'Сервисы BRO',
-        }
-      });
-    }
-
-    // Очистка при размонтировании
-    return () => {
-      if (serviceMenuInstanceRef.current) {
-        serviceMenuInstanceRef.current.destroy();
-        serviceMenuInstanceRef.current = null;
-      }
-    };
-  }, [keycloak.token, serviceMenu]);
-
   if (isLoading) {
     return (
       <PageLoader />
@@ -151,8 +88,6 @@ export const CoursesList = () => {
   }
 
   return (
-    <>
-    <div style={{ position: 'absolute', top: 6, left: 6 }} id="dots" ref={serviceMenuContainerRef}></div>
     <Container maxW="container.xl">
       {isTeacher(user) && (
         <Box mt="15" mb="15">
@@ -263,6 +198,5 @@ export const CoursesList = () => {
         ))}
       </VStack>
     </Container>
-        </>
   )
 }

src/pages/lesson-list/components/item.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import dayjs from 'dayjs'
 import { Link } from 'react-router-dom'
-import { getNavigationsValue, getFeatures } from '@brojs/cli'
+import { getNavigationValue, getFeatures } from '@brojs/cli'
 import {
   Button,
   Tr,
@@ -105,7 +105,7 @@ export const Item: React.FC<ItemProps> = ({
       {isTeacher && (
         <Td>
           <Link
-            to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${id}`}
+            to={`${getNavigationValue('journal.main')}/lesson/${courseId}/${id}`}
             style={{ display: 'flex' }}
           >
             <img width={24} src={qrCode} style={{ margin: '0 auto' }} />

src/pages/style.ts

@@ -31,9 +31,14 @@ export const QRCanvas = styled.canvas`
 `
 
 export const ErrorSpan = styled.span`
-  color: #f9e2e2;
+  color: var(--chakra-colors-red-100);
   display: block;
   padding: 16px;
-  background-color: #d32f0b;
+  background-color: var(--chakra-colors-red-600);
   border-radius: 11px;
+
+  .chakra-ui-dark & {
+    color: var(--chakra-colors-red-200);
+    background-color: var(--chakra-colors-red-800);
+  }
 `