Skip to content

Auto dark theme not working and dark theme flicker issues fixed #2682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sazedul-haque merged 2 commits into from
May 11, 2026
Merged

Auto dark theme not working and dark theme flicker issues fixed #2682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dad356f
Auto dark theme not working fixed
sazedul-haque May 8, 2026
fcb247a
Dark theme flicker issue fixed
sazedul-haque May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion assets/core/scss/themes/_dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@

@use '../tokens' as *;

[data-tutor-theme='dark'] {
// Mixin containing all dark theme tokens
@mixin dark-theme-tokens {
// =============================================================================
// SURFACE COLORS
// =============================================================================
Expand Down Expand Up @@ -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;
}
}
19 changes: 17 additions & 2 deletions assets/core/scss/themes/_deuteranomaly.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down Expand Up @@ -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};
Expand Down Expand Up @@ -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;
}
}
19 changes: 17 additions & 2 deletions assets/core/scss/themes/_deuteranopia.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down Expand Up @@ -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};
Expand Down Expand Up @@ -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;
}
}
19 changes: 17 additions & 2 deletions assets/core/scss/themes/_high-contrast.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand All @@ -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};
Expand All @@ -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;
}
}
19 changes: 17 additions & 2 deletions assets/core/scss/themes/_protanopia.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand All @@ -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};
Expand All @@ -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;
}
}
15 changes: 6 additions & 9 deletions classes/UserPreference.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand All @@ -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;
}

/**
Expand Down Expand Up @@ -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,
),
);
Expand Down Expand Up @@ -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,
Expand All @@ -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,
),
);
}

Expand Down
Loading