PostmarketOS:Wiki dark mode
Appearance
(Redirected from Dark mode)
Dark Mode
Dark mode is currently broken.
How to Fix
To manually fix dark mode:
- Go to Preferences -> Appearance -> Custom CSS
- Paste the following code into the page:
/*
* Vector 2022 dark mode fixups
*
* To propose changes, make an issue at:
* https://gitlab.postmarketos.org/postmarketOS/wiki/-/issues
*/
/* Light mode colors */
:root {
/* Template:Button (device button preview, not any actual buttons!) */
--pmos-color-button-tmpl-bg: #F2F2F2;
--pmos-color-button-tmpl-border1: #AAA;
--pmos-color-button-tmpl-border2: #555;
/* Template:Hint */
--pmos-color-hint-text: #1c1607;
--pmos-color-hint-bg: #fff9ea;
--pmos-color-hint-border: #f2bc20;
/* Template:Note */
--pmos-color-note-text: #101418;
--pmos-color-note-bg: #f6efe5;
--pmos-color-note-border: #ac6600;
/* Template:Warning */
--pmos-color-warning-text: #101418;
--pmos-color-warning-bg: #fee7e6;
--pmos-color-warning-border: #d33;
/* Template:Todo */
--pmos-color-todo-text: #101418;
--pmos-color-todo-bg: #fdd1d1;
--pmos-color-todo-border: #b60000;
/* Template:Notice */
--pmos-color-notice-text: #101418;
--pmos-color-notice-bg: #D3E4FA;
--pmos-color-notice-border: #0B6B9F;
/* Template:Stub */
--pmos-color-stub-text: #101418;
--pmos-color-stub-bg: #CCD7E8;
--pmos-color-stub-border: #98A9C1;
/* Template:Work-in-progress page */
--pmos-color-wip-text: #101418;
--pmos-color-wip-bg: #E8E0CC;
--pmos-color-wip-border: #C1B598;
/* Template:Based on SoC */
--pmos-color-soc-text: #101418;
--pmos-color-soc-bg: #f7fff7;
--pmos-color-soc-border: #8a8;
/* Feature tables (Y/P/N/-) */
--pmos-color-feature-text: var(--color-base, #202122);
--pmos-color-feature-yes: #CFFFBF;
--pmos-color-feature-partial: #FFCFA5;
--pmos-color-feature-no: transparent;
--pmos-color-feature-unavailable: #E1E1E1;
/* Dark mode colors. We set them here, then apply them below;
* they need to be applied separately for dark mode preference
*and* OS preference when "prefers-color-scheme: dark" is set. */
--pmos-color-button-tmpl-bg-dark: #1A1A1A;
--pmos-color-button-tmpl-border1-dark: #3b4753;
--pmos-color-button-tmpl-border2-dark: #353d46;
--pmos-color-hint-text-dark: #ece7da;
--pmos-color-hint-bg-dark: #463405;
--pmos-color-hint-border-dark: #5c470a;
--pmos-color-warning-text-dark: #fff;
--pmos-color-warning-bg-dark: #3e1a19;
--pmos-color-warning-border-dark: #a21717;
--pmos-color-note-text-dark: #fff;
--pmos-color-note-bg-dark: #261c09;
--pmos-color-note-border-dark: #6a481c;
--pmos-color-todo-text-dark: #fff;
--pmos-color-todo-bg-dark: #5c1e1e;
--pmos-color-todo-border-dark: #c64242;
--pmos-color-notice-text-dark: #fff;
--pmos-color-notice-bg-dark: #262c37;
--pmos-color-notice-border-dark: #405672;
--pmos-color-stub-text-dark: #fff;
--pmos-color-stub-bg-dark: #1b1f24;
--pmos-color-stub-border-dark: #98A9C1;
--pmos-color-wip-text-dark: #fff;
--pmos-color-wip-bg-dark: #221e16;
--pmos-color-wip-border-dark: #C1B598;
--pmos-color-soc-text-dark: #fff;
--pmos-color-soc-bg-dark: #121712;
--pmos-color-soc-border-dark: #232e23;
--pmos-color-feature-text-dark: #fff;
--pmos-color-feature-yes-dark: #153d1d;
--pmos-color-feature-partial-dark: #453217;
--pmos-color-feature-unavailable-dark: var(--background-color-disabled);
}
.skin-theme-clientpref-night {
--pmos-color-button-tmpl-bg: var(--pmos-color-button-tmpl-bg-dark);
--pmos-color-button-tmpl-border1: var(--pmos-color-button-tmpl-border1-dark);
--pmos-color-button-tmpl-border2: var(--pmos-color-button-tmpl-border2-dark);
--pmos-color-hint-text: var(--pmos-color-hint-text-dark);
--pmos-color-hint-bg: var(--pmos-color-hint-bg-dark);
--pmos-color-hint-border: var(--pmos-color-hint-border-dark);
--pmos-color-note-text: var(--pmos-color-note-text-dark);
--pmos-color-note-bg: var(--pmos-color-note-bg-dark);
--pmos-color-note-border: var(--pmos-color-note-border-dark);
--pmos-color-warning-text: var(--pmos-color-warning-text-dark);
--pmos-color-warning-bg: var(--pmos-color-warning-bg-dark);
--pmos-color-warning-border: var(--pmos-color-warning-border-dark);
--pmos-color-todo-text: var(--pmos-color-todo-text-dark);
--pmos-color-todo-bg: var(--pmos-color-todo-bg-dark);
--pmos-color-todo-border: var(--pmos-color-todo-border-dark);
--pmos-color-notice-text: var(--pmos-color-notice-text-dark);
--pmos-color-notice-bg: var(--pmos-color-notice-bg-dark);
--pmos-color-notice-border: var(--pmos-color-notice-border-dark);
--pmos-color-stub-text: var(--pmos-color-stub-text-dark);
--pmos-color-stub-bg: var(--pmos-color-stub-bg-dark);
--pmos-color-stub-border: var(--pmos-color-stub-border-dark);
--pmos-color-wip-text: var(--pmos-color-wip-text-dark);
--pmos-color-wip-bg: var(--pmos-color-wip-bg-dark);
--pmos-color-wip-border: var(--pmos-color-wip-border-dark);
--pmos-color-soc-text: var(--pmos-color-soc-text-dark);
--pmos-color-soc-bg: var(--pmos-color-soc-bg-dark);
--pmos-color-soc-border: var(--pmos-color-soc-border-dark);
--pmos-color-feature-text: var(--pmos-color-feature-text-dark);
--pmos-color-feature-yes: var(--pmos-color-feature-yes-dark);
--pmos-color-feature-partial: var(--pmos-color-feature-partial-dark);
--pmos-color-feature-unavailable: var(--pmos-color-feature-unavailable-dark);
}
@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os {
--pmos-color-button-tmpl-bg: var(--pmos-color-button-tmpl-bg-dark);
--pmos-color-button-tmpl-border1: var(--pmos-color-button-tmpl-border1-dark);
--pmos-color-button-tmpl-border2: var(--pmos-color-button-tmpl-border2-dark);
--pmos-color-hint-text: var(--pmos-color-hint-text-dark);
--pmos-color-hint-bg: var(--pmos-color-hint-bg-dark);
--pmos-color-hint-border: var(--pmos-color-hint-border-dark);
--pmos-color-note-text: var(--pmos-color-note-text-dark);
--pmos-color-note-bg: var(--pmos-color-note-bg-dark);
--pmos-color-note-border: var(--pmos-color-note-border-dark);
--pmos-color-warning-text: var(--pmos-color-warning-text-dark);
--pmos-color-warning-bg: var(--pmos-color-warning-bg-dark);
--pmos-color-warning-border: var(--pmos-color-warning-border-dark);
--pmos-color-todo-text: var(--pmos-color-todo-text-dark);
--pmos-color-todo-bg: var(--pmos-color-todo-bg-dark);
--pmos-color-todo-border: var(--pmos-color-todo-border-dark);
--pmos-color-notice-text: var(--pmos-color-notice-text-dark);
--pmos-color-notice-bg: var(--pmos-color-notice-bg-dark);
--pmos-color-notice-border: var(--pmos-color-notice-border-dark);
--pmos-color-stub-text: var(--pmos-color-stub-text-dark);
--pmos-color-stub-bg: var(--pmos-color-stub-bg-dark);
--pmos-color-stub-border: var(--pmos-color-stub-border-dark);
--pmos-color-wip-text: var(--pmos-color-wip-text-dark);
--pmos-color-wip-bg: var(--pmos-color-wip-bg-dark);
--pmos-color-wip-border: var(--pmos-color-wip-border-dark);
--pmos-color-soc-text: var(--pmos-color-soc-text-dark);
--pmos-color-soc-bg: var(--pmos-color-soc-bg-dark);
--pmos-color-soc-border: var(--pmos-color-soc-border-dark);
--pmos-color-feature-text: var(--pmos-color-feature-text-dark);
--pmos-color-feature-yes: var(--pmos-color-feature-yes-dark);
--pmos-color-feature-partial: var(--pmos-color-feature-partial-dark);
--pmos-color-feature-unavailable: var(--pmos-color-feature-unavailable-dark);
}
}
/* Responsive image on front page */
.res-img img {
background: transparent !important;
}
/* Apply wikitable styling to Cargo tables */
table.cargoTable tbody {
background-color: var(--background-color-neutral-subtle, #f8f9fa);
color: var(--color-base, #202122);
margin: 1em 0;
border: 1px solid var(--border-color-base, #a2a9b1);
border-collapse: collapse;
}
table.cargoTable > tr > th,
table.cargoTable > tr > td,
table.cargoTable > * > tr > th,
table.cargoTable > * > tr > td {
border: 1px solid var(--border-color-base, #a2a9b1);
padding: 0.2em 0.4em;
}
table.cargoTable > tr > th,
table.cargoTable > * > tr > th {
background-color: var(--background-color-neutral, #eaecf0);
color: var(--color-base, #202122);
text-align: center;
}
table.cargoTable > caption {
font-weight: bold;
}
/* Manual override for Cargo.noMerge table row styling */
table.cargoTable.noMerge tr:nth-child(2n) {
background-color: var(--background-color-neutral, #f8f9fa);
}
table.cargoTable.noMerge tr:nth-child(2n+1) {
background-color: var(--background-color-neutral-subtle, #f8f9fa);
}
/* Infobox styling */
.infobox {
background-color: var(--background-color-neutral-subtle, #f8f9fa);
color: var(--color-emphasized, #101418);
border: 1px solid var(--border-color-subtle,#c8ccd1);
}
/* Message templates */
.button-tmpl {
background-color: var(--pmos-color-button-tmpl-bg) !important;
border-color: var(--pmos-color-button-tmpl-border1) var(--pmos-color-button-tmpl-border2) var(--pmos-color-button-tmpl-border2) var(--pmos-color-button-tmpl-border1) !important;
}
.box-hint {
color: var(--pmos-color-hint-text) !important;
background-color: var(--pmos-color-hint-bg) !important;
border-color: var(--pmos-color-hint-border) !important;
}
.box-warning {
color: var(--pmos-color-warning-text) !important;
background-color: var(--pmos-color-warning-bg) !important;
border-color: var(--pmos-color-warning-border) !important;
}
.box-note {
color: var(--pmos-color-note-text) !important;
background-color: var(--pmos-color-note-bg) !important;
border-color: var(--pmos-color-note-border) !important;
}
.box-notice {
color: var(--pmos-color-notice-text) !important;
background-color: var(--pmos-color-notice-bg) !important;
border-color: var(--pmos-color-notice-border) !important;
}
.box-todo {
color: var(--pmos-color-todo-text) !important;
background-color: var(--pmos-color-todo-bg) !important;
border-color: var(--pmos-color-todo-border) !important;
}
.box-stub {
color: var(--pmos-color-stub-text) !important;
background-color: var(--pmos-color-stub-bg) !important;
border-color: var(--pmos-color-stub-border) !important;
}
.box-wip {
color: var(--pmos-color-wip-text) !important;
background-color: var(--pmos-color-wip-bg) !important;
border-color: var(--pmos-color-wip-border) !important;
}
.sidebox-soc {
color: var(--pmos-color-soc-text) !important;
background-color: var(--pmos-color-soc-bg) !important;
border-color: var(--pmos-color-soc-border) !important;
}
table.feature-colors td.feature,
.cargoTable td.feature,
.feature {
color: var(--pmos-color-feature-text);
}
table.feature-colors td.feature-yes,
.cargoTable td.feature-yes,
.feature-yes {
background: var(--pmos-color-feature-yes) !important;
}
table.feature-colors td.feature-partial,
.cargoTable td.feature-partial,
.feature-partial {
background: var(--pmos-color-feature-partial) !important;
}
table.feature-colors td.feature-no,
.cargoTable td.feature-no,
.feature-no {
background: var(--pmos-color-feature-no) !important;
}
table.feature-colors td.feature-unavailable,
.cargoTable td.feature-unavailable,
.feature-unavailable {
background: var(--pmos-color-feature-unavailable) !important;
}