Project:Site Color Palette
Site Color Palette
Colors and classes by theme for use on the Step platform
by: Step Modifications | Forum Topic
Text Colors
To color text using theme-aware colors, invoke Template:Fc to color text. DO NOT do this on wiki mod pages, or it will potentially break them, due to the massive inflation of template calls this could cause (see CSS Classes below).
- Markup
{{Fc|orange|Use the Fc template to make orange text}}
- Result
- Use the Fc template to make orange text
CSS Classes
On pages where guide template-call thresholds are limiting (Mod and Guide pages), it's important to use the HTML methods. Classes are used for colors on the wiki to maintain consistency and to allow variations that accommodate site themes. The following classes are used as indicated below. Each uses the color name (or shortened name) with 'type' suffix:
- Text - tx - example: orangetx
- Background - bg example: orangebg
- Border - bd example: orangebd
- Color classes can prepend a prefix 'm' to render the 'muted' color with 50% opacity
- Does not apply to 'brighter'/'dimmer'
- Does not apply to text colors
NOTE: Black and white can also be used by substituting 'black'/'white' in any of the color classes. These should ONLY be used in special cases as workarounds.
Invoke by using HTML (for example):
- Markup
<span class="purpletx">Class for purple text</span>
- Result
- Class for purple text
Classic Theme
| Color | Hex | CSS Class Examples | Template:Fc Keywords |
|---|---|---|---|
| magenta | #d96dc9 | (m)magentbd | magenta |
| purple | #aa88e8 | (m)purplebd | purple, dev |
| blue | #64a5e3 | (m)bluebd | blue, anotice |
| green | #4bb073 | (m)greenbd | green |
| chartreuse | #9ead48 | (m)chartrbd | chartr, bug |
| yellow | #e0b438 | (m)yellowbd | yellow, issue |
| salmon | #daaa99 | (m)salmonbd | salmon, instruction |
| orange | #f09047 | (m)orangebd | orange |
| red | #ff7077 | (m)redbd | red, warning, warn |
| highlight | #ddd | hltx | highlight, brighter |
| dim | #888 | dimtx | dimmer, dim |
Dark Theme
| Color | Hex | CSS Class Examples | Template:Fc Keywords |
|---|---|---|---|
| magenta | #ce56bf | (m)magentbd | magenta |
| purple | #a07fdf | (m)purplebd | purple, dev |
| blue | #5c8dd7 | (m)bluebd | blue, notice |
| green | #43a86b | (m)greenbd | green |
| chartreuse | #96a13f | (m)chartrbd | chartr, bug |
| yellow | #d6b026 | (m)yellowbd | yellow, issue |
| salmon | #d0a08f | (m)salmonbd | salmon, instruction |
| orange | #f08740 | (m)orangebd | orange |
| red | #f76770 | (m)redbd | red, warning, warn |
| highlight | #d8d8d8 | hltx | highlight, brighter |
| dim | #888 | dimx | dimmer, dim |
(retired) Light Theme
| Color | Hex | CSS Class Examples | Template:Fc Keywords |
|---|---|---|---|
| magenta | #d96dc9 | (m)magentbd | magenta |
| purple | #9978d8 | (m)purplebd | purple, dev |
| blue | #5c8dd6 | (m)bluebd | blue, notice |
| green | #3fa963 | (m)greenbd | green |
| chartreuse | #96a13f | (m)chartrbd | chartr, bug |
| yellow | #d0a91a | (m)yellowbd | yellow, issue |
| salmon | #c49584 | (m)salmonbd | salmon, instruction |
| orange | #f08740 | (m)orangebd | orange |
| red | #f76770 | (m)redbd | red, warning, warn |
| highlight | #333 | hltx | highlight, brighter |
| dimmer | #888 | dimx | dimmer, dim |
