Revert "Prevent dark-mode styles from affecting print media"

This reverts commit b3ca12e628.

Reason for revert: Icons are appearing black on black in dark mode
in origin/wmf/1.43.0-wmf.18.

Change-Id: Ifdf3970c77b66e5a7835ca44eb45deec2b44eb43
This commit is contained in:
Jdlrobson 2024-08-13 07:24:28 +00:00 committed by Gerrit Code Review
parent b3ca12e628
commit 2d281db7b1
4 changed files with 19 additions and 27 deletions

View file

@ -52,10 +52,8 @@
.vector-icon.mw-ui-icon-wikimedia-userGroup, .vector-icon.mw-ui-icon-wikimedia-userGroup,
.vector-icon.mw-ui-icon-wikimedia-listBullet, .vector-icon.mw-ui-icon-wikimedia-listBullet,
.vector-icon.mw-ui-icon-wikimedia-close { .vector-icon.mw-ui-icon-wikimedia-close {
@media screen { html.skin-theme-clientpref-night & {
html.skin-theme-clientpref-night & { filter: invert( 1 );
filter: invert( 1 );
}
} }
/** /**
@ -63,7 +61,7 @@
* *
* Applies the night mode color palette only in response to system settings. * Applies the night mode color palette only in response to system settings.
*/ */
@media screen and ( prefers-color-scheme: dark ) { @media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os & { html.skin-theme-clientpref-os & {
filter: invert( 1 ); filter: invert( 1 );
} }

View file

@ -22,13 +22,11 @@
} }
} }
@media screen { html.skin-theme-clientpref-night {
html.skin-theme-clientpref-night { .dark-mode-image-styles();
.dark-mode-image-styles();
}
} }
@media screen and ( prefers-color-scheme: dark ) { @media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os { html.skin-theme-clientpref-os {
.dark-mode-image-styles(); .dark-mode-image-styles();
} }

View file

@ -26,15 +26,13 @@
// https://phabricator.wikimedia.org/T319070#8284272 // https://phabricator.wikimedia.org/T319070#8284272
margin-left: 7px; margin-left: 7px;
@media screen { html.skin-theme-clientpref-night & {
html.skin-theme-clientpref-night & { // For night-mode, invert icons so they go from black to white.
// For night-mode, invert icons so they go from black to white. // Since invert( 1 ) changes the hue (e.g. from blue to orange)
// Since invert( 1 ) changes the hue (e.g. from blue to orange) // hue-rotate( 180deg ) changes the hue back to that of the original color.
// hue-rotate( 180deg ) changes the hue back to that of the original color. // This slightly corrects progressive/destructive colored icons
// This slightly corrects progressive/destructive colored icons // (although their lightness & saturation are still different, e.g. language button).
// (although their lightness & saturation are still different, e.g. language button). filter: invert( 1 ) hue-rotate( 180deg );
filter: invert( 1 ) hue-rotate( 180deg );
}
} }
/** /**
@ -42,7 +40,7 @@
* *
* Applies the night mode color palette only in response to system settings. * Applies the night mode color palette only in response to system settings.
*/ */
@media screen and ( prefers-color-scheme: dark ) { @media ( prefers-color-scheme: dark ) {
html.skin-theme-clientpref-os & { html.skin-theme-clientpref-os & {
filter: invert( 1 ) hue-rotate( 180deg ); filter: invert( 1 ) hue-rotate( 180deg );
} }

View file

@ -6,16 +6,14 @@ html.ve-activated {
} }
// T367822 // T367822
@media screen { &.skin-theme-clientpref-night {
&.skin-theme-clientpref-night { .ve-ce-branchNode-blockSlug,
.ve-ce-branchNode-blockSlug, body p.ve-ce-branchNode-newSlug {
body p.ve-ce-branchNode-newSlug { background-color: rgba( 241, 247, 251, 0.1 );
background-color: rgba( 241, 247, 251, 0.1 );
}
} }
} }
@media screen and ( prefers-color-scheme: dark ) { @media ( prefers-color-scheme: dark ) {
&.skin-theme-clientpref-os { &.skin-theme-clientpref-os {
.ve-ce-branchNode-blockSlug, .ve-ce-branchNode-blockSlug,
body p.ve-ce-branchNode-newSlug { body p.ve-ce-branchNode-newSlug {