The text colour is always white so it isn't compatible for Dark mode.
How do you change the text colour in the div settings
The text colour is always white so it isn't compatible for Dark mode.
How do you change the text colour in the div settings
Try using the actual spelling of "color" instead of "colour", that might be the issue if you're using source edit due to the program's language being native American English, thanks.
Also, we're mildly unsure where this comes from. Can you give us context in the form of a link?
@Reggie Ozuna Ik that it's American spelling but it still doesn't work it changed the background colour
https://googology.fandom.com/wiki/Template:Unsourced
I have fixed it for you. Since there isn't currently a way to fix the text color, I had to change the background color instead.
"I have fixed it [...] I had to change the background color"
Well, you actually did not really fix it.
You made it work in dark mode, but now it doesn't work well in light mode anymore:
/edit:
In meantime, the edit of @Reggie Ozuna was reverted.
It's now back to how it was before: Only working in light mode.
"there isn't currently a way to fix the text color"
Of course there are many ways to fix this.
Option 1: Whenever using a background color, change the text color as well.
Examples:
background: white; color: black;
or
background: black; color: white; This would make it use the same colors in light and dark mode.
You can use other colors of course, just make sure there is enough contrast between the background and text color.
Option 2: Do not use a background color.
Then, the box will be transparent, and the background and font colors will be the ones of the theme.
Option 3: Use color variables.
Color variables can be defined to be different for dark/light mode.
a) You can use existing color variables. These colors change for light/dark mode.
Example:
background: var(--theme-accent-color); color: var(--theme-accent-label-color);b) You can define own variables. This needs to be done in the wiki's MediaWiki:Common.css and therefore by an admin.
Example:
Define background colors for dark/light mode (in Common.css):
.theme-fandomdesktop-light {
--notice-background: #ffeeee;
}
.theme-fandomdesktop-dark {
--notice-background: #2f4f4f;
}Use it in the template:
background: var(--notice-background);This would make it look like this (light/dark):
What do you think?