55 lines
1.9 KiB
Markdown
55 lines
1.9 KiB
Markdown
|
# 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."
|