My MkDocs page build on Jenkins Pipeline starts default in Dark Mode

[ni-dschiller]

My MkDocs page build on Jenkins Pipeline starts default in Dark Mode how can i influence which Mode the default one is ?

Here is the Yaml file I use:

mkdocs.yml

site_name: mysite

theme:
  name: material  # default: material, mkdocs, readthedocs
  custom_dir: overrides
  features:
    - content.code.annotate
    - navigation.instant
    - navigation.tracking
    # - navigation.tabs
    # - navigation.tabs.sticky
    - navigation.sections
    # - navigation.expand
    # - navigation.indexes
    - toc.integrate
    - navigation.top
    - search.highlight
    - search.share
    # - header.autohide
  palette:  # Is overwriten by the next `palette` expressions
    primary: teal  # yellow, default: indigo
  palette: 
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: teal
      toggle:
        icon: material/weather-night
        name: Switch to light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: teal
      toggle:
        icon: material/weather-sunny
        name: Switch to dark mode
  font:
    text: Roboto
    code: Robot Mono
  language: en
  icon:
    logo: material/robot-outline
  # favicon: images/favicon.png

extra:
#   alternate:
#     - name: English
#       link: /en/ 
#       lang: en
#     - name: Deutsch
#       link: /de/
#       lang: de
#   version:
#     provider: mike
  social:
    - icon: fontawesome/brands/slack
      link: https://myslack
      name: Me on Slack
    - icon: fontawesome/solid/paper-plane
      link: mailto:[email protected]
      name: Send Feedback
  generator: true  # Remove `Made with Material for MkDocs` if `false`

extra_css:
  - stylesheets/extra.css

copyright: Copyright © 2022 Company

extra_javascript:
  
  # Sortable tables
  - https://unpkg.com/[email protected]/dist/tablesort.min.js
  - javascripts/tablesort.js

  # MathJax
  - javascripts/mathjax.js
  - https://polyfill.io/v3/polyfill.min.js?features=es6
  - https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

plugins:
  - search
  - tags:
      tags_file: indices/tags.md
  - mkdocstrings:
      default_handler: python
      # watch:
        # - src/metrics
      handlers:
        python:
          setup_commands:
            - import sys
            - sys.path.append("src")

markdown_extensions:
  
  # Metadata
  - meta
  
  # Abbreviations
  - abbr
  - pymdownx.snippets

  # Admonitions
  - admonition
  - pymdownx.details
  - pymdownx.superfences

  # Annotations - Insider only currently - April 2022
  - attr_list
  - md_in_html
  - pymdownx.superfences

  # Buttons
  - attr_list

  # Code blocks
  - pymdownx.highlight:
      anchor_linenums: true
  - pymdownx.inlinehilite
  - pymdownx.snippets
  - pymdownx.superfences

  # Content tabs
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true 

  # Data tables
  - tables

  # Diagrams
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

  # Formatting
  - pymdownx.critic
  - pymdownx.caret
  - pymdownx.keys
  - pymdownx.mark
  - pymdownx.tilde

  # Grids - Insider only currently - April 2022
  - attr_list
  - md_in_html

  # Lists
  - def_list
  - pymdownx.tasklist:
      custom_checkbox: true
  
  # MathJax
  - pymdownx.arithmatex:
      generic: true

  # Icons, Emojis
  - attr_list
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg

[squidfunk]

Please see https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#system-preference

When the user first visits your site, the media queries are evaluated in the order of their definition. The first media query that matches selects the default color palette.

[ni-dschiller]

I switched the statements and it still starts as Dark mode.

mkdocs.yml

  palette:
    - media: "(prefers-color-scheme: light)"
      scheme: default
      primary: teal
      toggle:
        icon: material/weather-sunny
        name: Switch to dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate
      primary: teal
      toggle:
        icon: material/weather-night
        name: Switch to light mode

[squidfunk]

Did you clear localstorage? After the mode was determine, it is persisted, so it's selected the next time a user visits the site:

[ni-dschiller]

If I do this and refresh the page it still uses slate instead of default:

[squidfunk]

Okay, I guess this was a misunderstanding then. This is desired behavior because you specified media queries and your system preference is "dark mode". Thus, "(prefers-color-scheme: dark)" evaluates to true, choosing slate as a preferred color palette. In fact, this is the actual idea of the media attribute - to match the user's system preference. If you don't wish to do that, just remove the media properties on both color palettes.

[ni-dschiller]

🙏