Jump to content

PostmarketOS:Wiki dark mode

From postmarketOS Wiki

Dark Mode

Dark mode is currently broken.

How to Fix

To manually fix dark mode:

  1. Go to Preferences -> Appearance -> Custom CSS
  2. 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;
}