1.9 KiB
Dark Mode Overview
Dark Mode is a dark theme with light text on a dark grey background. It has blue accents in place of red.
Dark Mode favors maintainability over brevity. To avoid introducing
cascade-related bugs, we prefer to adhere to the order laid out in the default
stylesheets and avoid reordering selectors or combining similar rule-sets. This
means you might notice a lot of rule-sets where the only declaration is
color: #fff, but that's by design -- combining them quickly leads to modifying
selectors, which in turn means the style might not be applied everywhere it is
needed.
If you add a new color-related declaration to the default skin, the pull request must include a similar change for Dark Mode. Similarly, if you change the selectors on a rule-set that includes color-related declarations, your pull request should make the same change to the corresponding rule-set for Dark Mode.
Dark Mode Structure
Dark Mode consists of three skins.
Dark Mode - Screen
The "Dark Mode - Screen" skin contains the majority of styles. It is used on all screen sizes.
- Use the CSS from dark_mode_site_screen_.css.
- Expand the "Advanced" section.
- Check "Parent Only."
- For "Media," check the "screen" option.
Dark Mode - Midsize
The "Dark Mode - Midsize" skin contains adjustments for screens less than 62em in width.
- Use the CSS from dark_mode_midsize_.css.
- Expand the "Advanced" section.
- Check "Parent Only."
- For "Media," check the "only screen and (max-width: 62em)" option.
Dark Mode
The "Dark Mode" skin combines the two previous skins so they can be used. It has placeholder CSS because the CSS field cannot be blank.
- Include the placeholder CSS
#unused-selector { content: none; }. - Expand the "Advanced" section.
- For "Media," check the "screen" option.
- Press the "Add parent skin" button.
- For Parent #1, enter "Dark Mode - Screen".
- Press the "Add parent skin" button again.
- For Parent #2, enter "Dark Mode - Midsize."