Skip to content

Code snippets use wrong palette in explicit light mode with dark system preference #1966

Open
@laymonage

Description

@laymonage

Bug

If you:

  • set the theme to light explicitly, i.e. the Sun icon is displayed and data-theme="light" is set on the <html>
  • have a "dark" color scheme preference set on your system

The code snippets use the wrong color palette:

Image

Example page: https://docs.djangoproject.com/en/5.1/topics/db/models/#inheritance-and-reverse-relations

Expected

The light color palette should be used:

Image

Cause

The _dark-pygments.scss styles set the dark color palette using a media query regardless of what the data-theme is set to:

@media (prefers-color-scheme: dark) {
:root {

The media query takes higher precedence than the default light theme. The selector should specifically check for :root[data-theme="auto"], so that the styles don't get applied when the media query matches but the theme isn't auto.

Metadata

Metadata

Assignees

Type

No type

Projects

Status

Todo

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions