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

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 && (