From 70ed6f13c29cbfe7bc5f5f329c0c3e218f0b8584 Mon Sep 17 00:00:00 2001
From: "Leon.kov" <kovzel.leo@gmail.com>
Date: Wed, 8 Nov 2023 12:38:49 +0300
Subject: [PATCH] fix: global themes \ modal theme styles

---
 src/app/App.tsx                                     | 5 +----
 src/app/providers/ThemeProvider/lib/ThemeContext.ts | 4 ++--
 src/app/providers/ThemeProvider/lib/useTheme.ts     | 2 ++
 src/app/styles/themes/dark.scss                     | 2 +-
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index c35e410..60c866a 100644
--- 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
index 34089fb..8fa8010 100644
--- 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
index a798f55..81b346b 100644
--- 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
index 0380b0e..071c8a1 100644
--- 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;