fix: global themes \ modal theme styles

TomatoVan · Nov 8, 2023 · 70ed6f1 · 70ed6f1
1 parent 14133b7
commit 70ed6f1
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 7 deletions.
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -1,16 +1,13 @@
 import React, { Suspense } from 'react';
 import './styles/index.scss';
 import { classNames } from 'shared/lib/classNames/classNames';
-import { useTheme } from 'app/providers/ThemeProvider';
 import { AppRouter } from 'app/providers/router';
 import { Navbar } from 'widgets/Navbar';
 import { Sidebar } from 'widgets/Sidebar';
 
 function App() {
-    const { theme } = useTheme();
-
     return (
-        <div className={classNames('app', {}, [theme])}>
+        <div className={classNames('app', {}, [])}>
             <Suspense fallback="">
                 <Navbar />
                 <div className="content-page">

diff --git a/src/app/providers/ThemeProvider/lib/ThemeContext.ts b/src/app/providers/ThemeProvider/lib/ThemeContext.ts
@@ -1,8 +1,8 @@
 import { createContext } from 'react';
 
 export enum Theme {
-    LIGHT = 'light',
-    DARK = 'dark',
+    LIGHT = 'app_light_theme',
+    DARK = 'app_dark_theme',
 }
 
 export interface ThemeContextProps {

diff --git a/src/app/providers/ThemeProvider/lib/useTheme.ts b/src/app/providers/ThemeProvider/lib/useTheme.ts
@@ -12,6 +12,8 @@ export function useTheme(): UseThemeResult {
     const toggleTheme = () => {
         const newTheme = theme === Theme.DARK ? Theme.LIGHT : Theme.DARK;
         setTheme(newTheme);
+        // чтобы работали стили в модалках и других частях приложения (используется по умолчанию везде как единая точка входа)
+        document.body.className = newTheme;
         localStorage.setItem(LOCAL_STORAGE_THEME_KEY, newTheme);
     };
 

diff --git a/src/app/styles/themes/dark.scss b/src/app/styles/themes/dark.scss
@@ -1,4 +1,4 @@
-.app.dark {
+.app_dark_theme {
     --bg-color: #090949;
     --inverted-bg-color: #e8e8ea;
     --primary-color: #04ff04;