There doesn’t seem to be any specific class currently.
I found this but it doesn’t work since the theme’s ID is the same for the dark and light mode (which is defined the color scheme, I guess).
I suppose a short script could help? And, maybe add this to Discourse’s core?
Would you mind explaining why you need specific classes added to the body for dark or light mode?
Does this core feature not allow what you are needing?
The staff of the forum I’m migrating doesn’t like a specific generated color variable (--tertiary-very-low) that makes this specific brownish color:
They would like to tweak it, and it seems I can’t really change it since there it’s generated AND is no parent-specific class for the dark mode.
However, I came across this information:
I don’t know if it’s valid, I couldn’t try it yet, too many things to do right now 
. But if it works, that will do. It would be even better, in fact.
We (sorry, I’ll say we as I’m with @Canapin doing the tweaks on our forum) made a dark theme using the preset called “Café crème” in the french version of Discourse (“coffee” I assume) and we just changed the color of the 
to red instead of brown.
The strange thing with this theme is that the hyperlinks are almost the same color as the text.
So when they are an embedded link, you can hardly see them:
So our idea was to make them a bit brown, so they would stand out. But when we tweak the quaternary setting in the color palette, a whole bunch of colors change along: the background of the “bubble” behind the DM changes to something closer to bird poop than the brown shown in @Canapin 's first message. The top message box changes too (“the outgoing mail has been disabled” box) to this same birdpoop color.
So the idea was first to use the css to color the hyperlinks but we didn’t find out how yet.
Using .cooked a as a css target should work for you to set a custom color for these links.
While our core system now allows the use of dark / light color scheme choices for their corresponding modes, you should also be able to use the css media query for dark/light modes like so:
@media (prefers-color-scheme: dark) {
.cooked a, .d-editor-preview a {
color: var(--primary-low-mid);
}
}
Did the work. Thank you!
Oops.
No, it didn’t work.
Please correct me if I’m wrong. prefers-color-scheme is based on the device’s preference, not the actual selected Discoure’s theme?
On my Windows device, I set a Dark theme. So websites that use my device’s preference will show, if possible, a dark theme.
But on my forum, I deliberately chose to use a light theme, not a dark one.
The media query prefers-color-scheme is still loaded despite I’m using a light theme:
Light theme, no dark mode,
Still, the rule for the dark theme is applied nevertheless:
Full screen:
Sorry I misunderstood you to mean, the system setting of dark mode, triggering dark mode on the forum.
So are you personally using the light color scheme, but your users are using the dark color scheme?
The previous screenshot showed the dark color scheme in action, but your recent reply states you are using the light color scheme.
Hi, sorry, yeah it’s not clear, especially since I was talking about two things of the same kind but on different color schemes. Also, it was a bit confusing for me.
So my question would be: On Discourse, how do I know which color scheme is used, regardless of the device’s dark/light mode preferences?
If I understand things right:
If my device (Windows 10) is set to Dark mode, but I select a Light color scheme in Discourse, the media query (prefers-color-scheme: dark) in my forum’s CSS will return some sort of “true” anyway and my nested rules will be applied, though I chose a Light color scheme on my forum (even if Windows is set to dark mode).
So: how do I know, in the HTML code of Discourse, if I’m currently using a Light or a Dark color scheme? I didn’t find any parent class like “light-color-scheme” or “dark-color-scheme”. So I can’t differentiate/target specific color schemes in CSS and create rules only for one or another.
Thanks for clarifying, I understand now.
We do not add any class to the body based on the user’s currently selected color scheme.
If I can probe further, is the reason being that you dislike the color our color functions generate for --tertiary on your currently selected dark scheme?
What would you like to achieve through a body class that you feel like you are not able to do currently?
Yup, exactly 
Now that I read this question… I’m not sure, since the only way to replace a generated color, as far as I know, is
:root {
--primary-medium: #666666;
}
But being a root selector, a class on the html or body element couldn’t target a color scheme before :root.
So… I don’t know.
But it short, the idea would be to change a specific generated color for a specific color scheme. 
No big deal if not possible though. We did some experiments with the our scheme colors and we’re currently satisfied enough with the generated colors. Could be better, but that’s far from a big problem.
If you would like, there is a sort of hidden workaround.
You can create a folder and only add in an about.json file in it.
I actually did this to create a solarized light color scheme, because I wanted to specify my own variants, rather than rely on the built in color functions.
Here is the actual about.json file that I made.
You would then install this “theme”, which would in turn, install this color scheme onto your forum. At that point, you would be able to make it available for use on other themes as well.
{
"name": "Solarized Light",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
},
"color_schemes": {
"Solarized Light": {
"primary": "002B36",
"primary-high": "4C6869",
"primary-medium": "7E918C",
"primary-low-mid": "A4AFA5",
"primary-low": "D6D8C7",
"primary-very-low": "F0ECD7",
"secondary": "FCF6E1",
"secondary-very-high": "E8E6D3",
"secondary-high": "97A59D",
"secondary-medium": "6C8280",
"secondary-low": "325458",
"tertiary": "0088cc",
"tertiary-high": "329ED0",
"tertiary-medium": "7EBFD7",
"tertiary-low": "D6E6DE",
"quaternary": "e45735",
"header_background": "FCF6E1",
"header_primary": "002B36",
"highlight": "ffff4d",
"highlight-high": "BCAA7F",
"highlight-medium": "E3D0A3",
"highlight-low": "FDF9AD",
"danger": "e45735",
"danger-low": "F8D9C2",
"success": "009900",
"success-medium": "4CB544",
"success-low": "CFE5B9",
"love": "fa6c8d",
"love-low": "FCDDD2"
}
},
"modifiers": {
},
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
I remember seeing this a long time ago, when I was working more in-depth on my Discourse installations!
Definitely a good workaround. Thank you. I’ll consider that the proper solution, even if it may be considered as a bit hacky.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.