replacing styles to use css variables • working on theming

AnselmMarie · Sep 16, 2024 · 0a3cae2 · 0a3cae2
1 parent 7f92136
commit 0a3cae2
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git a/libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx b/libs/features/src/lib/navigation/component/switch.theme/switch.theme.view.tsx
@@ -1,7 +1,7 @@
 import { memo, ReactElement, useEffect } from 'react';
 
 import { ThemeTypeEnum, useThemeStore } from '@pokemon-pet-shop/store';
-import { IconTypeEnum, SwitchStatusEnum, UiSwitch, UiTypography } from '@pokemon-pet-shop/ui';
+import { IconTypeEnum, SwitchStatusEnum, UiSwitch } from '@pokemon-pet-shop/ui';
 
 import { SwitchProps } from './switch.theme.interface';
 
@@ -11,10 +11,9 @@ const SwitchTheme = ({ className }: SwitchProps): ReactElement => {
 
   const updateTheming = (newTheme: ThemeTypeEnum) => {
     updateTheme(newTheme);
-    // const el = document.querySelector('html');
 
-    // el?.classList.toggle(ThemeTypeEnum.DARK);
-    // el?.classList.toggle(ThemeTypeEnum.LIGHT);
+    const el = document.querySelector('html');
+    el?.setAttribute('data-theme', newTheme);
   };
 
   const turnLightOnClick = () => {
@@ -26,8 +25,8 @@ const SwitchTheme = ({ className }: SwitchProps): ReactElement => {
   };
 
   useEffect(() => {
-    // const el = document.querySelector('html');
-    // el?.classList.add(theme);
+    const el = document.querySelector('html');
+    el?.setAttribute('data-theme', theme);
   }, [theme]);
 
   return (

diff --git a/libs/features/src/lib/navigation/header/header.module.css b/libs/features/src/lib/navigation/header/header.module.css
@@ -1,11 +1,11 @@
 .headerWrapper {
   justify-content: space-between;
-  padding: 10px 0;
-  box-shadow: 0 2px 8px 1px rgba(6, 42, 73, 0.15);
+  padding: var(--theme-spacing-10) 0;
+  box-shadow: 0 2px 8px 1px rgb(6 42 73 / 15%);
   position: sticky;
   top: 0;
   z-index: 99;
-  background-color: white;
+  background-color: var(--theme-netural-100);
 }
 
 .container {
@@ -16,19 +16,19 @@
 .nav {
   width: 100%;
   display: flex;
-  margin: 0 15px;
-  padding: 10px 15px;
+  margin: 0 var(--theme-spacing-15);
+  padding: var(--theme-spacing-10) var(--theme-spacing-15);
   align-items: center;
   border-radius: 100px;
   background: grey;
 }
 
 .navTitle {
-  margin-right: 10px;
+  margin-right: var(--theme-spacing-10);
 }
 
 .iconCart {
-  margin-left: 15px;
+  margin-left: var(--theme-spacing-15);
 }
 
 .logo,
@@ -40,9 +40,11 @@
   .logo {
     display: block;
   }
+
   .iconMenu {
     display: none;
   }
+
   .switchTheme {
     display: flex;
   }

diff --git a/libs/ui/src/lib-base/styles/css/global.css b/libs/ui/src/lib-base/styles/css/global.css
@@ -1,15 +1,23 @@
 @import url('reset.css');
 @import url('_variables.css');
 
-/* :root,
-html[data-theme='light'] {
-  --background-color: #fff;
-  --text-color: #121416d8;
-  --link-color: #543fd7;
+html[data-theme='dark'] {
+  --theme-netural-100: var(--theme-netural-100-dark);
+  --theme-netural-200: var(--theme-netural-200-dark);
+  --theme-netural-400: var(--theme-netural-400-dark);
+  --theme-netural-600: var(--theme-netural-600-dark);
+  --theme-blue-100: var(--theme-blue-100-dark);
+  --theme-blue-600: var(--theme-blue-600-dark);
+  --theme-green-200: var(--theme-green-200-dark);
+  --theme-green-400: var(--theme-green-400-dark);
+  --theme-green-600: var(--theme-green-600-dark);
+  --theme-green-800: var(--theme-green-800-dark);
 }
 
-html[data-theme='dark'] {
-  --background-color: #212a2e;
-  --text-color: #f7f8f8;
-  --link-color: #828fff;
-} */
+body {
+  background-color: var(--theme-blue-100);
+}
+
+* {
+  transition: background-color 0.5s;
+}