diff --git a/src/components/Footer/styles.module.css b/src/components/Footer/styles.module.css index 3eecca52..5a77cca0 100644 --- 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 index 955b56cb..bbcdfad3 100644 --- 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 ( <> diff --git a/src/styles/variables.css b/src/styles/variables.css index 7c567035..4e0c475f 100644 --- 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;