mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-23 10:21:40 +00:00
Enable night theme in Vector
- New night theme added via Codex `.cdx-mode-dark();` mixin. - CSS custom properties separated from skin.less. - Font-size rem conversion removed since Codex now uses rems. - bundlesize increased by 1kb ( followup from Icfcb5c7418061a5727580f0685054356ba4edb72 ). - Icons that use background-images are inverted for night-theme. - Linter error fixed for long-lines in clientPreferences.js Co-Author: <Bernard Wang> bwang@wikimedia.org Bug: T354889 Depends-On: I1f54bf4f144eaec6ed317c04bd0c851c2f01b42c Change-Id: I3a8a147b6be67bc830f0d3b816a4b85c26f99cf1
This commit is contained in:
parent
57c2e79220
commit
ca0d404e50
|
@ -2,7 +2,7 @@
|
|||
"total": {
|
||||
"vector-2022": {
|
||||
"scripts": "80KB",
|
||||
"styles": "18KB"
|
||||
"styles": "19KB"
|
||||
},
|
||||
"vector": {
|
||||
"scripts": "80KB",
|
||||
|
@ -24,7 +24,7 @@
|
|||
},
|
||||
{
|
||||
"resourceModule": "skins.vector.styles",
|
||||
"maxSize": "11.4 kB"
|
||||
"maxSize": "11.8 kB"
|
||||
},
|
||||
{
|
||||
"resourceModule": "skins.vector.js",
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
{{! alt is provided for valid HTML but given aria-hidden not needed. }}
|
||||
<img class="mw-logo-icon" src="{{.}}" alt="" aria-hidden="true" height="50" width="50">
|
||||
{{/icon}}
|
||||
<span class="mw-logo-container">
|
||||
<span class="mw-logo-container skin-invert">
|
||||
{{#wordmark}}
|
||||
{{!-- djlint:off H006 --}}
|
||||
<img class="mw-logo-wordmark" alt="{{msg-sitetitle}}" src="{{src}}" style="{{style}}">
|
||||
|
|
|
@ -14,6 +14,11 @@
|
|||
*/
|
||||
|
||||
@import 'mediawiki.skin.defaults.less';
|
||||
|
||||
/**
|
||||
* Codex design tokens. This imports Less variables, some of which refer to CSS variables.
|
||||
* The CSS variable values are imported in CSSCustomProperties.less.
|
||||
*/
|
||||
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui.less';
|
||||
|
||||
// Overrides for Codex variables:
|
||||
|
|
|
@ -71,7 +71,7 @@ function toggleDocClassAndSave( featureName, value, config ) {
|
|||
}, 100 )();
|
||||
// END FIXME.
|
||||
} else {
|
||||
// This case is much simpler, the API transparently takes care of classes as well as storage.
|
||||
// This case is much simpler, the API transparently takes care of classes as well as storage
|
||||
mw.user.clientPrefs.set( featureName, value );
|
||||
callback();
|
||||
}
|
||||
|
|
|
@ -1,44 +1,75 @@
|
|||
/**
|
||||
* Vector CSS Custom properties
|
||||
* ----------------------------
|
||||
* Please be aware that these properties are accessible via *any* client-side code.
|
||||
* These variables should mirror Codex design token names and values:
|
||||
* https://doc.wikimedia.org/codex/latest/design-tokens
|
||||
* Only include properties that are required for client-side modification.
|
||||
*
|
||||
* @private - Currently, these variables are only intended for use by Vector 2022,
|
||||
* however, they are designed to mimic the naming convention in Codex tokens
|
||||
* in order to facilitate an eventual migration to a centralized source.
|
||||
* @experimental
|
||||
* @since October 2023 (MediaWiki 1.42)
|
||||
*/
|
||||
@import 'mediawiki.skin.variables.less';
|
||||
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-mixin-dark.less';
|
||||
@import 'mediawiki.skin.codex-design-tokens/theme-wikimedia-ui-reset.less';
|
||||
|
||||
:root {
|
||||
--font-size-medium: unit( @font-size-small, rem );
|
||||
--line-height-medium: @line-height-small;
|
||||
--background-color-base: @background-color-base;
|
||||
/**
|
||||
* Light mode
|
||||
*
|
||||
* Applies the light mode color palette by default
|
||||
* or with the .skin-invert, or .notheme classes
|
||||
*/
|
||||
:root,
|
||||
.skin-invert,
|
||||
.notheme {
|
||||
.cdx-mode-reset();
|
||||
}
|
||||
|
||||
.night-mode-palette() {
|
||||
/* T354889 */
|
||||
/**
|
||||
* Forced night mode.
|
||||
*
|
||||
* Applies the night mode color palette per the users explicit preference,
|
||||
* regardless of system settings.
|
||||
*/
|
||||
html.skin-theme-clientpref-night {
|
||||
color-scheme: dark;
|
||||
.cdx-mode-dark();
|
||||
}
|
||||
|
||||
html.skin-theme-clientpref-night .skin-invert {
|
||||
color-scheme: light;
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
}
|
||||
|
||||
html.skin-theme-clientpref-night .notheme {
|
||||
color-scheme: light;
|
||||
color: var( --color-base );
|
||||
}
|
||||
|
||||
/**
|
||||
* Auto night mode.
|
||||
*
|
||||
* Applies the night mode color palette only in response to system settings.
|
||||
*/
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
html.skin-theme-clientpref-os {
|
||||
color-scheme: light dark;
|
||||
.cdx-mode-dark();
|
||||
}
|
||||
|
||||
html.skin-theme-clientpref-os .notheme {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html.skin-theme-clientpref-os .skin-invert {
|
||||
color-scheme: light;
|
||||
filter: invert( 1 ) hue-rotate( 180deg );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Font size settings
|
||||
*/
|
||||
.vector-feature-custom-font-size-clientpref-0 {
|
||||
--font-size-medium: @font-size-small;
|
||||
--line-height-medium: @line-height-small;
|
||||
}
|
||||
|
||||
.vector-feature-custom-font-size-clientpref-1 {
|
||||
--font-size-medium: unit( @font-size-medium, rem );
|
||||
--line-height-medium: 1.6;
|
||||
--font-size-medium: @font-size-medium;
|
||||
--line-height-medium: @line-height-medium;
|
||||
}
|
||||
|
||||
.vector-feature-custom-font-size-clientpref-2 {
|
||||
--font-size-medium: unit( @font-size-x-large, rem );
|
||||
--font-size-medium: @font-size-x-large;
|
||||
--line-height-medium: 1.5;
|
||||
}
|
||||
|
||||
html.skin-theme-clientpref-night {
|
||||
.night-mode-palette();
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
html.skin-theme-clientpref-os {
|
||||
.night-mode-palette();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -20,3 +20,22 @@
|
|||
// Temporary fix for https://phabricator.wikimedia.org/T356540
|
||||
background-size: ~'calc( max( @{size-icon-x-small}, @{min-size-icon-x-small} ) )';
|
||||
}
|
||||
|
||||
// FIXME: T363920 Remove when all icons are migrated from ResourceLoader to Codex
|
||||
// Dont invert language icon because it is blue
|
||||
.vector-icon:not( .mw-ui-icon-wikimedia-language-progressive ) {
|
||||
html.skin-theme-clientpref-night & {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Auto night mode.
|
||||
*
|
||||
* Applies the night mode color palette only in response to system settings.
|
||||
*/
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
html.skin-theme-clientpref-os & {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,7 +4,6 @@
|
|||
*/
|
||||
@import './variables.less';
|
||||
@import './mixins.less';
|
||||
@import './CSSCustomProperties.less';
|
||||
|
||||
@media screen {
|
||||
// Common styles
|
||||
|
|
Loading…
Reference in a new issue