Refactor color schemes to avoid repetition; add dark color scheme

changelogs/fragments/253-darkmode-support-to-option-tables.yaml

@@ -1,3 +1,3 @@
 ---
 minor_changes:
-  - Add support for "dark mode" to the option table styling (https://github.com/ansible-community/antsibull-docs/pull/253).
+  - Add support for "dark mode" to the option table styling (https://github.com/ansible-community/antsibull-docs/pull/253, https://github.com/ansible-community/antsibull-docs/pull/258).

docs/index.md

@@ -35,11 +35,12 @@ The `sphinx_antsibull_ext` [Sphinx extension](https://www.sphinx-doc.org/en/mast
 extensions = ['sphinx.ext.autodoc', 'sphinx.ext.intersphinx', 'notfound.extension', 'sphinx_antsibull_ext']
 ```
 
-It is possible to configure the color scheme used by the extension using the `antsibull_ext_color_scheme` configuration. Currently, three values are supported:
+It is possible to configure the color scheme used by the extension using the `antsibull_ext_color_scheme` configuration. Currently, the following values are supported:
 
 1. `default`: the default colors.
-2. `default-autodark`: the default colors with dark mode support.
-3. `none`: define no colors. You can use this if you want to override all colors by your own definition and thus have no need for the default colors to be included.
+2. `default-dark`: a dark color scheme.
+3. `default-autodark`: the default colors or the dark colors, depending on a `prefers-color-scheme` media query.
+4. `none`: define no colors. You can use this if you want to override all colors by your own definition and thus have no need for the default colors to be included.
 
 The default color scheme can be found in [src/sphinx_antsibull_ext/css/colors-default.scss](https://github.com/ansible-community/antsibull-docs/blob/main/src/sphinx_antsibull_ext/css/colors-default.scss). See the [MDN page on using CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for information on how the color definitions work.
 

src/sphinx_antsibull_ext/assets.py

@@ -58,6 +58,7 @@
     "none",
     "default",
     "default-autodark",
+    "default-dark",
 ]
 
 

src/sphinx_antsibull_ext/colors-default-dark.css.license

@@ -0,0 +1,3 @@
+GNU General Public License v3.0+ (see LICENSES/GPL-3.0-or-later.txt or https://www.gnu.org/licenses/gpl-3.0.txt)
+SPDX-FileCopyrightText: Ansible and contributors
+SPDX-License-Identifier: GPL-3.0-or-later

src/sphinx_antsibull_ext/css/build.sh

@@ -36,5 +36,6 @@ build_css() {
 build_css antsibull-minimal
 build_css colors-default
 build_css colors-default-autodark
+build_css colors-default-dark
 
 grep -Fq '/* INSERT COLOR SCHEME HERE */' ../antsibull-minimal.css || (echo -e "\nERROR: Placeholder not found!" ; exit 1)

src/sphinx_antsibull_ext/css/colors-default-autodark.scss

@@ -2,70 +2,13 @@
 // GNU General Public License v3.0+ (see https://www.gnu.org/licenses/gpl-3.0.txt)
 // SPDX-License-Identifier: GPL-3.0-or-later
 
-:root {
-  // Links
-  --antsibull-links-background: #5bbdbf;
-  --antsibull-links-background-active: #91d9db;
-  --antsibull-links-focus-outline: #204748;
-  --antsibull-links-text: white;
-
-  // Tables
-  --antsibull-table-background-header: #6AB0DE;
-  --antsibull-table-background-even: #E7F2FA;
-  --antsibull-table-background-odd: #FFFFFF;
-  --antsibull-table-border: #000000;
-
-  // Narrow width "table" view that's no longer a table
-  --antsibull-narrowtable-background: #E7F2FA;
+@use 'default-colors-light' as light;
+@use 'default-colors-dark' as dark;
 
-  // Options
-  --antsibull-option-type: purple;
-  --antsibull-option-elements: purple;
-  --antsibull-option-required: red;
-  --antsibull-option-version-added: darkgreen;
-  --antsibull-option-aliases: darkgreen;
-  --antsibull-option-default: blue;
-  --antsibull-option-sample: blue;
-  --antsibull-option-sample-header: black;
-
-  // Attribute support
-  --antsibull-attribute-support-none: red;
-  --antsibull-attribute-support-partial: #a5a500;
-  --antsibull-attribute-support-full: green;
-  --antsibull-attribute-support-na: inherit;
+:root {
+  @include light.colors;
 
   @media (prefers-color-scheme: dark) {
-
-    // Links
-    --antsibull-links-background: #5bbdbf;
-    --antsibull-links-background-active: #91d9db;
-    --antsibull-links-focus-outline: #204748;
-    --antsibull-links-text: white;
-
-    // Tables
-    --antsibull-table-background-header: #48484b;
-    --antsibull-table-background-even: #1c1c1e;
-    --antsibull-table-background-odd: #242426;
-    --antsibull-table-border: #656569;
-
-    // Narrow width "table" view that's no longer a table
-    --antsibull-narrowtable-background: #48484b;
-
-    // Options
-    --antsibull-option-type: #ff93ff;
-    --antsibull-option-elements: #ff93ff;
-    --antsibull-option-required: #ff8282;
-    --antsibull-option-version-added: #71d471;
-    --antsibull-option-aliases: #71d471;
-    --antsibull-option-default: #adadff;
-    --antsibull-option-sample: #adadff;
-    --antsibull-option-sample-header: white;
-
-    // Attribute support
-    --antsibull-attribute-support-none: #ff8282;
-    --antsibull-attribute-support-partial: #b6b600;
-    --antsibull-attribute-support-full: #00cc00;
-    --antsibull-attribute-support-na: inherit;
-
+    @include dark.colors;
   }
 }

src/sphinx_antsibull_ext/css/colors-default-dark.scss

@@ -0,0 +1,9 @@
+// Copyright (c) Ansible and contributors
+// GNU General Public License v3.0+ (see https://www.gnu.org/licenses/gpl-3.0.txt)
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+@use 'default-colors-dark' as dark;
+
+:root {
+  @include dark.colors;
+}

src/sphinx_antsibull_ext/css/colors-default.scss

@@ -2,35 +2,8 @@
 // GNU General Public License v3.0+ (see https://www.gnu.org/licenses/gpl-3.0.txt)
 // SPDX-License-Identifier: GPL-3.0-or-later
 
-:root {
-  // Links
-  --antsibull-links-background: #5bbdbf;
-  --antsibull-links-background-active: #91d9db;
-  --antsibull-links-focus-outline: #204748;
-  --antsibull-links-text: white;
-
-  // Tables
-  --antsibull-table-background-header: #6AB0DE;
-  --antsibull-table-background-even: #E7F2FA;
-  --antsibull-table-background-odd: #FFFFFF;
-  --antsibull-table-border: #000000;
-
-  // Narrow width "table" view that's no longer a table
-  --antsibull-narrowtable-background: #E7F2FA;
+@use 'default-colors-light' as light;
 
-  // Options
-  --antsibull-option-type: purple;
-  --antsibull-option-elements: purple;
-  --antsibull-option-required: red;
-  --antsibull-option-version-added: darkgreen;
-  --antsibull-option-aliases: darkgreen;
-  --antsibull-option-default: blue;
-  --antsibull-option-sample: blue;
-  --antsibull-option-sample-header: black;
-
-  // Attribute support
-  --antsibull-attribute-support-none: red;
-  --antsibull-attribute-support-partial: #a5a500;
-  --antsibull-attribute-support-full: green;
-  --antsibull-attribute-support-na: inherit;
+:root {
+  @include light.colors;
 }

src/sphinx_antsibull_ext/css/default-colors-dark.scss

@@ -0,0 +1,36 @@
+// Copyright (c) Ansible and contributors
+// GNU General Public License v3.0+ (see https://www.gnu.org/licenses/gpl-3.0.txt)
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+@mixin colors {
+  // Links
+  --antsibull-links-background: #5bbdbf;
+  --antsibull-links-background-active: #91d9db;
+  --antsibull-links-focus-outline: #204748;
+  --antsibull-links-text: white;
+
+  // Tables
+  --antsibull-table-background-header: #48484b;
+  --antsibull-table-background-even: #1c1c1e;
+  --antsibull-table-background-odd: #242426;
+  --antsibull-table-border: #656569;
+
+  // Narrow width "table" view that's no longer a table
+  --antsibull-narrowtable-background: #48484b;
+
+  // Options
+  --antsibull-option-type: #ff93ff;
+  --antsibull-option-elements: #ff93ff;
+  --antsibull-option-required: #ff8282;
+  --antsibull-option-version-added: #71d471;
+  --antsibull-option-aliases: #71d471;
+  --antsibull-option-default: #adadff;
+  --antsibull-option-sample: #adadff;
+  --antsibull-option-sample-header: white;
+
+  // Attribute support
+  --antsibull-attribute-support-none: #ff8282;
+  --antsibull-attribute-support-partial: #b6b600;
+  --antsibull-attribute-support-full: #00cc00;
+  --antsibull-attribute-support-na: inherit;
+}

src/sphinx_antsibull_ext/css/default-colors-light.scss

@@ -0,0 +1,36 @@
+// Copyright (c) Ansible and contributors
+// GNU General Public License v3.0+ (see https://www.gnu.org/licenses/gpl-3.0.txt)
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+@mixin colors {
+  // Links
+  --antsibull-links-background: #5bbdbf;
+  --antsibull-links-background-active: #91d9db;
+  --antsibull-links-focus-outline: #204748;
+  --antsibull-links-text: white;
+
+  // Tables
+  --antsibull-table-background-header: #6AB0DE;
+  --antsibull-table-background-even: #E7F2FA;
+  --antsibull-table-background-odd: #FFFFFF;
+  --antsibull-table-border: #000000;
+
+  // Narrow width "table" view that's no longer a table
+  --antsibull-narrowtable-background: #E7F2FA;
+
+  // Options
+  --antsibull-option-type: purple;
+  --antsibull-option-elements: purple;
+  --antsibull-option-required: red;
+  --antsibull-option-version-added: darkgreen;
+  --antsibull-option-aliases: darkgreen;
+  --antsibull-option-default: blue;
+  --antsibull-option-sample: blue;
+  --antsibull-option-sample-header: black;
+
+  // Attribute support
+  --antsibull-attribute-support-none: red;
+  --antsibull-attribute-support-partial: #a5a500;
+  --antsibull-attribute-support-full: green;
+  --antsibull-attribute-support-na: inherit;
+}