| JScherer-WMF | |
| Nov 30 2023, 5:38 PM |
| F41581256: Dark with new template.png | |
| Dec 8 2023, 5:36 PM |
| F41581257: Night underlines.png | |
| Dec 8 2023, 5:36 PM |
@Jdlrobson and I want to see how many templates we can get through "fixing" in one sprint if we were to do a dark mode where we specify the design in advance, i.e. not inverting or doing an automated colour switch.
The goal is to explore how many templates would inherit hand-rolled design changes, which will help us estimate the total work needed if we were to take this approach across all templates later.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | ovasileva | T341631 [EPIC] Q1 Main hypothesis: Typographical and palette customizations | |||
| Resolved | ovasileva | T341632 [EPIC] Palette customizations and dark mode | |||
| Resolved | Design | ovasileva | T352462 Night mode design spike vol. 2 |
I worked through a few templates to try and get to a point where I'd be happy to have them in prod. Here is the ideal version that I mocked up in Figma:
I explain my rationale for the night colour styles and go through some more templates in browser in the video here.
Tl;dr
CSS changes omitting the images cc @Jdlrobson
a {
text-decoration: none;
color: #3366cc;
color: var(--color-link-selected);
background: none;
text-decoration: underline;
text-underline-position: under;
}
// --color-link-selected: turned to #fffffffigure[typeof~='mw:File/Thumb'] > figcaption, figure[typeof~='mw:File/Frame'] > figcaption {
border: 1px solid #c8ccd1;
border-color: var(--border-color-subtle,#c8ccd1);
border-top: 0;
background-color: #f8f9fa;
background-color: #07060500;
color: var(--color-base,#202122);
font-size: 88.4%;
}
//made background-color transparent.mw-parser-output a.extiw, .mw-parser-output a.external {
color: var(--color-link-selected);
}
//used to be hardcoded, added variable.mw-collapsible-toggle-default .mw-collapsible-text {
color: var(--color-link-selected);
}
// used to be hardcoded, added variable.skin-feature-dark-mode-clientpref-1.vector-dark-mode-content-policy-clientpref-strip .mw-parser-output table, .skin-feature-dark-mode-clientpref-1.vector-dark-mode-content-policy-clientpref-strip .mw-parser-output code, .skin-feature-dark-mode-clientpref-1.vector-dark-mode-content-policy-clientpref-strip .mw-parser-output th, .skin-feature-dark-mode-clientpref-1.vector-dark-mode-content-policy-clientpref-strip .mw-parser-output td, .skin-feature-dark-mode-clientpref-1.vector-dark-mode-content-policy-clientpref-strip .mw-parser-output tr, .skin-feature-dark-mode-clientpref-1.vector-dark-mode-content-policy-clientpref-strip .mw-parser-output ul, .skin-feature-dark-mode-clientpref-1.vector-dark-mode-content-policy-clientpref-strip .mw-parser-output li, .skin-feature-dark-mode-clientpref-1.vector-dark-mode-content-policy-clientpref-strip .mw-parser-output > div div, .skin-feature-dark-mode-clientpref-1.vector-dark-mode-content-policy-clientpref-strip .mw-parser-output > div {
border-color: inherit;
background-color: inherit;
color: inherit;
border-width: thin;
}
//added border-width globallya.new {
color: #d73333;
color: var(--color-link-new);
}
//changed --color-link-new to #A2A9B1