Добавлено расширение темы 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;
   }
-`
+`