Add Theme Switcher

Author: webdevia

src/app/App.css

@@ -1,38 +1,38 @@
 .App {
-    text-align: center;
+  text-align: center;
 }
 
 .App-logo {
-    height: 40vmin;
-    pointer-events: none;
+  height: 40vmin;
+  pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-        animation: App-logo-spin infinite 20s linear;
-    }
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
 }
 
 .App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
+  background-color: var(--background-color);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: var(--color);
 }
 
 .App-link {
-    color: #61dafb;
+  color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

src/app/App.tsx

@@ -2,22 +2,26 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
+import { ThemeProvider } from '../shared/providers/ThemeProvider';
+import { ThemeSwitcher } from '../shared/theme-switcher/ThemeSwitcher';
+
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
+    <ThemeProvider>
+      <div className="App">
+        <header className="App-header">
+          <ThemeSwitcher />
+          <img src={logo} className="App-logo" alt="logo" />
           <h1>Игорь Аралов ([email protected])</h1>
           <p>Научиться разрабатывать веб-приложения при помощи React</p>
           <p>
             Профессионально работаю SQL разработчиком уже 10 лет и принимаю участие в разработке десктопного приложения
             на Delphi
           </p>
           <p>Интересуюсь фронтенд и фуллстек разработкой на js/ts</p>
-        </p>
-      </header>
-    </div>
+        </header>
+      </div>
+    </ThemeProvider>
   );
 }
 

src/app/index.css

@@ -1,13 +1,25 @@
+[data-theme='light'] {
+  --background-color: #fff;
+  --color: #000;
+  --logo-bg-color: #f4f4f4;
+  --logo-text-color: #333;
+}
+
+[data-theme='dark'] {
+  --background-color: #333;
+  --color: #fff;
+  --logo-bg-color: #333;
+  --logo-text-color: #f4f4f4;
+}
+
 body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-        'Helvetica Neue', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-        monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

src/shared/header/Header.module.scss

@@ -1,8 +1,10 @@
 .header {
+  display:flex;
+  justify-content: space-between;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
-  background-color: #333;
+  background-color: var(--header-bg-color);
   color: white;
   padding: 10px;
   min-height: 50px;

src/shared/header/Header.tsx

@@ -1,9 +1,15 @@
 import React from 'react';
 import { Logo } from '../logo/Logo';
+import { ThemeSwitcher } from '../theme-switcher/ThemeSwitcher';
 import s from './Header.module.scss';
 
-type HeaderProps = {
+export type HeaderProps = {
   showLogo: boolean;
 };
 
-export const Header = ({ showLogo = true }: HeaderProps) => <div className={s.header}>{showLogo && <Logo />}</div>;
+export const Header = ({ showLogo = true }: HeaderProps) => (
+  <div className={s.header}>
+    {showLogo && <Logo />}
+    <ThemeSwitcher />
+  </div>
+);

src/shared/layout/Layout.module.scss

@@ -1,5 +1,6 @@
 .content {
   margin: 0;
   padding: 20px;
-  background-color: #f4f4f4;
+  background-color: var(--layout-bg-color);
+  color: var(--color);
 }

src/shared/logo/Logo.module.scss

@@ -1,12 +1,12 @@
 .logo {
   width: 80px;
   height: 50px;
-  background-color: #f4f4f4;
+  background-color: var(--logo-bg-color);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #333;
+  color: var(--logo-text-color);
   font-family: 'Courier New', Courier, monospace;
   font-size: 1.35rem;
   font-weight: bold;

src/shared/providers/ThemeProvider.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
+
+type Theme = 'dark' | 'light';
+
+type ThemeContextType = { theme: Theme; toggleTheme: () => void };
+
+type ThemeProviderProps = {
+  children: ReactNode;
+};
+
+const ThemeContext = createContext<ThemeContextType>(null);
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const ThemeProvider = ({ children }: ThemeProviderProps) => {
+  const [theme, setTheme] = useState<Theme>('light');
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
+  };
+
+  return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>;
+};

src/shared/theme-switcher/ThemeSwitcher.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { useTheme } from '../providers/ThemeProvider';
+import { Button } from '../button/Button';
+
+export const ThemeSwitcher = () => {
+  const { theme, toggleTheme } = useTheme();
+
+  return <Button onClick={toggleTheme}>Switch to {theme === 'light' ? 'Dark' : 'Light'} Theme</Button>;
+};