Dark theme flicker issue fixed

Author: sazedul-haque

assets/core/scss/themes/_dark.scss

@@ -3,7 +3,8 @@
 
 @use '../tokens' as *;
 
-[data-tutor-theme='dark'] {
+// Mixin containing all dark theme tokens
+@mixin dark-theme-tokens {
   // =============================================================================
   // SURFACE COLORS
   // =============================================================================
@@ -214,3 +215,16 @@
   --tutor-shadow-2xl: #{$tutor-shadow-2xl};
   --tutor-shadow-3xl: #{$tutor-shadow-3xl};
 }
+
+// Apply dark theme when explicitly set
+[data-tutor-theme='dark'] {
+  @include dark-theme-tokens;
+}
+
+// Apply dark theme when system preference is dark
+// This prevents flash of light theme before JS loads
+@media (prefers-color-scheme: dark) {
+  [data-tutor-theme='system'] {
+    @include dark-theme-tokens;
+  }
+}

assets/core/scss/themes/_deuteranomaly.scss

@@ -53,7 +53,7 @@
 // LIGHT — overrides specific to the light base theme
 // =============================================================================
 
-[data-tutor-theme='light'][data-tutor-vision='deuteranomaly'] {
+@mixin deuteranomaly-light-tokens {
   // SURFACE COLORS
   --tutor-surface-warning: #{$tutor-warning-50};
   --tutor-surface-warning-hover: #{$tutor-warning-100};
@@ -88,7 +88,7 @@
 // DARK — overrides specific to the dark base theme
 // =============================================================================
 
-[data-tutor-theme='dark'][data-tutor-vision='deuteranomaly'] {
+@mixin deuteranomaly-dark-tokens {
   // SURFACE COLORS
   --tutor-surface-warning: #{$tutor-gray-750};
   --tutor-surface-warning-hover: #{$tutor-warning-900};
@@ -120,3 +120,18 @@
   --tutor-actions-warning-exception: #{$tutor-orange-50};
   --tutor-actions-critical-secondary: #{$tutor-gray-700};
 }
+
+[data-tutor-theme='light'][data-tutor-vision='deuteranomaly'],
+[data-tutor-theme='system'][data-tutor-vision='deuteranomaly'] {
+  @include deuteranomaly-light-tokens;
+}
+
+[data-tutor-theme='dark'][data-tutor-vision='deuteranomaly'] {
+  @include deuteranomaly-dark-tokens;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-tutor-theme='system'][data-tutor-vision='deuteranomaly'] {
+    @include deuteranomaly-dark-tokens;
+  }
+}

assets/core/scss/themes/_deuteranopia.scss

@@ -54,7 +54,7 @@
 // LIGHT — overrides specific to the light base theme
 // =============================================================================
 
-[data-tutor-theme='light'][data-tutor-vision='deuteranopia'] {
+@mixin deuteranopia-light-tokens {
   // SURFACE COLORS
   --tutor-surface-warning: #{$tutor-warning-50};
   --tutor-surface-warning-hover: #{$tutor-warning-100};
@@ -84,7 +84,7 @@
 // DARK — overrides specific to the dark base theme
 // =============================================================================
 
-[data-tutor-theme='dark'][data-tutor-vision='deuteranopia'] {
+@mixin deuteranopia-dark-tokens {
   // SURFACE COLORS
   --tutor-surface-warning: #{$tutor-gray-750};
   --tutor-surface-warning-hover: #{$tutor-warning-900};
@@ -113,3 +113,18 @@
   --tutor-actions-critical-secondary: #{$tutor-gray-700};
   --tutor-actions-caution: #{$tutor-yellow-500};
 }
+
+[data-tutor-theme='light'][data-tutor-vision='deuteranopia'],
+[data-tutor-theme='system'][data-tutor-vision='deuteranopia'] {
+  @include deuteranopia-light-tokens;
+}
+
+[data-tutor-theme='dark'][data-tutor-vision='deuteranopia'] {
+  @include deuteranopia-dark-tokens;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-tutor-theme='system'][data-tutor-vision='deuteranopia'] {
+    @include deuteranopia-dark-tokens;
+  }
+}

assets/core/scss/themes/_high-contrast.scss

@@ -9,7 +9,7 @@
 // LIGHT — overrides specific to the light base theme
 // =============================================================================
 
-[data-tutor-theme='light'][data-tutor-contrast='high'] {
+@mixin high-contrast-light-tokens {
   // TEXT COLORS
   --tutor-text-primary: #{$tutor-gray-950};
   --tutor-text-secondary: #{$tutor-gray-950};
@@ -36,7 +36,7 @@
 // DARK — overrides specific to the dark base theme
 // =============================================================================
 
-[data-tutor-theme='dark'][data-tutor-contrast='high'] {
+@mixin high-contrast-dark-tokens {
   // TEXT COLORS
   --tutor-text-primary: #{$tutor-gray-100};
   --tutor-text-secondary: #{$tutor-gray-50};
@@ -58,3 +58,18 @@
   --tutor-border-brand-secondary: #{$tutor-brand-800};
   --tutor-border-brand-tertiary: #{$tutor-brand-700};
 }
+
+[data-tutor-theme='light'][data-tutor-contrast='high'],
+[data-tutor-theme='system'][data-tutor-contrast='high'] {
+  @include high-contrast-light-tokens;
+}
+
+[data-tutor-theme='dark'][data-tutor-contrast='high'] {
+  @include high-contrast-dark-tokens;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-tutor-theme='system'][data-tutor-contrast='high'] {
+    @include high-contrast-dark-tokens;
+  }
+}

assets/core/scss/themes/_protanopia.scss

@@ -61,7 +61,7 @@
 // LIGHT — overrides specific to the light base theme
 // =============================================================================
 
-[data-tutor-theme='light'][data-tutor-vision='protanopia'] {
+@mixin protanopia-light-tokens {
   // SURFACE COLORS
   --tutor-surface-success: #{$tutor-cyan-50};
   --tutor-surface-critical: #{$tutor-orange-100};
@@ -80,7 +80,7 @@
 // DARK — overrides specific to the dark base theme
 // =============================================================================
 
-[data-tutor-theme='dark'][data-tutor-vision='protanopia'] {
+@mixin protanopia-dark-tokens {
   // SURFACE COLORS
   --tutor-surface-success: #{$tutor-cyan-900};
   --tutor-surface-critical: #{$tutor-orange-900};
@@ -92,3 +92,18 @@
   --tutor-actions-success-exception: #{$tutor-cyan-950};
   --tutor-actions-warning-exception: #{$tutor-orange-50};
 }
+
+[data-tutor-theme='light'][data-tutor-vision='protanopia'],
+[data-tutor-theme='system'][data-tutor-vision='protanopia'] {
+  @include protanopia-light-tokens;
+}
+
+[data-tutor-theme='dark'][data-tutor-vision='protanopia'] {
+  @include protanopia-dark-tokens;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-tutor-theme='system'][data-tutor-vision='protanopia'] {
+    @include protanopia-dark-tokens;
+  }
+}