From dad356f052b52365a9acf0f81e6e50abf2deda8f Mon Sep 17 00:00:00 2001 From: Sazedul Haque Date: Fri, 8 May 2026 17:15:35 +0600 Subject: [PATCH 1/2] Auto dark theme not working fixed --- classes/UserPreference.php | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/classes/UserPreference.php b/classes/UserPreference.php index 2672bcc347..8ac2d69325 100644 --- a/classes/UserPreference.php +++ b/classes/UserPreference.php @@ -257,9 +257,6 @@ public function add_theme_attribute( $output ) { $vision = self::VISION_NORMAL; } - // Resolve actual theme for 'system' (PHP fallback is light; JS applies real system preference). - $resolved_theme = self::THEME_SYSTEM === $theme ? self::THEME_LIGHT : $theme; - $contrast = isset( $prefs['contrast'] ) ? (string) $prefs['contrast'] : ''; $contrast_attr = ''; if ( self::CONTRAST_HIGH === $contrast ) { @@ -282,7 +279,7 @@ public function add_theme_attribute( $output ) { ? ' data-tutor-vision="' . esc_attr( $vision ) . '"' : ''; - return $output . ' data-tutor-theme="' . esc_attr( $resolved_theme ) . '"' . $vision_attr . $contrast_attr . $motion_effects_attr; + return $output . ' data-tutor-theme="' . esc_attr( $theme ) . '"' . $vision_attr . $contrast_attr . $motion_effects_attr; } /** @@ -587,7 +584,7 @@ public static function get_theme_options() { 'value' => self::THEME_DARK, ), array( - 'label' => __( 'System Default', 'tutor' ), + 'label' => __( 'Auto (System Default)', 'tutor' ), 'value' => self::THEME_SYSTEM, ), ); @@ -650,10 +647,6 @@ public static function get_learning_mood_options() { */ public static function get_motion_effects_options() { return array( - array( - 'label' => __( 'Auto (System Default)', 'tutor' ), - 'value' => self::MOTION_EFFECTS_AUTO, - ), array( 'label' => __( 'Reduced Motion', 'tutor' ), 'value' => self::MOTION_EFFECTS_REDUCE, @@ -662,6 +655,10 @@ public static function get_motion_effects_options() { 'label' => __( 'Standard Motion', 'tutor' ), 'value' => self::MOTION_EFFECTS_STANDARD, ), + array( + 'label' => __( 'Auto (System Default)', 'tutor' ), + 'value' => self::MOTION_EFFECTS_AUTO, + ), ); } From fcb247abce5ba2f943c774725dca6fe1927bd8b1 Mon Sep 17 00:00:00 2001 From: Sazedul Haque Date: Fri, 8 May 2026 17:16:17 +0600 Subject: [PATCH 2/2] Dark theme flicker issue fixed --- assets/core/scss/themes/_dark.scss | 16 +++++++++++++++- assets/core/scss/themes/_deuteranomaly.scss | 19 +++++++++++++++++-- assets/core/scss/themes/_deuteranopia.scss | 19 +++++++++++++++++-- assets/core/scss/themes/_high-contrast.scss | 19 +++++++++++++++++-- assets/core/scss/themes/_protanopia.scss | 19 +++++++++++++++++-- 5 files changed, 83 insertions(+), 9 deletions(-) diff --git a/assets/core/scss/themes/_dark.scss b/assets/core/scss/themes/_dark.scss index 16d1146e1a..3276d0d914 100644 --- a/assets/core/scss/themes/_dark.scss +++ b/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; + } +} diff --git a/assets/core/scss/themes/_deuteranomaly.scss b/assets/core/scss/themes/_deuteranomaly.scss index 0583f4131f..97c424d731 100644 --- a/assets/core/scss/themes/_deuteranomaly.scss +++ b/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; + } +} diff --git a/assets/core/scss/themes/_deuteranopia.scss b/assets/core/scss/themes/_deuteranopia.scss index 4f34812ab8..945c6928b5 100644 --- a/assets/core/scss/themes/_deuteranopia.scss +++ b/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; + } +} diff --git a/assets/core/scss/themes/_high-contrast.scss b/assets/core/scss/themes/_high-contrast.scss index 7c3d0a883e..da1f200606 100644 --- a/assets/core/scss/themes/_high-contrast.scss +++ b/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; + } +} diff --git a/assets/core/scss/themes/_protanopia.scss b/assets/core/scss/themes/_protanopia.scss index 441ed395a2..233ce8a937 100644 --- a/assets/core/scss/themes/_protanopia.scss +++ b/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; + } +}