feat: add orange theme

TomatoVan · Dec 16, 2023 · a60654e · a60654e
1 parent 282297e
commit a60654e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 4 deletions.
diff --git a/src/app/providers/ThemeProvider/lib/ThemeContext.ts b/src/app/providers/ThemeProvider/lib/ThemeContext.ts
@@ -3,6 +3,7 @@ import { createContext } from 'react';
 export enum Theme {
     LIGHT = 'app_light_theme',
     DARK = 'app_dark_theme',
+		ORANGE = 'app_orange_theme'
 }
 
 export interface ThemeContextProps {

diff --git a/src/app/providers/ThemeProvider/lib/useTheme.ts b/src/app/providers/ThemeProvider/lib/useTheme.ts
@@ -10,7 +10,21 @@ export function useTheme(): UseThemeResult {
     const { theme, setTheme } = useContext(ThemeContext);
 
     const toggleTheme = () => {
-        const newTheme = theme === Theme.DARK ? Theme.LIGHT : Theme.DARK;
+        let newTheme: Theme;
+        switch (theme) {
+        case Theme.DARK:
+            newTheme = Theme.LIGHT;
+            break;
+        case Theme.LIGHT:
+            newTheme = Theme.ORANGE;
+            break;
+        case Theme.ORANGE:
+            newTheme = Theme.DARK;
+            break;
+        default:
+            newTheme = Theme.LIGHT;
+        }
+
         setTheme?.(newTheme);
         // чтобы работали стили в модалках и других частях приложения (используется по умолчанию везде как единая точка входа)
         document.body.className = newTheme;

diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
@@ -1,7 +1,8 @@
 @import "reset";
-@import "variables/global";
-@import "themes/normal";
-@import "themes/dark";
+@import "./variables/global";
+@import "./themes/normal";
+@import "./themes/dark";
+@import "./themes/orange";
 
 body {
     font: var(--font-m);

diff --git a/src/app/styles/themes/orange.scss b/src/app/styles/themes/orange.scss
@@ -0,0 +1,8 @@
+.app_orange_theme {
+    --bg-color: #faf4fb;
+    --inverted-bg-color: #bd5012;
+    --primary-color: #9a1a0e;
+    --secondary-color: #d01f0e;
+    --inverted-primary-color: #dbd5dc;
+    --inverted-secondary-color: #faf4fb;
+}