How to write styles for dark mode in Discourse using the built-in dark/light theme switcher? I don't see any .dark styles.

Support
1

使用discourse 内置的深浅主题切换，在discourse中如何写dark下的样式,目前没有看到.dark样式

1 Like
2

I’m not sure this is what you mean but there is a mixin you can use in your css that allows 2 variables, and will choose based on what mode is active.

Example:

 color: light-dark(#ffffff, #000000);

Other than that, there are also the pre-made colour palettes in your about.json file

Example from air theme:

  "color_schemes": {
    "air-light": {
      "primary": "1c1c1c",
      "secondary": "f9fcff",
      "tertiary": "3877e5",
      "quaternary": "7e8b93",
      "header_background": "f9fcff",
      "header_primary": "122b43",
      "highlight": "e6cb37",
      "danger": "d05454",
      "success": "71bd9f",
      "love": "c16ad7",
      "selected": "e1ebfb"
    },
    "air-dark": {
      "primary": "e0e0e0",
      "secondary": "2d2d2d",
      "tertiary": "9a5cfd",
      "quaternary": "71bd9f",
      "header_background": "202020",
      "header_primary": "e0e0e0",
      "highlight": "9a5cfd",
      "danger": "d05454",
      "success": "71bd9f",
      "love": "c16ad7",
      "selected": "2f0177",
      "hover": "535353"
    }
  },
2 Likes
3

yes, using the mixin in my css that allows 2 variables can solve the problem, thanks.

2 Likes