banner script

assets/css/base/_body.scss

@@ -31,6 +31,7 @@ body{
     background-color: var(--color-bg);
     width: 100vw;
     overflow-x: hidden;
+      
 }
 
 img{
@@ -48,4 +49,9 @@ img{
     // &:hover{
     //     background-color: rgba(255, 0, 0, 0.244);
     // }
+}
+
+
+body, #site-header, #site-footer{
+    transition: background-color 0.3s ease, color 0.3s ease;
 }

assets/css/base/_var.scss

@@ -48,7 +48,7 @@
   --color-accent-50: #e9ffe9;
   --color-accent-100: #d8fdd8;
   --dark: black;
-
+  --color-form: white;
 
 
   --border: 1px solid var(--color-txt);
@@ -87,5 +87,28 @@
     --fs-xbig: 32px;
 
     --header-h: 60px;
+
   }
-}
+}
+
+
+
+:root[data-theme="light"] {
+  --grey-100: #1f1f1f;
+  --grey-200: #2f2f2f;
+  --grey-300: #4a4a4a;
+  --grey-400: #6a6a6a;
+  --grey-600: #9a9a9a;
+  --grey-800: #cfcfcf;
+
+  --color-bg: #efefef;
+  --color-txt: #000000;
+  --color-txt-light: var(--grey-400);
+
+  --color-accent: #ff00ff;
+  --color-accent-50: #ffe9ff;
+  --color-accent-100: #fdd8fd;
+
+  --dark: white;
+  --color-form: var(--color-bg);
+}