Can I use two different CSS for light and dark mode? #7515

rturrado · 2024-09-11T10:02:58Z

rturrado
Sep 11, 2024

Hi,

I have this mkdocs-base.yml:

site_name: libQASM
site_dir: public
repo_url: https://github.com/QuTech-Delft/libqasm
use_directory_urls: false

nav:
  - Home: index.md
  - User Guide:
    - User Guide: user-guide/user-guide.md
    - C++: user-guide/cpp.md
    - Docker: user-guide/docker.md
    - Emscripten: user-guide/emscripten.md
    - Python: user-guide/python.md
  - Developer Guide:
    - Dev Guide: dev-guide/dev-guide.md
    - C++: dev-guide/cpp.md
    - Emscripten: dev-guide/emscripten.md
    - Python: dev-guide/python.md
  - API:
    - C++: api/cpp.md
    - Emscripten: api/emscripten.md
    - Python: api/python.md
  - About:
    - Release Notes: about/release-notes.md
    - Contributing: about/contributing.md
    - License: about/license.md
    - Authors: about/authors.md

theme:
  name: material
  features:
    - navigation.tabs
    - navigation.top
    - toc.integrate

markdown_extensions:
  - admonition
  - pymdownx.inlinehilite
  - pymdownx.snippets

extra_css:
  - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/default.min.css
  - libqasm.css

extra_javascript:
  - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js
  - cpp_highlighting.js
  - python_highlighting.js
  - typescript_highlighting.js

plugins:
  - search
  - mkdocstrings:
      default_handler: python

watch:
  - mkdocs-base.yml

And I was testing the light and dark mode palette, i.e., adding this to the theme section:

  palette:
    # Palette toggle for automatic mode
    - media: "(prefers-color-scheme)"
      toggle:
        icon: material/brightness-auto
        name: Switch to light mode
    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode
    # Palette toggle for dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to system preference

But I don't like the syntax highlighting when I use the dark mode.

What I would really like is to be able to:

continue using https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/default.min.css for light mode, and
use something like https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/base16/zenburn.min.css for dark mode.

Is that possible?

Many thanks!

Answered by kamilkrzyskow

Sep 12, 2024

Hello @rturrado,
you could technically modify what CSS is loaded using JavaScript, but I think the better way would be to just create your own extra-highlight.css file that combines both:

and then add the attribute selector before your dark mode styles (yes, before every applicable selector):

View full answer

kamilkrzyskow · 2024-09-12T14:04:28Z

kamilkrzyskow
Sep 12, 2024
Collaborator

Hello @rturrado,
you could technically modify what CSS is loaded using JavaScript, but I think the better way would be to just create your own extra-highlight.css file that combines both:

and then add the attribute selector before your dark mode styles (yes, before every applicable selector):

.hljs {
  color: #dcdccc;
  background: #383838
}
/* ---> */
[data-md-color-scheme="slate"] .hljs {
  color: #dcdccc;
  background: #383838
}

6 replies

rturrado Sep 13, 2024
Author

I've tried the suggestion but, when I change to dark mode, I do not see the colors being displayed in Zenburn theme.

I have basically pasted the Zenburn them after the Default theme.
Then, for Zenburn, I prefixed every .hljs with [data-md-color-scheme="slate"].

Possible issues:

Some lines contain 2 .hljs, e.g., [data-md-color-scheme="slate"].hljs-meta.hljs-keyword. I've tried prefixing both.
There are these 2 sections pre code.hljs and code.hljs which appear right before and after the block of comments. I've tried prefixing those 2 too.
I've left the two block of /*! */ comments, one pointing to Default, one to Zenburn.

This is my extra_hightlight.css:

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}
code.hljs {
    padding: 3px 5px
}
pre [data-md-color-scheme="slate"].code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}
[data-md-color-scheme="slate"].code.hljs {
    padding: 3px 5px
}
/*!
  Theme: Default
  Description: Original highlight.js style
  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
  Maintainer: @highlightjs/core-team
  Website: https://highlightjs.org/
  License: see project LICENSE
  Touched: 2021
*/
/*
This is left on purpose making default.css the single file that can be lifted
as-is from the repository directly without the need for a build step

Typically this "required" baseline CSS is added by `makestuff.js` during build.
*/
pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}
code.hljs {
    padding: 3px 5px
}
/* end baseline CSS */
.hljs {
    background: #F3F3F3;
    color: #444
}
/* Base color: saturation 0; */
.hljs-subst {
    /* default */

}
/* purposely ignored */
.hljs-formula,
.hljs-attr,
.hljs-property,
.hljs-params {

}
.hljs-comment {
    color: #697070
}
.hljs-tag,
.hljs-punctuation {
    color: #444a
}
.hljs-tag .hljs-name,
.hljs-tag .hljs-attr {
    color: #444
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta .hljs-keyword,
.hljs-doctag,
.hljs-name {
    font-weight: bold
}
/* User color: hue: 0 */
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
    color: #880000
}
.hljs-title,
.hljs-section {
    color: #880000;
    font-weight: bold
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-operator,
.hljs-selector-pseudo {
    color: #ab5656
}
/* Language color: hue: 90; */
.hljs-literal {
    color: #695
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
    color: #397300
}
/* Meta color: hue: 200 */
.hljs-meta {
    color: #1f7199
}
.hljs-meta .hljs-string {
    color: #38a
}
/* Misc effects */
.hljs-emphasis {
    font-style: italic
}
.hljs-strong {
    font-weight: bold
}
/*!
  Theme: Zenburn
  Author: elnawe
  License: ~ MIT (or more permissive) [via base16-schemes-source]
  Maintainer: @highlightjs/core-team
  Version: 2021.09.0
*/
/*
  WARNING: DO NOT EDIT THIS FILE DIRECTLY.

  This theme file was auto-generated from the Base16 scheme zenburn
  by the Highlight.js Base16 template builder.

  - https://github.com/highlightjs/base16-highlightjs
*/
/*
base00  #383838  Default Background
base01  #404040  Lighter Background (Used for status bars, line number and folding marks)
base02  #606060  Selection Background
base03  #6f6f6f  Comments, Invisibles, Line Highlighting
base04  #808080  Dark Foreground (Used for status bars)
base05  #dcdccc  Default Foreground, Caret, Delimiters, Operators
base06  #c0c0c0  Light Foreground (Not often used)
base07  #ffffff  Light Background (Not often used)
base08  #dca3a3  Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
base09  #dfaf8f  Integers, Boolean, Constants, XML Attributes, Markup Link Url
base0A  #e0cf9f  Classes, Markup Bold, Search Text Background
base0B  #5f7f5f  Strings, Inherited Class, Markup Code, Diff Inserted
base0C  #93e0e3  Support, Regular Expressions, Escape Characters, Markup Quotes
base0D  #7cb8bb  Functions, Methods, Attribute IDs, Headings
base0E  #dc8cc3  Keywords, Storage, Selector, Markup Italic, Diff Changed
base0F  #000000  Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
*/
pre [data-md-color-scheme="slate"].code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}
[data-md-color-scheme="slate"].code.hljs {
    padding: 3px 5px
}
[data-md-color-scheme="slate"].hljs {
    color: #dcdccc;
    background: #383838
}
[data-md-color-scheme="slate"].hljs::selection,
[data-md-color-scheme="slate"].hljs::selection {
    background-color: #606060;
    color: #dcdccc
}
/* purposely do not highlight these things */
[data-md-color-scheme="slate"].hljs-formula,
[data-md-color-scheme="slate"].hljs-params,
[data-md-color-scheme="slate"].hljs-property {

}
/* base03 - #6f6f6f -  Comments, Invisibles, Line Highlighting */
[data-md-color-scheme="slate"].hljs-comment {
    color: #6f6f6f
}
/* base04 - #808080 -  Dark Foreground (Used for status bars) */
[data-md-color-scheme="slate"].hljs-tag {
    color: #808080
}
/* base05 - #dcdccc -  Default Foreground, Caret, Delimiters, Operators */
[data-md-color-scheme="slate"].hljs-subst,
[data-md-color-scheme="slate"].hljs-punctuation,
[data-md-color-scheme="slate"].hljs-operator {
    color: #dcdccc
}
[data-md-color-scheme="slate"].hljs-operator {
    opacity: 0.7
}
/* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
[data-md-color-scheme="slate"].hljs-bullet,
[data-md-color-scheme="slate"].hljs-variable,
[data-md-color-scheme="slate"].hljs-template-variable,
[data-md-color-scheme="slate"].hljs-selector-tag,
[data-md-color-scheme="slate"].hljs-name,
[data-md-color-scheme="slate"].hljs-deletion {
    color: #dca3a3
}
/* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
[data-md-color-scheme="slate"].hljs-symbol,
[data-md-color-scheme="slate"].hljs-number,
[data-md-color-scheme="slate"].hljs-link,
[data-md-color-scheme="slate"].hljs-attr,
[data-md-color-scheme="slate"].hljs-variable.constant_,
[data-md-color-scheme="slate"].hljs-literal {
    color: #dfaf8f
}
/* base0A - Classes, Markup Bold, Search Text Background */
[data-md-color-scheme="slate"].hljs-title,
[data-md-color-scheme="slate"].hljs-class.hljs-title,
[data-md-color-scheme="slate"].hljs-title.class_ {
    color: #e0cf9f
}
[data-md-color-scheme="slate"].hljs-strong {
    font-weight: bold;
    color: #e0cf9f
}
/* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
[data-md-color-scheme="slate"].hljs-code,
[data-md-color-scheme="slate"].hljs-addition,
[data-md-color-scheme="slate"].hljs-title.class_.inherited__,
[data-md-color-scheme="slate"].hljs-string {
    color: #5f7f5f
}
/* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
/* guessing */
[data-md-color-scheme="slate"].hljs-built_in,
[data-md-color-scheme="slate"].hljs-doctag,
[data-md-color-scheme="slate"].hljs-quote,
[data-md-color-scheme="slate"].hljs-keyword.hljs-atrule,
[data-md-color-scheme="slate"].hljs-regexp {
    color: #93e0e3
}
/* base0D - Functions, Methods, Attribute IDs, Headings */
[data-md-color-scheme="slate"].hljs-function.hljs-title,
[data-md-color-scheme="slate"].hljs-attribute,
.ruby [data-md-color-scheme="slate"].hljs-property,
[data-md-color-scheme="slate"].hljs-title.function_,
[data-md-color-scheme="slate"].hljs-section {
    color: #7cb8bb
}
/* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
/* [data-md-color-scheme="slate"].hljs-selector-id, */
/* [data-md-color-scheme="slate"].hljs-selector-class, */
/* [data-md-color-scheme="slate"].hljs-selector-attr, */
/* [data-md-color-scheme="slate"].hljs-selector-pseudo, */
[data-md-color-scheme="slate"].hljs-type,
[data-md-color-scheme="slate"].hljs-template-tag,
.diff [data-md-color-scheme="slate"].hljs-meta,
[data-md-color-scheme="slate"].hljs-keyword {
    color: #dc8cc3
}
[data-md-color-scheme="slate"].hljs-emphasis {
    color: #dc8cc3;
    font-style: italic
}
/* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
/*
  prevent top level .keyword and .string scopes
  from leaking into meta by accident
*/
[data-md-color-scheme="slate"].hljs-meta,
[data-md-color-scheme="slate"].hljs-meta.hljs-keyword,
[data-md-color-scheme="slate"].hljs-meta.hljs-string {
    color: #000000
}
/* for v10 compatible themes */
[data-md-color-scheme="slate"].hljs-meta.hljs-keyword,
[data-md-color-scheme="slate"].hljs-meta-keyword {
    font-weight: bold
}

And this is the new mkdocs-base.yml that uses extra_highlight.css:

site_name: libQASM
site_dir: public
repo_url: https://github.com/QuTech-Delft/libqasm
use_directory_urls: false

nav:
  - Home: index.md
  - User Guide:
    - User Guide: user-guide/user-guide.md
    - C++: user-guide/cpp.md
    - Docker: user-guide/docker.md
    - Emscripten: user-guide/emscripten.md
    - Python: user-guide/python.md
  - Developer Guide:
    - Dev Guide: dev-guide/dev-guide.md
    - C++: dev-guide/cpp.md
    - Emscripten: dev-guide/emscripten.md
    - Python: dev-guide/python.md
  - API:
    - C++: api/cpp.md
    - Emscripten: api/emscripten.md
    - Python: api/python.md
  - About:
    - Release Notes: about/release-notes.md
    - Contributing: about/contributing.md
    - License: about/license.md
    - Authors: about/authors.md

theme:
  name: material
  features:
    - navigation.tabs
    - navigation.top
    - toc.integrate
  palette:
    # Palette toggle for automatic mode
    - media: "(prefers-color-scheme)"
      toggle:
        icon: material/brightness-auto
        name: Switch to light mode
    # Palette toggle for light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode
    # Palette toggle for dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to system preference

markdown_extensions:
  - admonition
  - pymdownx.inlinehilite
  - pymdownx.snippets

extra_css:
  - extra_api.css
  - extra_highlight.css

extra_javascript:
  - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js
  - cpp_highlight.js
  - python_highlight.js
  - typescript_highlight.js

plugins:
  - search
  - mkdocstrings:
      default_handler: python

watch:
  - mkdocs-base.yml

kamilkrzyskow Sep 13, 2024
Collaborator

Hmm, I guess the issue is that you didn't put the space between the values [data-md-color-scheme="slate"].hljs-meta -> [data-md-color-scheme="slate"] .hljs-meta.

EDIT: If that's not it, then please prepare a minimal reproduction, either using the guide https://squidfunk.github.io/mkdocs-material/guides/creating-a-reproduction/ or as this is mostly related to CSS, just provide a simple archive with the required files.

rturrado Sep 13, 2024
Author

Wow, this is so beautiful, thanks so much!

Indeed, the problem was with the spaces. Also, in code like code.hljs, the attribute selector has to go in the middle, e.g., code [data-md-color-scheme="slate"] .hljs.

This is the final version of the file that seems to be working:

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}
code.hljs {
    padding: 3px 5px
}
pre code [data-md-color-scheme="slate"] .hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}
code [data-md-color-scheme="slate"] .hljs {
    padding: 3px 5px
}
/*!
  Theme: Default
  Description: Original highlight.js style
  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
  Maintainer: @highlightjs/core-team
  Website: https://highlightjs.org/
  License: see project LICENSE
  Touched: 2021
*/
/*
This is left on purpose making default.css the single file that can be lifted
as-is from the repository directly without the need for a build step

Typically this "required" baseline CSS is added by `makestuff.js` during build.
*/
pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}
code.hljs {
    padding: 3px 5px
}
/* end baseline CSS */
.hljs {
    background: #F3F3F3;
    color: #444
}
/* Base color: saturation 0; */
.hljs-subst {
    /* default */

}
/* purposely ignored */
.hljs-formula,
.hljs-attr,
.hljs-property,
.hljs-params {

}
.hljs-comment {
    color: #697070
}
.hljs-tag,
.hljs-punctuation {
    color: #444a
}
.hljs-tag .hljs-name,
.hljs-tag .hljs-attr {
    color: #444
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta .hljs-keyword,
.hljs-doctag,
.hljs-name {
    font-weight: bold
}
/* User color: hue: 0 */
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion {
    color: #880000
}
.hljs-title,
.hljs-section {
    color: #880000;
    font-weight: bold
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-operator,
.hljs-selector-pseudo {
    color: #ab5656
}
/* Language color: hue: 90; */
.hljs-literal {
    color: #695
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition {
    color: #397300
}
/* Meta color: hue: 200 */
.hljs-meta {
    color: #1f7199
}
.hljs-meta .hljs-string {
    color: #38a
}
/* Misc effects */
.hljs-emphasis {
    font-style: italic
}
.hljs-strong {
    font-weight: bold
}
/*!
  Theme: Zenburn
  Author: elnawe
  License: ~ MIT (or more permissive) [via base16-schemes-source]
  Maintainer: @highlightjs/core-team
  Version: 2021.09.0
*/
/*
  WARNING: DO NOT EDIT THIS FILE DIRECTLY.

  This theme file was auto-generated from the Base16 scheme zenburn
  by the Highlight.js Base16 template builder.

  - https://github.com/highlightjs/base16-highlightjs
*/
/*
base00  #383838  Default Background
base01  #404040  Lighter Background (Used for status bars, line number and folding marks)
base02  #606060  Selection Background
base03  #6f6f6f  Comments, Invisibles, Line Highlighting
base04  #808080  Dark Foreground (Used for status bars)
base05  #dcdccc  Default Foreground, Caret, Delimiters, Operators
base06  #c0c0c0  Light Foreground (Not often used)
base07  #ffffff  Light Background (Not often used)
base08  #dca3a3  Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
base09  #dfaf8f  Integers, Boolean, Constants, XML Attributes, Markup Link Url
base0A  #e0cf9f  Classes, Markup Bold, Search Text Background
base0B  #5f7f5f  Strings, Inherited Class, Markup Code, Diff Inserted
base0C  #93e0e3  Support, Regular Expressions, Escape Characters, Markup Quotes
base0D  #7cb8bb  Functions, Methods, Attribute IDs, Headings
base0E  #dc8cc3  Keywords, Storage, Selector, Markup Italic, Diff Changed
base0F  #000000  Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
*/
pre code [data-md-color-scheme="slate"] .hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}
code [data-md-color-scheme="slate"] .hljs {
    padding: 3px 5px
}
[data-md-color-scheme="slate"] .hljs::selection,
[data-md-color-scheme="slate"] .hljs::selection {
    background-color: #606060;
    color: #dcdccc
}
/* purposely do not highlight these things */
[data-md-color-scheme="slate"] .hljs-formula,
[data-md-color-scheme="slate"] .hljs-params,
[data-md-color-scheme="slate"] .hljs-property {

}
/* base03 - #6f6f6f -  Comments, Invisibles, Line Highlighting */
[data-md-color-scheme="slate"] .hljs-comment {
    color: #6f6f6f
}
/* base04 - #808080 -  Dark Foreground (Used for status bars) */
[data-md-color-scheme="slate"] .hljs-tag {
    color: #808080
}
/* base05 - #dcdccc -  Default Foreground, Caret, Delimiters, Operators */
[data-md-color-scheme="slate"] .hljs-subst,
[data-md-color-scheme="slate"] .hljs-punctuation,
[data-md-color-scheme="slate"] .hljs-operator {
    color: #dcdccc
}
[data-md-color-scheme="slate"] .hljs-operator {
    opacity: 0.7
}
/* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
[data-md-color-scheme="slate"] .hljs-bullet,
[data-md-color-scheme="slate"] .hljs-variable,
[data-md-color-scheme="slate"] .hljs-template-variable,
[data-md-color-scheme="slate"] .hljs-selector-tag,
[data-md-color-scheme="slate"] .hljs-name,
[data-md-color-scheme="slate"] .hljs-deletion {
    color: #dca3a3
}
/* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
[data-md-color-scheme="slate"] .hljs-symbol,
[data-md-color-scheme="slate"] .hljs-number,
[data-md-color-scheme="slate"] .hljs-link,
[data-md-color-scheme="slate"] .hljs-attr,
[data-md-color-scheme="slate"] .hljs-variable.constant_,
[data-md-color-scheme="slate"] .hljs-literal {
    color: #dfaf8f
}
/* base0A - Classes, Markup Bold, Search Text Background */
[data-md-color-scheme="slate"] .hljs-title,
[data-md-color-scheme="slate"] .hljs-class [data-md-color-scheme="slate"] .hljs-title,
[data-md-color-scheme="slate"] .hljs-title.class_ {
    color: #e0cf9f
}
[data-md-color-scheme="slate"] .hljs-strong {
    font-weight: bold;
    color: #e0cf9f
}
/* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
[data-md-color-scheme="slate"] .hljs-code,
[data-md-color-scheme="slate"] .hljs-addition,
[data-md-color-scheme="slate"] .hljs-title.class_.inherited__,
[data-md-color-scheme="slate"] .hljs-string {
    color: #5f7f5f
}
/* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
/* guessing */
[data-md-color-scheme="slate"] .hljs-built_in,
[data-md-color-scheme="slate"] .hljs-doctag,
[data-md-color-scheme="slate"] .hljs-quote,
[data-md-color-scheme="slate"] .hljs-keyword.hljs-atrule,
[data-md-color-scheme="slate"] .hljs-regexp {
    color: #93e0e3
}
/* base0D - Functions, Methods, Attribute IDs, Headings */
[data-md-color-scheme="slate"] .hljs-function.hljs-title,
[data-md-color-scheme="slate"] .hljs-attribute,
.ruby [data-md-color-scheme="slate"] .hljs-property,
[data-md-color-scheme="slate"] .hljs-title.function_,
[data-md-color-scheme="slate"] .hljs-section {
    color: #7cb8bb
}
/* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
/* [data-md-color-scheme="slate"] .hljs-selector-id, */
/* [data-md-color-scheme="slate"] .hljs-selector-class, */
/* [data-md-color-scheme="slate"] .hljs-selector-attr, */
/* [data-md-color-scheme="slate"] .hljs-selector-pseudo, */
[data-md-color-scheme="slate"] .hljs-type,
[data-md-color-scheme="slate"] .hljs-template-tag,
.diff [data-md-color-scheme="slate"] .hljs-meta,
[data-md-color-scheme="slate"] .hljs-keyword {
    color: #dc8cc3
}
[data-md-color-scheme="slate"] .hljs-emphasis {
    color: #dc8cc3;
    font-style: italic
}
/* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
/*
  prevent top level .keyword and .string scopes
  from leaking into meta by accident
*/
[data-md-color-scheme="slate"] .hljs-meta,
[data-md-color-scheme="slate"] .hljs-meta [data-md-color-scheme="slate"] .hljs-keyword,
[data-md-color-scheme="slate"] .hljs-meta [data-md-color-scheme="slate"] .hljs-string {
    color: #000000
}
/* for v10 compatible themes */
[data-md-color-scheme="slate"] .hljs-meta [data-md-color-scheme="slate"] .hljs-keyword,
[data-md-color-scheme="slate"] .hljs-meta-keyword {
    font-weight: bold
}

kamilkrzyskow Sep 13, 2024
Collaborator

the attribute selector has to go in the middle

Weird, as the attribute is set only for the <body> HTML tag, so every other element should be a child of it.
The selectors define the chain of lookup, so I don't really understand the need for putting it in the middle.

I forgot to mention that all repeated styles, for example for positioning do not need to be duplicated.

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

this is enough to handle both the default and slate variants.

rturrado Sep 16, 2024
Author

Thanks @kamilkrzyskow! I'll remove those duplicates from the code.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can I use two different CSS for light and dark mode? #7515

{{title}}

Replies: 1 comment 6 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Can I use two different CSS for light and dark mode? #7515

rturrado Sep 11, 2024

Replies: 1 comment · 6 replies

kamilkrzyskow Sep 12, 2024 Collaborator

rturrado Sep 13, 2024 Author

kamilkrzyskow Sep 13, 2024 Collaborator

rturrado Sep 13, 2024 Author

kamilkrzyskow Sep 13, 2024 Collaborator

rturrado Sep 16, 2024 Author

rturrado
Sep 11, 2024

Replies: 1 comment 6 replies

kamilkrzyskow
Sep 12, 2024
Collaborator

rturrado Sep 13, 2024
Author

kamilkrzyskow Sep 13, 2024
Collaborator

rturrado Sep 13, 2024
Author

kamilkrzyskow Sep 13, 2024
Collaborator

rturrado Sep 16, 2024
Author