Commit a6fb8b5a authored by Mauro Carvalho Chehab's avatar Mauro Carvalho Chehab Committed by Jonathan Corbet
Browse files

docs: add support for RTD dark mode 



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: default avatarMauro Carvalho Chehab <mchehab+huawei@kernel.org>
Link: https://lore.kernel.org/r/90d316e055ef7f4c9021b9eada8f8d3b2e750a66.1638870323.git.mchehab+huawei@kernel.org


Signed-off-by: default avatarJonathan Corbet <corbet@lwn.net>
parent ffc901b4

Documentation/conf.py

+14 −1
Original line number Diff line number Diff line
@@ -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'

Documentation/sphinx-static/theme_overrides.css

+2 −14
Original line number Diff line number Diff line 
/* -*- 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

    }

Documentation/sphinx-static/theme_rtd_colors.css

0 → 100644
+37 −0
Original line number Diff line number Diff line 
/* -*- 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;

    }

}