fix: change background color in case of dark-hc theme (#53)

gravity-ui · Apr 13, 2023 · a647216 · a647216
1 parent 72033aa
commit a647216
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/src/Yagr.scss b/src/Yagr.scss
@@ -1,7 +1,8 @@
 .yagr {
     --yagr-font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
 
-    &_theme_light {
+    &_theme_light,
+    &_theme_light-hc {
         --yagr-title-color: #333333;
 
         --yagr-legend-item: rgba(0, 0, 0, 0.5);
@@ -13,7 +14,8 @@
         --yagr-axis-stroke: rgba(0, 0, 0, 0.5);
     }
 
-    &_theme_dark {
+    &_theme_dark,
+    &_theme_dark-hc {
         --yagr-title-color: rgba(255, 255, 255, 0.35);
 
         --yagr-legend-item: rgba(255, 255, 255, 0.5);
@@ -24,6 +26,10 @@
         --yagr-grid: rgba(255, 255, 255, 0.23);
         --yagr-axis-stroke: rgba(255, 255, 255, 0.5);
     }
+
+    &_theme_dark-hc {
+        --yagr-background: rgba(34, 35, 38, 1);
+    }
 }
 
 .yagr {

diff --git a/src/YagrCore/defaults.ts b/src/YagrCore/defaults.ts
@@ -171,11 +171,11 @@ export default class ThemedDefaults {
     }
 
     get SHIFT() {
-        return this.theme === 'light' ? LIGHTEN_COLOR_SHIFT : DARKEN_COLOR_SHIFT;
+        return this.theme?.startsWith('light') ? LIGHTEN_COLOR_SHIFT : DARKEN_COLOR_SHIFT;
     }
 
     get DEFAULT_LINE_COLOR() {
-        return this.theme === 'light' ? LIGHT_DEFAULT_LINE_COLOR : DARK_DEFAULT_LINE_COLOR;
+        return this.theme?.startsWith('light') ? LIGHT_DEFAULT_LINE_COLOR : DARK_DEFAULT_LINE_COLOR;
     }
 }
 

diff --git a/src/YagrCore/index.ts b/src/YagrCore/index.ts
@@ -224,8 +224,9 @@ class Yagr<TConfig extends MinimalValidConfig = MinimalValidConfig> {
      */
     setTheme(themeValue: YagrTheme) {
         this.utils.theme.setTheme(themeValue);
-        this.root.classList.remove('yagr_theme_dark');
-        this.root.classList.remove('yagr_theme_light');
+        const availableThemes: YagrTheme[] = ['light', 'light-hc', 'dark', 'dark-hc'];
+        const classesToRemove = availableThemes.map((theme) => `yagr_theme_${theme}`);
+        this.root.classList.remove(...classesToRemove);
         this.root.classList.add('yagr_theme_' + themeValue);
 
         if (!this.uplot) {

diff --git a/src/YagrCore/types.ts b/src/YagrCore/types.ts
@@ -388,7 +388,7 @@ export interface Scale {
 }
 
 export type ScaleType = 'linear' | 'logarithmic';
-export type YagrTheme = 'light' | 'dark';
+export type YagrTheme = 'light' | 'dark' | 'light-hc' | 'dark-hc';
 export type SupportedLocales = 'en' | 'ru';
 export type DrawKey = 'plotLines' | 'axes' | 'series';