Added Dark Mode support to option tables

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

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

docs/index.md

@@ -35,10 +35,11 @@ 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, two values are supported:
+It is possible to configure the color scheme used by the extension using the `antsibull_ext_color_scheme` configuration. Currently, three values are supported:
 
 1. `default`: the default colors.
-2. `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-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.
 
 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

@@ -57,6 +57,7 @@
 _AVAILABLE_COLOR_SCHEMES = [
     "none",
     "default",
+    "default-autodark",
 ]
 
 

src/sphinx_antsibull_ext/colors-default-autodark.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

@@ -35,5 +35,6 @@ build_css() {
 
 build_css antsibull-minimal
 build_css colors-default
+build_css colors-default-autodark
 
 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

@@ -0,0 +1,71 @@
+// 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
+
+: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;
+
+  // 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;
+
+  @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;
+
+  }
+}