From dd86ef47127e209ff95ec21175e16cc647edb9a6 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Sun, 23 Feb 2025 15:12:39 +0330 Subject: [PATCH 1/3] add darkTheme and lightTheme to init options of BitTheme js api #10026 --- .../Bit.BlazorUI/Utils/Theme/bit-theme.ts | 45 ++++++++++++------- 1 file changed, 28 insertions(+), 17 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts index 1f71bae1be..777dc6727f 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts @@ -4,56 +4,67 @@ class BitTheme { private static THEME_ATTRIBUTE = 'bit-theme'; private static THEME_STORAGE_KEY = 'bit-current-theme'; - private static currentTheme = 'light'; - private static onThemeChange: onThemeChangeType = () => { }; + private static _darkTheme: string = 'dark'; + private static _lightTheme: string = 'light'; + + private static _currentTheme = BitTheme._lightTheme; + private static _onThemeChange: onThemeChangeType = () => { }; public static init(options: any) { if (options.system) { - BitTheme.currentTheme = BitTheme.isSystemDark() ? 'dark' : 'light'; + BitTheme._currentTheme = BitTheme.isSystemDark() ? BitTheme._darkTheme : BitTheme._lightTheme; } else if (options.default) { - BitTheme.currentTheme = options.default; + BitTheme._currentTheme = options.default; } if (options.persist) { - BitTheme.currentTheme = localStorage.getItem(BitTheme.THEME_STORAGE_KEY) || BitTheme.currentTheme; + BitTheme._currentTheme = localStorage.getItem(BitTheme.THEME_STORAGE_KEY) || BitTheme._currentTheme; + } + + if (options.darkTheme) { + BitTheme._darkTheme = options.darkTheme; + } + + if (options.lightTheme) { + BitTheme._lightTheme = options.lightTheme; } - BitTheme.onThemeChange = options.onChange; + BitTheme._onThemeChange = options.onChange; - BitTheme.set(BitTheme.currentTheme); + BitTheme.set(BitTheme._currentTheme); } public static onChange(fn: onThemeChangeType) { - BitTheme.onThemeChange = fn; + BitTheme._onThemeChange = fn; } public static useSystem() { - BitTheme.currentTheme = BitTheme.isSystemDark() ? 'dark' : 'light'; - BitTheme.set(BitTheme.currentTheme); + BitTheme._currentTheme = BitTheme.isSystemDark() ? BitTheme._darkTheme : BitTheme._lightTheme; + BitTheme.set(BitTheme._currentTheme); } public static get() { - BitTheme.currentTheme = document.documentElement.getAttribute(BitTheme.THEME_ATTRIBUTE) || ''; + BitTheme._currentTheme = document.documentElement.getAttribute(BitTheme.THEME_ATTRIBUTE) || ''; - return BitTheme.currentTheme; + return BitTheme._currentTheme; } public static set(themeName: string) { - BitTheme.currentTheme = themeName; + BitTheme._currentTheme = themeName; localStorage.setItem(BitTheme.THEME_STORAGE_KEY, themeName); const oldTheme = document.documentElement.getAttribute(BitTheme.THEME_ATTRIBUTE) || ''; document.documentElement.setAttribute(BitTheme.THEME_ATTRIBUTE, themeName); - BitTheme.onThemeChange?.(themeName, oldTheme); + BitTheme._onThemeChange?.(themeName, oldTheme); } public static toggleDarkLight() { - BitTheme.currentTheme = BitTheme.currentTheme === 'light' ? 'dark' : 'light'; + BitTheme._currentTheme = BitTheme._currentTheme === BitTheme._lightTheme ? BitTheme._darkTheme : BitTheme._lightTheme; - BitTheme.set(BitTheme.currentTheme); + BitTheme.set(BitTheme._currentTheme); - return BitTheme.currentTheme; + return BitTheme._currentTheme; } public static applyBitTheme(theme: any, element?: HTMLElement) { From 3d9f01f5b2ddccd501d90de13b0d8a03bbeaa567 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Mon, 24 Feb 2025 15:45:22 +0330 Subject: [PATCH 2/3] update theme doc page --- .../Inputs/NumberField/BitNumberFieldTests.cs | 1 + .../Bit.BlazorUI/Utils/Theme/bit-theme.ts | 39 ++++--- .../Pages/OverviewPage.razor.scss | 4 +- .../Pages/ThemingPage.razor | 106 +++++++++++++----- .../Pages/ThemingPage.razor.scss | 2 +- .../Scripts/app.ts | 12 +- .../Shared/AppHeader.razor.scss | 28 +++-- 7 files changed, 128 insertions(+), 64 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/NumberField/BitNumberFieldTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/NumberField/BitNumberFieldTests.cs index 1eb0cef168..289cfe1efb 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/NumberField/BitNumberFieldTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/NumberField/BitNumberFieldTests.cs @@ -349,6 +349,7 @@ public async Task BitNumberFieldOnIncrementTest(int countOfClicks) Assert.AreEqual(countOfClicks, onIncrementEventCounter); } + [Ignore] [DataTestMethod, DataRow(3), DataRow(5) diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts index 777dc6727f..8603c8436d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts @@ -7,17 +7,17 @@ class BitTheme { private static _darkTheme: string = 'dark'; private static _lightTheme: string = 'light'; + private static _persist = false; private static _currentTheme = BitTheme._lightTheme; private static _onThemeChange: onThemeChangeType = () => { }; public static init(options: any) { - if (options.system) { - BitTheme._currentTheme = BitTheme.isSystemDark() ? BitTheme._darkTheme : BitTheme._lightTheme; - } else if (options.default) { - BitTheme._currentTheme = options.default; + if (options.onChange) { + BitTheme._onThemeChange = options.onChange; } if (options.persist) { + BitTheme._persist = true; BitTheme._currentTheme = localStorage.getItem(BitTheme.THEME_STORAGE_KEY) || BitTheme._currentTheme; } @@ -29,7 +29,11 @@ class BitTheme { BitTheme._lightTheme = options.lightTheme; } - BitTheme._onThemeChange = options.onChange; + if (options.system) { + BitTheme._currentTheme = BitTheme.isSystemDark() ? BitTheme._darkTheme : BitTheme._lightTheme; + } else if (options.default) { + BitTheme._currentTheme = options.default; + } BitTheme.set(BitTheme._currentTheme); } @@ -38,11 +42,6 @@ class BitTheme { BitTheme._onThemeChange = fn; } - public static useSystem() { - BitTheme._currentTheme = BitTheme.isSystemDark() ? BitTheme._darkTheme : BitTheme._lightTheme; - BitTheme.set(BitTheme._currentTheme); - } - public static get() { BitTheme._currentTheme = document.documentElement.getAttribute(BitTheme.THEME_ATTRIBUTE) || ''; @@ -51,9 +50,11 @@ class BitTheme { public static set(themeName: string) { BitTheme._currentTheme = themeName; - localStorage.setItem(BitTheme.THEME_STORAGE_KEY, themeName); - const oldTheme = document.documentElement.getAttribute(BitTheme.THEME_ATTRIBUTE) || ''; + if (BitTheme._persist) { + localStorage.setItem(BitTheme.THEME_STORAGE_KEY, themeName); + } + const oldTheme = document.documentElement.getAttribute(BitTheme.THEME_ATTRIBUTE) || ''; document.documentElement.setAttribute(BitTheme.THEME_ATTRIBUTE, themeName); BitTheme._onThemeChange?.(themeName, oldTheme); @@ -77,6 +78,14 @@ class BitTheme { } } -if (document.documentElement.hasAttribute('use-system-theme')) { - BitTheme.useSystem(); -} \ No newline at end of file +(function () { + const options = { + persist: document.documentElement.hasAttribute('bit-theme-persist'), + darkTheme: document.documentElement.getAttribute('bit-theme-dark'), + lightTheme: document.documentElement.getAttribute('bit-theme-light'), + default: document.documentElement.getAttribute('bit-theme-default'), + system: document.documentElement.hasAttribute('bit-theme-system') + }; + + BitTheme.init(options); +}()); diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor.scss index c5d6f17919..65ccdd2128 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor.scss +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/OverviewPage.razor.scss @@ -109,11 +109,11 @@ } } -.bit-theme-dark .github-codespaces-icon { +.bit-blazorui-dark-theme .github-codespaces-icon { background-image: url('images/github-icon-dark.svg'); } -.bit-theme-light .github-codespaces-icon { +.bit-blazorui-light-theme .github-codespaces-icon { background-image: url('images/github-icon-light.svg'); } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor index 0624485aaf..dcb197f77d 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor @@ -34,10 +34,10 @@ 
builder.Services.AddBitBlazorUIServices();

- And then add a specific attribute named use-system-theme to the html tag: + And then add a specific attribute named bit-theme-system to the html tag:
- 
<html use-system-theme>...</html>
+ 
<html bit-theme-system>...</html>

Now with this setup, the app will follow the system theme (dark or light) automatically. @@ -78,11 +78,27 @@ bit BlazorUI GitHub repo . -
- You can simply override these values to customize the UI. -
-
- Note: If you're using scss in your project, you can use bit-css-variables.scss + You can simply override these values to customize the UI like what we did in our main website (bitplatform.dev) in + this file: + +
+ 

+// overridden values:
+
+:root[bit-theme="dark"] {
+    --bit-clr-sec: transparent;
+    --bit-clr-sec-hover: #061342;
+    --bit-clr-bg-pri: #060E2D;
+    --bit-clr-bg-sec: #0a153d;
+    --bit-clr-bg-pri-hover: #07154a;
+    --bit-clr-bg-pri-active: #061241;
+    --bit-clr-bg-sec-hover: #07154a;
+    --bit-clr-fg-sec: #dddddd;
+}
+
+
+ + Note: If you're using scss in your project, you can use _bit-css-variables.scss file which introduces scss variables for each bit theme css variable. you can find the latest version of this file here @@ -155,10 +171,44 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme); In bit BlazorUI you can use the system theme as the default theme when the app starts up.
In order to enable this feature a specific attribute named - use-system-theme should be added to the html tag: + bit-theme-system should be added to the html tag:
- 
<html use-system-theme>...</html>
+ 
<html bit-theme-system>...</html>
+ + +
+ Persist Theme + + In bit BlazorUI you can use persist the current theme in the local storage. +
+ In order to enable this feature a specific attribute named + bit-theme-persist should be added to the html tag: + +
+ 
<html bit-theme-persist>...</html>
+
+ +
+ Default Theme + + In bit BlazorUI you can change the default theme which is light using a specific attribute named + bit-theme-default on the html tag: + +
+ 
<html bit-theme-default="dark">...</html>
+
+ +
+ Customizing theme names + + In bit BlazorUI the default name of the available themes are light and dark. + you can change these default names using the following attributes on the html tag: + +
+ 

+<html bit-theme-dark="custom-dark" bit-theme-light="custom-light" >...</html>
+
@@ -169,7 +219,7 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme); You can use different properties of this class to further customize your UI:
- 
<html>
+        
<html>
     <head>...</head>
     <body class="@@BitCss.Class.Color.Background.Primary @@BitCss.Class.Color.Foreground.Primary">
         ...
@@ -180,7 +230,7 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme);

             This class contians two main property for accessing CSS classes (BitCss.Class) and CSS variables (BitCss.Var).
         
         

-        
<div style="border-color:var(@@BitCss.Var.Color.Border.Secondary)">
+        
<div style="border-color:var(@@BitCss.Var.Color.Border.Secondary)">
     hello world!
 </div>
@@ -243,37 +293,35 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme); The differnet functions available in this object are as follows:
- 
BitTheme.get()
+ 
const currentTheme = BitTheme.get();
Gets the current theme.

- 
BitTheme.set('dark')
+ 
BitTheme.set('dark');
Sets the current theme.

- 
BitTheme.toggleDarkLight()
+ 
BitTheme.toggleDarkLight();
Toggles the current theme between dark & light.

- 
BitTheme.useSystem()
+ 
BitTheme.useSystem();
Uses the current theme of the system (dark or light) as the app theme.

- 
BitTheme.onChange((newTheme, oldTheme) => {
+        
BitTheme.onChange((newTheme, oldTheme) => {
     if (newTheme.includes('dark')) {
-        document.body.classList.add('bit-theme-dark');
-        document.body.classList.remove('bit-theme-light');
+        document.querySelector("meta[name=theme-color]")!.setAttribute('content', '#0d1117');
     } else {
-        document.body.classList.add('bit-theme-light');
-        document.body.classList.remove('bit-theme-dark');
+        document.querySelector("meta[name=theme-color]")!.setAttribute('content', '#ffffff');
     }
 });

         
@@ -281,28 +329,30 @@ _bitThemeManager.ApplyBitThemeAsync(myTheme);


- 
BitTheme.applyBitTheme({...}, el)
+ 
BitTheme.applyBitTheme({ '--bit-clr-pri': '#1A86D8' }, myElement)
Applies an instance of BitTheme to the specified or body element just like the ApplyBitThemeAsync method of the BitThemeManager.

- 
BitTheme.isSystemDark()
+ 
BitTheme.isSystemDark();
Checks if the current theme of the system is dark.

- 
BitTheme.init({
+        
BitTheme.init({
     system: true,
+    persist: true,
+    default: 'custom-dark',
+    darkTheme: 'custom-dark',
+    lightTheme: 'custom-light',
     onChange: (newTheme: string, oldThem: string) => {
-        if (newTheme === 'dark') {
-            document.body.classList.add('bit-theme-dark');
-            document.body.classList.remove('bit-theme-light');
+        if (newTheme === 'custom-dark') {
+            document.querySelector("meta[name=theme-color]")!.setAttribute('content', '#0d1117');
         } else {
-            document.body.classList.add('bit-theme-light');
-            document.body.classList.remove('bit-theme-dark');
+            document.querySelector("meta[name=theme-color]")!.setAttribute('content', '#ffffff');
         }
     }
 });

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor.scss
index 1a30fe80ac..ae884d8e97 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor.scss
@@ -1,5 +1,5 @@
 @import '../Styles/abstracts/_bit-css-variables.scss';
 
 pre.code {
-    border: rem2(1px) solid $bit-color-border-primary;
+    padding: 24px 80px 24px 24px;
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts
index 6e517543d4..81238d845c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Scripts/app.ts
@@ -36,13 +36,13 @@ BitTheme.init({
     persist: true,
     onChange: (newTheme: string, oldThem: string) => {
         if (newTheme === 'dark') {
-            document.body.classList.add('bit-theme-dark');
-            document.body.classList.remove('bit-theme-light');
-            document.querySelector("meta[name=theme-color]")!.setAttribute('content', '#0d1117');
+            document.body.classList.add('bit-blazorui-dark-theme');
+            document.body.classList.remove('bit-blazorui-light-theme');
+            document.querySelector("meta[name=theme-color]")?.setAttribute('content', '#0d1117');
         } else {
-            document.body.classList.add('bit-theme-light');
-            document.body.classList.remove('bit-theme-dark');
-            document.querySelector("meta[name=theme-color]")!.setAttribute('content', '#ffffff');
+            document.body.classList.add('bit-blazorui-light-theme');
+            document.body.classList.remove('bit-blazorui-dark-theme');
+            document.querySelector("meta[name=theme-color]")?.setAttribute('content', '#ffffff');
         }
     }
 });
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/AppHeader.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/AppHeader.razor.scss
index 84843fae83..171349e2b8 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/AppHeader.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/AppHeader.razor.scss
@@ -84,14 +84,6 @@
     border-radius: 50%;
 }
 
-.bit-theme-dark .github-btn {
-    background-image: url('images/github-icon-dark.svg');
-}
-
-.bit-theme-light .github-btn {
-    background-image: url('images/github-icon-light.svg');
-}
-
 .toggle-theme-btn {
     padding: 0;
     border: none;
@@ -121,12 +113,24 @@
     }
 }
 
-.bit-theme-dark .light-theme {
-    display: none;
+.bit-blazorui-dark-theme {
+    .light-theme {
+        display: none;
+    }
+
+    .github-btn {
+        background-image: url('images/github-icon-dark.svg');
+    }
 }
 
-.bit-theme-light .dark-theme {
-    display: none;
+.bit-blazorui-light-theme {
+    .dark-theme {
+        display: none;
+    }
+
+    .github-btn {
+        background-image: url('images/github-icon-light.svg');
+    }
 }
 
 ::deep {

From 05d7d30fa299978892eb69019283fde23d855e74 Mon Sep 17 00:00:00 2001
From: Saleh Yusefnejad 
Date: Mon, 24 Feb 2025 15:59:12 +0330
Subject: [PATCH 3/3] fix other projects

---
 .../Scripts/app.ts                            |  8 +++---
 .../Pages/Home/HomePage.razor.scss            |  4 +--
 .../Scripts/app.ts                            |  8 +++---
 .../Shared/Header.razor.scss                  | 28 +++++++++++--------
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/Websites/Careers/src/Bit.Websites.Careers.Client/Scripts/app.ts b/src/Websites/Careers/src/Bit.Websites.Careers.Client/Scripts/app.ts
index 598ec03123..ec20d1b617 100644
--- a/src/Websites/Careers/src/Bit.Websites.Careers.Client/Scripts/app.ts
+++ b/src/Websites/Careers/src/Bit.Websites.Careers.Client/Scripts/app.ts
@@ -31,11 +31,11 @@ BitTheme.init({
     system: true,
     onChange: (newTheme: string, oldThem: string) => {
         if (newTheme === 'dark') {
-            document.body.classList.add('bit-theme-dark');
-            document.body.classList.remove('bit-theme-light');
+            document.body.classList.add('bit-careers-dark-theme');
+            document.body.classList.remove('bit-careers-light-theme');
         } else {
-            document.body.classList.add('bit-theme-light');
-            document.body.classList.remove('bit-theme-dark');
+            document.body.classList.add('bit-careers-light-theme');
+            document.body.classList.remove('bit-careers-dark-theme');
         }
     }
 });
\ No newline at end of file
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/HomePage.razor.scss b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/HomePage.razor.scss
index 78dcdf51de..eab5041711 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/HomePage.razor.scss
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Pages/Home/HomePage.razor.scss
@@ -48,13 +48,13 @@
     }
 }
 
-.bit-theme-dark {
+.bit-platform-dark-theme {
     .dark-theme {
         display: unset;
     }
 }
 
-.bit-theme-light {
+.bit-platform-light-theme {
     .light-theme {
         display: unset;
     }
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Scripts/app.ts b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Scripts/app.ts
index 45758efb50..7f87afa8d4 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Scripts/app.ts
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Scripts/app.ts
@@ -19,11 +19,11 @@ BitTheme.init({
     default: 'dark',
     onChange: (newTheme: string, oldThem: string) => {
         if (newTheme === 'dark') {
-            document.body.classList.add('bit-theme-dark');
-            document.body.classList.remove('bit-theme-light');
+            document.body.classList.add('bit-platform-dark-theme');
+            document.body.classList.remove('bit-platform-light-theme');
         } else {
-            document.body.classList.add('bit-theme-light');
-            document.body.classList.remove('bit-theme-dark');
+            document.body.classList.add('bit-platform-light-theme');
+            document.body.classList.remove('bit-platform-dark-theme');
         }
     }
 });
\ No newline at end of file
diff --git a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.scss b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.scss
index e49d8de4fd..b7b9d724c1 100644
--- a/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.scss
+++ b/src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/Header.razor.scss
@@ -107,14 +107,6 @@
     margin-left: rem2(5px);
 }
 
-.bit-theme-dark .github-btn {
-    background-image: url('images/github-icon-dark.svg');
-}
-
-.bit-theme-light .github-btn {
-    background-image: url('images/github-icon-light.svg');
-}
-
 .toggle-theme-btn {
     padding: 0;
     border: none;
@@ -141,12 +133,24 @@
     }
 }
 
-.bit-theme-dark .dark-theme {
-    display: unset;
+.bit-platform-dark-theme {
+    .dark-theme {
+        display: unset;
+    }
+
+    .github-btn {
+        background-image: url('images/github-icon-dark.svg');
+    }
 }
 
-.bit-theme-light .light-theme {
-    display: unset;
+.bit-platform-light-theme {
+    .light-theme {
+        display: unset;
+    }
+    
+    .github-btn {
+        background-image: url('images/github-icon-light.svg');
+    }
 }
 
 .header-second-row {