otwarchive-symphonyarchive/public/stylesheets/masters/dark_mode

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."