Merge pull request #7 from circus2271/feature/improve-dark-theme

improve dark theme
spb-frontend · Feb 2, 2025 · 1c9c2e2 · 1c9c2e2
2 parents bdfc290 + 485fe36
commit 1c9c2e2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 39 deletions.
diff --git a/src/components/Footer/styles.module.css b/src/components/Footer/styles.module.css
@@ -47,10 +47,10 @@
   background: 50% no-repeat;
   background-size: contain;
   background-image: url('./logo-dark.svg');
-}
 
-:global(.theme-dark) .logo {
-  background-image: url('./logo-light.svg');
+  @media (prefers-color-scheme: dark) {
+    background-image: url('./logo-light.svg');
+  }
 }
 
 .cooperationInfo {

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,32 +1,9 @@
 import { AppProps } from 'next/app';
 import Head from 'next/head';
-import React, { useEffect, useLayoutEffect } from 'react';
+import React from 'react';
 import './../styles/globals.css';
 
-const useUniversalLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
 export default function App({ Component, pageProps }: AppProps) {
-  useUniversalLayoutEffect(() => {
-    if (typeof window === 'undefined' || typeof document === 'undefined' || !document.body) {
-      return;
-    }
-
-    const handleDarkmodeChange = (event?: MediaQueryListEvent) => {
-      const isDarkMode = event == null ? window.matchMedia('(prefers-color-scheme: dark)').matches : event.matches;
-
-      document.body.classList.toggle('theme-dark', isDarkMode);
-      document.body.classList.toggle('theme-light', !isDarkMode);
-    };
-
-    handleDarkmodeChange();
-
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', handleDarkmodeChange);
-
-    return () => {
-      window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', handleDarkmodeChange);
-    };
-  }, []);
-
   return (
     <>
       <Head>

diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -13,6 +13,32 @@
   --text-color-white: var(--color-white);
 
   /* Theme colors*/
+  body {
+    --background-color: var(--background-color-light);
+    --text-color: var(--text-color-black);
+    --link-color: var(--color-blue);
+    --button-color: var(--text-color-black);
+    --button-primary-color: var(--color-blue);
+    --button-primary-text-color: var(--color-white);
+    --button-text-color: var(--text-color-white);
+    --border-color: var(--text-color-black);
+    background-color: rgb(var(--background-color));
+    --background-image-blend-mode: difference;
+
+    @media (prefers-color-scheme: dark) {
+      --background-color: var(--background-color-dark);
+      --text-color: var(--text-color-white);
+      --link-color: var(--color-blue);
+      --button-color: var(--text-color-white);
+      --button-primary-color: var(--color-blue);
+      --button-primary-text-color: var(--color-white);
+      --button-text-color: var(--text-color-black);
+      --border-color: var(--text-color-white);
+      background-color: rgb(var(--background-color));
+      --background-image-blend-mode: normal;
+    }
+  }
+
   .theme-dark {
     --background-color: var(--background-color-dark);
     --text-color: var(--text-color-white);
@@ -26,18 +52,6 @@
     --background-image-blend-mode: normal;
   }
 
-  .theme-light {
-    --background-color: var(--background-color-light);
-    --text-color: var(--text-color-black);
-    --link-color: var(--color-blue);
-    --button-color: var(--text-color-black);
-    --button-primary-color: var(--color-blue);
-    --button-primary-text-color: var(--color-white);
-    --button-text-color: var(--text-color-white);
-    --border-color: var(--text-color-black);
-    background-color: rgb(var(--background-color));
-    --background-image-blend-mode: difference;
-  }
 
   --font-size-s: 14px;
   --font-size-m: 20px;