lkml.org 
[lkml]   [2021]   [Dec]   [7]   [last100]   RSS Feed
Views: [wrap][no wrap]   [headers]  [forward] 
 
Messages in this thread
    Patch in this message
    /
    From
    Subject[PATCH v4 4/4] docs: add support for RTD dark mode
    Date
    This is actually an overlay on the top of the RTD theme, which
    requires to include first the RTD theme.

    It should be noticed that, when the dark theme is used, the
    DOCS_CSS files won't be the last CSS themes. So, it won't
    override the dark.css style by default. So, it is needed
    to force the them override with "!important".

    This small script, for instance, produces a nice output with
    the RTD dark theme:

    DOCS_THEME=sphinx_rtd_dark_mode
    cat << EOF > dark_override.css
    html body {
    font-family: arial,helvetica,sans-serif;
    }
    html[data-theme='dark'] body {
    color: white !important;
    }
    html[data-theme='dark'] .sig-name {
    color: green !important;
    }
    html[data-theme='dark'] .wy-menu-vertical a {
    color: #ffcc00 !important;
    }
    html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3 {
    color: #ffcc00 !important;
    }
    html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 {
    color: #ffcc00 !important;
    }
    html[data-theme="dark"] h7, html[data-theme="dark"] h8, html[data-theme="dark"] h9 {
    color: #ffcc00 !important;
    }
    html[data-theme="dark"] .wy-nav-content a, html[data-theme="dark"] .wy-nav-content a:visited {
    color: #ffcc00 !important;
    }
    EOF

    make DOCS_CSS=dark_override.css DOCS_THEME=sphinx_rtd_dark_mode htmldocs

    Signed-off-by: Mauro Carvalho Chehab <mchehab+huawei@kernel.org>
    ---

    See [PATCH v4 0/4] at: https://lore.kernel.org/all/cover.1638870323.git.mchehab+huawei@kernel.org/

    Documentation/conf.py | 15 +++++++-
    .../sphinx-static/theme_overrides.css | 16 +-------
    .../sphinx-static/theme_rtd_colors.css | 37 +++++++++++++++++++
    3 files changed, 53 insertions(+), 15 deletions(-)
    create mode 100644 Documentation/sphinx-static/theme_rtd_colors.css

    diff --git a/Documentation/conf.py b/Documentation/conf.py
    index c8efe82d1404..f07f2e9b9f2c 100644
    --- a/Documentation/conf.py
    +++ b/Documentation/conf.py
    @@ -215,7 +215,7 @@ html_css_files = []
    if "DOCS_THEME" in os.environ:
    html_theme = os.environ["DOCS_THEME"]

    -if html_theme == 'sphinx_rtd_theme':
    +if html_theme == 'sphinx_rtd_theme' or html_theme == 'sphinx_rtd_dark_mode':
    # Read the Docs theme
    try:
    import sphinx_rtd_theme
    @@ -227,6 +227,19 @@ if html_theme == 'sphinx_rtd_theme':
    html_css_files = [
    'theme_overrides.css',
    ]
    +
    + # Read the Docs dark mode override theme
    + if html_theme == 'sphinx_rtd_dark_mode':
    + try:
    + import sphinx_rtd_dark_mode
    + extensions.append('sphinx_rtd_dark_mode')
    + except ImportError:
    + html_theme == 'sphinx_rtd_theme'
    +
    + if html_theme == 'sphinx_rtd_theme':
    + # Add color-specific RTD normal mode
    + html_css_files.append('theme_rtd_colors.css')
    +
    except ImportError:
    html_theme = 'classic'

    diff --git a/Documentation/sphinx-static/theme_overrides.css b/Documentation/sphinx-static/theme_overrides.css
    index 459ec5b29d68..f6f2b941a5d6 100644
    --- a/Documentation/sphinx-static/theme_overrides.css
    +++ b/Documentation/sphinx-static/theme_overrides.css
    @@ -1,14 +1,14 @@
    /* -*- coding: utf-8; mode: css -*-
    *
    * Sphinx HTML theme customization: read the doc
    - *
    + * Please don't add any color definition here, as the theme should
    + * work for both normal and dark modes.
    */

    /* Improve contrast and increase size for easier reading. */

    body {
    font-family: serif;
    - color: black;
    font-size: 100%;
    }

    @@ -16,17 +16,8 @@ h1, h2, .rst-content .toctree-wrapper p.caption, h3, h4, h5, h6, legend {
    font-family: sans-serif;
    }

    -.wy-menu-vertical li.current a {
    - color: #505050;
    -}
    -
    -.wy-menu-vertical li.on a, .wy-menu-vertical li.current > a {
    - color: #303030;
    -}
    -
    div[class^="highlight"] pre {
    font-family: monospace;
    - color: black;
    font-size: 100%;
    }

    @@ -104,13 +95,10 @@ div[class^="highlight"] pre {
    /* Menu selection and keystrokes */

    span.menuselection {
    - color: blue;
    font-family: "Courier New", Courier, monospace
    }

    code.kbd, code.kbd span {
    - color: white;
    - background-color: darkblue;
    font-weight: bold;
    font-family: "Courier New", Courier, monospace
    }
    diff --git a/Documentation/sphinx-static/theme_rtd_colors.css b/Documentation/sphinx-static/theme_rtd_colors.css
    new file mode 100644
    index 000000000000..55b6e1c3664b
    --- /dev/null
    +++ b/Documentation/sphinx-static/theme_rtd_colors.css
    @@ -0,0 +1,37 @@
    +/* -*- coding: utf-8; mode: css -*-
    + *
    + * Sphinx HTML theme customization: color settings for RTD (non-dark) theme
    + *
    + */
    +
    +/* Improve contrast and increase size for easier reading. */
    +
    +body {
    + color: black;
    +}
    +
    +.wy-menu-vertical li.current a {
    + color: #505050;
    +}
    +
    +.wy-menu-vertical li.on a, .wy-menu-vertical li.current > a {
    + color: #303030;
    +}
    +
    +div[class^="highlight"] pre {
    + color: black;
    +}
    +
    +@media screen {
    +
    + /* Menu selection and keystrokes */
    +
    + span.menuselection {
    + color: blue;
    + }
    +
    + code.kbd, code.kbd span {
    + color: white;
    + background-color: darkblue;
    + }
    +}
    --
    2.33.1
    \
     
     \ /
      Last update: 2021-12-07 10:53    [W:38.140 / U:0.008 seconds]
    ©2003-2020 Jasper Spaans|hosted at Digital Ocean and TransIP|Read the blog|Advertise on this site