Theme Safe Colors
The following colors have been tested to look readable on both our light and dark modes. We encourage you to consider using these colors when creating cross mode skins and themes. If these colors aren't your speed, please consider using a html.light-mode version of the element's css to create a light mode version of the color as very few colors looks great on both light and dark backgrounds. These also work best when used in the Resources forum if you like to use color when explaining your code.

You can use the following variables in the css anywhere that you would put a color except the color bbcode.

var(--orange), var(--skyblue), var(--emerald), var(--lavender), var(--gold), var(--turquoise), var(--amethyst), var(--cerulean), var(--saffron), var(--cyan), var(--beige), var(--salmon), var(--mauve), var(--topaz), var(--crimson), var(--teal), var(--coral), var(--indigo), var(--magenta), var(--peach), var(--rose), var(--sapphire), var(--violet), var(--cobalt), var(--charcoal), var(--ruby), var(--sand), var(--mint), var(--mulberry), var(--marigold), var(--carmine), var(--plum)

For bbcode if you don't want to use html, you can use the following:

[colortxt=var(--magenta)]Some text here.[/colortxt]

Examples:

color: var(--magenta);

background: var(--skyblue);

border: 1px solid var(--mint);

You can create your own sets of theme safe colors using css if you would like to make your skin colors cross mode friendly. The root is dark mode:

:root {
--orange: #FFA500;
--skyblue: #87CEEB;
--emerald: #50C878;
}

html.light-mode {
--orange: #FF4500;
--skyblue: #4682B4;
--emerald: #2E8B57;
}