MediaWiki:Minerva-darkmode.less

/**

* compiled to MediaWiki:Minerva-darkmode.css; applied when dark mode is 
* toggled on via MediaWiki:Gadget-skinTogglesMobile.js 
*/

@import 'MediaWiki:Common.less/variables.less'; @import 'MediaWiki:Common.less/mixins.less';

// style browser default forms; :has() is relatively new - shouldnt pose a problem html:has(body.wgl-theme-dark) { color-scheme: dark; }

body.wgl-theme-dark { color-scheme: dark; --body-background-image: url('/images/rss/background_dark.jpg?width=900px'); --body-background-color: #071022; --body-main: #172136; --body-light: #313e59; --body-mid: #222e45; --body-dark: #222e45; --body-border: #596e96;

--ooui-text: var(--text-color); --ooui-interface: #222e45; /* from desktop ooui */ --ooui-interface-border: #2f4060; --ooui-window-background: rgba(25,25,25,0.6); --ooui-input: #384766; --ooui-input-border: #475980; --ooui-input-border--hover: #556c9b; @ooui-normal: @pickled-bluewood; --ooui-normal: #313e59; --ooui-normal--hover: #384766; --ooui-normal-border: #3f5073; @ooui-progressive: #8cabe6; --ooui-progressive: @ooui-progressive; --ooui-progressive--hover: lighten(@ooui-progressive, 10%); --ooui-accent: var(--link-color); --ooui-pending-background-image: repeating-linear-gradient(-45deg,var(--search-box),var(--search-box) 20px,var(--body-main) 20px,var(--body-main) 30px); --ooui-disabled: desaturate( lighten( @ooui-normal, 32% ), 16%); --ooui-disabled-border: desaturate( lighten( @ooui-normal, 32% ), 16%); --ooui-disabled-text: var(--subtle-color);

--link-color: #8cabe6; --background-link-color: var(--link-color); --redlink-color: #f26d60; --text-color: #cbd9f4; --byline-color: #9aa4b7; --subtle-color: var(--byline-color);

--admin-blue: #0087ff; --bearcat-green: #00ff55; --awb-purple: #f319ff;

--thumb-bg: var(--body-mid); --thumb-caption-bg: var(--body-light); --wikitable-header-bg: #222e45; --wikitable-border: #172136; --wikitable-bg: #313e59; --wikitable-bg-lighter: #3a4a69; --wikitable-color: #cbd9f4; --wikitable-alternating-bg: #2a3651; --table-na-background: fade( @black, 20 ); --table-na-color: var(--subtle-color); --table-yes-background: @san-felix; --table-yes-color: @caper; --table-no-background: @mocaccino; --table-no-color: @apricot-peach; --table-maybe-background: @cinnamon; --table-maybe-color: @golden; --droptable-text-color: @white; --droptable-always-background: #0b5884; --droptable-common-background: #3c780a; --droptable-uncommon-background: #a48900; --droptable-rare-background: #b55e0c; --droptable-veryrare-background: #9f261e; --droptable-random-background: #984c89; --infobox-bg: #313e59; --infobox-border: #596e96; --infobox-header: #172136; --infobox-subheader: #222e45; --infobox-text-color: var(--text-color); --infobox-room-poh-color: @river-bed; --sidebar: #596e96; --background-text-color: var(--text-color); --search-box: #313e59; --button-background: #617ebc; --button-dark: #617ebc; --button-border: #617ebc; --button-light: #617ebc; --gemw-name-color: #444e5a; --gemw-light-text: #555555; --gemw-time-color: var(--base-text-color); --gemw-property-border-color: #e4eaee; --gemw-historical-border-color: var(--body-border); --gecharts-overlay-bg-color: var(--body-border); --gecharts-popup-border-color: var(--body-border); --gecharts-popup-color: var(--text-color); --mw-code-background-color: #222e45; --coins-color: #6bc71f; --coins-pos-color: #3ea6e6; --coins-neg-color: #ee4231; --questdetails-header-background: #222e45; --questdetails-header-background-alt: #222e45; --transcript-border-color: #596e96; --transcript-border-hover-color: #8596b7; --lighttable-bg-hover: @la-palma; --lighttable-bg-active: @san-felix; --lighttable-link-color: @caper; --fact-text-color: #3ea6e6; --fact-text-border-bottom-color: #8cabe6; --production-selected-background: #3c780a; --production-selected-color: #fff; --wikipedia-border: #313e59; --wikipedia-background: var(--body-border); --keypress-background: #313e59; --keypress-border: var(--body-border); --keypress-text-shadow: transparent; --keypress-color: var(--text-color); --tile-border-color: #596e96; --tile-background-color: #313e59; --tile-link-button-color: #222e45; --tile-link-button-highlight-color: #2a3956; --tile-dark-color: #fff; --tile-dark-bg: #5d6773; --tile-dark-link-color: #ccc; --tile-dark-byline-color: rgba(255, 255, 255, 0.7); --tile-dark-header-color: #fff; --documentation-background: #313e59; --documentation-border: #222e45; --documentation-link-color: var(--link-color); --documentation-headers-color: var(--text-color); --documentation-header-background: #222e45; --documentation-subheader-background: #1f293e; --mw-templatedata-doc-muted-color: #888; --base-text-color: var(--text-color); --base-heading-color: var(--text-color); --base-heading-border: var(--sidebar); --mainpage-recent-updates-description-color: var(--text-color); --ajaxpoll-answerbar-background: var(--body-mid); --errorbox-border: #ee4231; --warningbox-border: var(--errorbox-border); --successbox-border: #6bc71f; --sourceeditor-bg: var(--body-light); --diff-addedline-background: #438ab5; --diff-addedline-color: #fff; --diff-deletedline-background: #9f261e; --diff-deletedline-color: #fff; --diff-context-border-color: var(--body-mid); --diff-context-background: var(--body-mid); --blockquote-color: var(--text-color); --errorbox-bg: @mocaccino; --errorbox-border: @old-brick; --warningbox-bg: var(--errorbox-bg); --warningbox-border: var(--errorbox-bg); --successbox-bg: @san-felix; --successbox-border: @la-palma;

.mboxvar(obsolete, #464646, #333, #ddd, #bbb); .mboxvar(info, var(--messagebox-obsolete-background), var(--messagebox-obsolete-border), var(--messagebox-obsolete-color), var(--messagebox-obsolete-link-color)); .mboxvar(action, #45697d, #2d5266, var(--text-color), #b8d5e5); .mboxvar(warn, #95271b, #6b130a, #f8ebe9, #e8b8b3); .mboxvar(safe, #1b8408, #126802, #e9f6e7, #c1e0bb); .mboxvar(disambig, var(--messagebox-obsolete-background), var(--messagebox-obsolete-border), var(--messagebox-obsolete-color), var(--messagebox-obsolete-link-color));

--mobile-navbox-wide-bg-color: #384561; --mobile-navbox-linear-gradient: linear-gradient(to right, rgba(23, 33, 54, 0), var(--body-main) 95%, var(--body-main));

--tabber-tab-bg: var(--body-light); --tabber-tab-border-color: var(--body-border); --tabber-active-tab-bg: var(--body-light); --tabber-active-tab-color: var(--text-color); --tabber-active-tab-hover-bg: var(--body-light); --tabber-active-tab-hover-border-color: var(--body-border); --tabber-active-tab-hover-color: var(--text-color); --tabber-active-tab-border-hider-color: var(--body-light); --tabber-inactive-tab-bg: #222e45; --tabber-inactive-tab-border-color: var(--body-border); --tabber-inactive-tab-color: var(--text-color); --tabber-inactive-tab-hover-bg: var(--body-light); --tabber-inactive-tab-hover-border-color: var(--body-border);

--rc-negative-color: @flamingo; --rc-positive-color: @lima; --filter-black-to-link: invert(63%) sepia(67%) saturate(242%) hue-rotate(182deg) brightness(93%) contrast(94%);

--fieldset-border-color: var(--body-border); --smw-ask-options-even-bg: var(--body-mid); --smw-ask-options-odd-bg: var(--body-light); --smw-ask-action-btn-lblue-bg: #313e59; --smw-ask-action-btn-lblue-color: #cbd9f4; --smw-ask-action-btn-lblue-border-color: #3f5073; --smw-ask-action-btn-dblue-bg: #384766; --smw-ask-action-btn-dblue-color: #cbd9f4; --smw-ask-action-btn-dblue-border-color: #475980;

--diff-context-border-color: var(--body-mid); --diff-context-background: var(--body-mid);

--ajaxpoll-background: var(--body-light); --ajaxpoll-text-color: var(--base-text-color); --ajaxpoll-answerbar-background: var(--body-mid); --ajaxpoll-answerbar-border: var(--body-border);

--sourceeditor-input-background: var(--body-mid); --sourceeditor-background: var(--body-light); --sourceeditor-background-secondary: var(--body-mid); --sourceeditor-border: var(--body-main);

--searchbutton-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23cbd9f4'%3E%3Cpath d='M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4-5.4-5.4zM3 8a5 5 0 1 0 10 0A5 5 0 1 0 3 8z'/%3E%3C/g%3E%3C/svg%3E");

// trailblazer region highlight --tbz-unlocked-background: repeating-linear-gradient(-45deg, #315d30 0 20px, #13421e 20px 30px); --tbz-unlocked-border-color: #00e417;

--tbz-locked-background-color: #8a2525; --tbz-locked-border-color: #b32828;

--tbz-partial-unlock-background: #5a5a5a; --tbz-partial-unlock-border-color: #13421e;

--external-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg fill='%238cabe6'%3E%3Cpath d='M8.9 8.9H1.1V1.1h2.8V0H1.1C.5 0 0 .5 0 1.1v7.8C0 9.5.5 10 1.1 10h7.8c.6 0 1.1-.5 1.1-1.1V6.1H8.9v2.8z'/%3E%3Cpath d='M10 0H5.6l1.8 1.8L4.2 5l.8.8 3.2-3.2L10 4.4V0z'/%3E%3C/g%3E%3C/svg%3E");

@codehighlight-background: #222e45; @import 'MediaWiki:Vector-darkmode.less/codehighlight.less';

/* should later look on how to handle these svgs, (should we really set a var for every svg?) I find it less peculiar to just copy+paste them and then adjust the fill attribute */ a.external, .mw-parser-output a.external { background-image: var(--external-icon); }

.client-js & .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable), & .jquery-tablesorter th.headerSort { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='9' viewBox='0 0 21 9'%3E%3Cg fill='%23cbd9f4'%3E%3Cpath d='M14.5 5l-4 4-4-4zM14.5 4l-4-4-4 4z'/%3E%3C/g%3E%3C/svg%3E"); /* styles aren't preloaded like desktop */ cursor: pointer; background-repeat: no-repeat; background-position: center right; padding-right: 21px; }

& .jquery-tablesorter th.headerSortUp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='4' viewBox='0 0 21 4'%3E%3Cg fill='%23cbd9f4'%3E%3Cpath d='M6.5 4l4-4 4 4z'/%3E%3C/g%3E%3C/svg%3E"); }

& .jquery-tablesorter th.headerSortDown { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='4' viewBox='0 0 21 4'%3E%3Cg fill='%23cbd9f4'%3E%3Cpath d='M14.5 0l-4 4-4-4z'/%3E%3C/g%3E%3C/svg%3E"); }

.oo-ui-iconElement-icon:not(.oo-ui-image-destructive, .oo-ui-image-warning, .oo-ui-image-progressive, .oo-ui-checkboxInputWidget-checkIcon, .oo-ui-image-invert, .mw-no-invert), .oo-ui-indicatorElement-indicator, .mwe-math-element img, .cdx-button__icon, .popups-icon, .soft-redirect > div:nth-child(1) img { filter: invert(1) hue-rotate(180deg); // hue-rotate to preserve color if possible; not very accurate tho }

.minerva-icon, .mf-icon, .mw-ui-icon-mf-expand { filter: brightness(0) invert(1); } }