diff --git a/i18n/en.json b/i18n/en.json index fa7514b3..49f6f24d 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -53,5 +53,10 @@ "citizen-theme-day-label": "Light", "citizen-theme-night-label": "Dark", "citizen-theme-os-label": "Auto", - "citizen-theme-exclusion-notice": "This page is always in light mode." + "citizen-theme-exclusion-notice": "This page is always in light mode.", + + "citizen-feature-pure-black-name": "Pure black mode", + "citizen-feature-pure-black-description": "Pure black mode", + "citizen-feature-pure-black-0-label": "Off", + "citizen-feature-pure-black-1-label": "On" } diff --git a/i18n/qqq.json b/i18n/qqq.json index 7c6f3812..55cb4d67 100644 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -55,5 +55,9 @@ "citizen-theme-day-label": "Label for light/day theme.", "citizen-theme-night-label": "Label for dark/night theme.", "citizen-theme-os-label": "Label for automatic theme (which respects any operating system setting).", - "citizen-theme-exclusion-notice": "Text that informs you that the page is always in light/day mode." + "citizen-theme-exclusion-notice": "Text that informs you that the page is always in light/day mode.", + "citizen-feature-pure-black-name": "Pure black mode", + "citizen-feature-pure-black-description": "Pure black mode", + "citizen-feature-pure-black-0-label": "Off", + "citizen-feature-pure-black-1-label": "On" } diff --git a/includes/SkinCitizen.php b/includes/SkinCitizen.php index 5c60d1ee..1bf2d413 100644 --- a/includes/SkinCitizen.php +++ b/includes/SkinCitizen.php @@ -148,7 +148,8 @@ class SkinCitizen extends SkinMustache { * @param array &$options */ private function buildSkinFeatures( array &$options ) { - $title = $this->getOutput()->getTitle(); + $out = $this->getOutput(); + $title = $out->getTitle(); $metadata = new Metadata( $this ); $skinTheme = new Theme( $this ); @@ -162,6 +163,9 @@ class SkinCitizen extends SkinMustache { // Disable default ToC since it is handled by Citizen $options['toc'] = false; + // Clientprefs feature handling + $out->addHtmlClasses( 'citizen-feature-pure-black-clientpref-0' ); + // Collapsible sections // Load in content pages if ( $title !== null && $title->isContentPage() ) { diff --git a/resources/skins.citizen.preferences/clientPreferences.json b/resources/skins.citizen.preferences/clientPreferences.json index e0586f2a..3648e7e0 100644 --- a/resources/skins.citizen.preferences/clientPreferences.json +++ b/resources/skins.citizen.preferences/clientPreferences.json @@ -2,5 +2,9 @@ "skin-theme": { "options": [ "os", "day", "night" ], "preferenceKey": "citizen-theme" + }, + "citizen-feature-pure-black": { + "options": [ "0", "1" ], + "preferenceKey": "citizen-pure-black" } } diff --git a/resources/skins.citizen.preferences/skins.citizen.preferences.less b/resources/skins.citizen.preferences/skins.citizen.preferences.less index 6ee0cdc1..c6dfc0cd 100644 --- a/resources/skins.citizen.preferences/skins.citizen.preferences.less +++ b/resources/skins.citizen.preferences/skins.citizen.preferences.less @@ -98,6 +98,18 @@ // New clientPrefs styles .citizen-client-prefs { + display: flex; + flex-direction: column; + gap: var( --space-xs ); + + form { + display: grid; + // This is not the best because it does not adapt to the text length but will revisit later + grid-template-columns: 1fr 1fr; + gap: var( --space-xxs ); + text-align: center; + } + &-radio { &__input { // Hide radio button because we use label as button @@ -138,15 +150,7 @@ } #skin-client-prefs-skin-theme { - form { - display: grid; - // This is not the best because it does not adapt to the text length but will revisit later - grid-template-columns: 1fr 1fr; - gap: var( --space-xxs ); - text-align: center; - } - - label { + .citizen-client-prefs-radio__label { background: var( --color-surface-0 ); &[ for='skin-client-pref-skin-theme-value-day' ] { @@ -165,6 +169,25 @@ } } +#skin-client-prefs-citizen-feature-pure-black { + display: none; + + // Display on dark theme + .skin-theme-clientpref-night & { + display: block; + } + + @media ( prefers-color-scheme: dark ) { + .skin-theme-clientpref-os & { + display: block; + } + } + + .citizen-client-prefs-radio__label[ for='skin-client-pref-citizen-feature-pure-black-value-1' ] { + background-color: #000; + } +} + @media ( hover: hover ) { .citizen-pref:hover .citizen-pref__button .citizen-ui-icon::before { transform: rotate3d( 0, 0, 1, 90deg ); diff --git a/resources/skins.citizen.preferences/templates/preferences.mustache b/resources/skins.citizen.preferences/templates/preferences.mustache index 98774e8b..9503f3c3 100644 --- a/resources/skins.citizen.preferences/templates/preferences.mustache +++ b/resources/skins.citizen.preferences/templates/preferences.mustache @@ -11,7 +11,7 @@