From b888ef79dc967ab7afa56efd7dd87820fecbc00c Mon Sep 17 00:00:00 2001 From: Septatrix <24257556+Septatrix@users.noreply.github.com> Date: Mon, 10 May 2021 12:19:39 +0200 Subject: [PATCH 1/7] Add preliminary dark theme implementation --- python_docs_theme/layout.html | 11 ++ python_docs_theme/static/pydoctheme.css | 93 +++++++++++---- python_docs_theme/static/pydoctheme_dark.css | 119 +++++++++++++++++++ python_docs_theme/static/themetoggle.js | 39 ++++++ python_docs_theme/theme.conf | 1 + 5 files changed, 237 insertions(+), 26 deletions(-) create mode 100644 python_docs_theme/static/pydoctheme_dark.css create mode 100644 python_docs_theme/static/themetoggle.js diff --git a/python_docs_theme/layout.html b/python_docs_theme/layout.html index a9a0e6f..abf3664 100644 --- a/python_docs_theme/layout.html +++ b/python_docs_theme/layout.html @@ -59,13 +59,24 @@

{{ _('Navigation') }}

{% block relbar1 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %} {% block relbar2 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %} +{% block relbaritems %} +{%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %} +
  • + {{ searchbox() }} + {{ reldelim2 }} +
    • +{%- endif %} +
  • {{ reldelim2 }}
    • +{% endblock %} {%- block extrahead -%} + {%- if builder != "htmlhelp" %} {%- if not embedded %} + {%- endif -%} {%- endif -%} {{ super() }} diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css index 151f06e..21be22c 100644 --- a/python_docs_theme/static/pydoctheme.css +++ b/python_docs_theme/static/pydoctheme.css @@ -1,7 +1,29 @@ -@import url("default.css"); +@import url('classic.css'); + +/* unset some styles from the classic stylesheet */ +div.document, +div.body, +div.related, +div.body h1, +div.body h2, +div.body h3, +div.body h4, +div.body h5, +div.body h6, +div.sphinxsidebar a, +div.sphinxsidebar p, +div.sphinxsidebar ul, +div.sphinxsidebar h3, +div.sphinxsidebar h3 a, +div.sphinxsidebar h4, +table.docutils td, +table.indextable tr.cap, +pre { + background-color: inherit; + color: inherit; +} body { - background-color: white; margin-left: 1em; margin-right: 1em; } @@ -14,12 +36,12 @@ body { div.related { margin-bottom: 1.2em; padding: 0.5em 0; - border-bottom: 1px solid #ccc; + border-top: 1px solid #ccc; margin-top: 0.5em; } div.related a:hover { - color: #0095C4; + color: #0095c4; } div.related ~ div.related { @@ -27,6 +49,11 @@ div.related ~ div.related { border-bottom: none; } +div.related:first-child { + border-top: 0; + border-bottom: 1px solid #ccc; +} + .related .switchers { display: inline-flex; } @@ -41,13 +68,19 @@ div.related ~ div.related { background-color: white; } -.inline-search { - display: inline; + +div.related ul::after { + content: ''; + clear: both; + display: block; } + +.inline-search, form.inline-search input { display: inline; } -form.inline-search input[type="submit"] { + +form.inline-search input[type='submit'] { width: 40px; } @@ -60,13 +93,15 @@ div.sphinxsidebar { position: sticky; top: 0; max-height: 100vh; - background-color: #eeeeee; + color: #444; + background-color: #eee; border-radius: 5px; line-height: 130%; font-size: smaller; } -div.sphinxsidebar h3, div.sphinxsidebar h4 { +div.sphinxsidebar h3, +div.sphinxsidebar h4 { margin-top: 1.5em; } @@ -86,18 +121,19 @@ div.sphinxsidebarwrapper > ul > li > ul > li { } div.sphinxsidebar a:hover { - color: #0095C4; + color: #0095c4; } form.inline-search input, -div.sphinxsidebar input { - font-family: 'Lucida Grande',Arial,sans-serif; +div.sphinxsidebar input, +div.related input { + font-family: 'Lucida Grande', Arial, sans-serif; border: 1px solid #999999; font-size: smaller; border-radius: 3px; } -div.sphinxsidebar input[type=text] { +div.sphinxsidebar input[type='text'] { max-width: 150px; } @@ -126,7 +162,8 @@ div.body pre { border: 1px solid #ac9; } -div.body div.admonition, div.body div.impl-detail { +div.body div.admonition, +div.body div.impl-detail { border-radius: 3px; } @@ -147,7 +184,7 @@ div.body a:visited { } div.body a:hover { - color: #00B0E4; + color: #00b0e4; } tt, code, pre { @@ -155,15 +192,20 @@ tt, code, pre { font-size: 96.5%; } -div.body tt, div.body code { +div.body tt, +div.body code { border-radius: 3px; } -div.body tt.descname, div.body code.descname { +div.body tt.descname, +div.body code.descname { font-size: 120%; } -div.body tt.xref, div.body a tt, div.body code.xref, div.body a code { +div.body tt.xref, +div.body a tt, +div.body code.xref, +div.body a code { font-weight: normal; } @@ -175,12 +217,14 @@ table.docutils { margin-bottom: 10px; } -table.docutils td, table.docutils th { +table.docutils td, +table.docutils th { border: 1px solid #ddd !important; border-radius: 3px; } -table p, table li { +table p, +table li { text-align: left !important; } @@ -194,7 +238,8 @@ table.docutils td { padding: 0.3em 0.5em; } -table.footnote, table.footnote td { +table.footnote, +table.footnote td { border: 0 !important; } @@ -207,7 +252,7 @@ div.footer { } div.footer a:hover { - color: #0095C4; + color: #0095c4; } .refcount { @@ -218,10 +263,6 @@ div.footer a:hover { color: #229; } -.highlight { - background: none !important; -} - dl > dt span ~ em { font-family: "monospace", monospace; } diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css new file mode 100644 index 0000000..d263f94 --- /dev/null +++ b/python_docs_theme/static/pydoctheme_dark.css @@ -0,0 +1,119 @@ + +/* Browser elements */ +:root { + scrollbar-color: #616161 transparent; + color-scheme: dark light; +} + +html, +body { + background-color: #222; + color: rgba(255, 255, 255, 0.87); +} + +div.related { + color: rgba(255, 255, 255, 0.7); /* classic overwrite */ + border-top-color: #424242; +} + +div.related:first-child { + /* use :first-child because border-color would need !important */ + border-bottom-color: #424242; +} + +/* SIDEBAR */ +div.sphinxsidebar { + background-color: #333; + color: inherit; +} + +#sidebarbutton { + /* important to overwrite style attribute */ + background-color: #555 !important; + color: inherit !important; +} + +div.sidebar { + background-color: #424242; + border-color: #616161; +} + +/* ANCHORS AND HIGHLIGHTS */ +div.body a { + color: #7af; +} + +div.body a:visited { + color: #09e; +} + +a.headerlink:hover { + background-color: #424242; +} + +div.related a { + color: currentColor; +} + +div.footer, +div.footer a { + color: currentColor; /* classic overwrites */ +} + +dt:target, +span.highlighted { + background-color: #616161; +} + +/* Below for most things in text */ + +dl.field-list > dt { + background-color: #434; +} + +table.docutils td, +table.docutils th { + border-color: #616161 !important; +} + +table.docutils th { + background-color: #424242; +} + +.refcount { + color: #afa; +} + +.stableabi { + color: #bbf; +} + +div.body pre { + border-color: #616161; +} + +code { + background-color: #424242; +} + +div.body div.seealso { + background-color: rgba(255, 255, 0, 0.1); +} + +div.warning { + background-color: rgba(255, 0, 0, 0.2); +} + +.warning code { + background-color: rgba(255, 0, 0, 0.5); +} + +div.topic, +div.note { + background-color: rgba(255, 255, 255, 0.1); + border-color: currentColor; +} + +.note code { + background-color: rgba(255, 255, 255, 0.1); +} diff --git a/python_docs_theme/static/themetoggle.js b/python_docs_theme/static/themetoggle.js new file mode 100644 index 0000000..605d042 --- /dev/null +++ b/python_docs_theme/static/themetoggle.js @@ -0,0 +1,39 @@ +let currentTheme = localStorage.getItem('currentTheme') || 'auto' + +const pygmentsDark = document.getElementById('pygments_dark_css') +const pydocthemeDark = document.getElementById('pydoctheme_dark_css') + +const themeOrder = { + light: 'dark', + dark: 'auto', + auto: 'light', +} + +updateTheme() + +function toggleTheme() { + currentTheme = themeOrder[currentTheme] + localStorage.setItem('currentTheme', currentTheme) + updateTheme() +} + +function updateTheme() { + const buttons = Array.from(document.getElementsByClassName('theme-toggle')) + switch (currentTheme) { + case 'light': + pydocthemeDark.media = 'not all' + pygmentsDark.media = 'not all' + buttons.forEach(e => e.value = "Toggle theme (light)") + break; + case 'dark': + pydocthemeDark.media = 'all' + pygmentsDark.media = 'all' + buttons.forEach(e => e.value = "Toggle theme (dark)") + break; + default: + // auto + pydocthemeDark.media = '(prefers-color-scheme: dark)' + pygmentsDark.media = '(prefers-color-scheme: dark)' + buttons.forEach(e => e.value = "Toggle theme (auto)") + } +} diff --git a/python_docs_theme/theme.conf b/python_docs_theme/theme.conf index 11670d3..a011f5b 100644 --- a/python_docs_theme/theme.conf +++ b/python_docs_theme/theme.conf @@ -2,6 +2,7 @@ inherit = default stylesheet = pydoctheme.css?2022.1 pygments_style = default +pygments_dark_style = monokai [options] bodyfont = 'Lucida Grande', Arial, sans-serif From 647a1a3b694e59d664f08a25481b398353478e3c Mon Sep 17 00:00:00 2001 From: Julien Palard Date: Mon, 10 May 2021 16:23:30 +0200 Subject: [PATCH 2/7] Show me the logs. --- .github/workflows/tests.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 824bb0c..61ce649 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -29,6 +29,7 @@ jobs: - name: build docs run: | python3 ./docsbuild-scripts/build_docs.py --quick --build-root ./build_root --www-root ./www --log-directory ./logs --group $(id -g) --skip-cache-invalidation --theme $(pwd) --language en --branch 3.9 + cat logs/docsbuild.log - name: 'Upload' uses: actions/upload-artifact@v2.2.2 with: From 31e888d6065c70fff4bd62e06640bc22000fe28b Mon Sep 17 00:00:00 2001 From: Septatrix <24257556+Septatrix@users.noreply.github.com> Date: Fri, 18 Nov 2022 22:27:54 +0200 Subject: [PATCH 3/7] Fix dark theme issues --- python_docs_theme/layout.html | 11 +-------- python_docs_theme/static/pydoctheme.css | 26 +++++++------------- python_docs_theme/static/pydoctheme_dark.css | 7 +----- 3 files changed, 11 insertions(+), 33 deletions(-) diff --git a/python_docs_theme/layout.html b/python_docs_theme/layout.html index abf3664..f05f166 100644 --- a/python_docs_theme/layout.html +++ b/python_docs_theme/layout.html @@ -37,6 +37,7 @@

    {{ _('Navigation') }}

    {{ reldelim2 }} {%- endif %} +
  • {{ reldelim2 }}
    • {% endblock %} @@ -59,16 +60,6 @@

    {{ _('Navigation') }}

    {% block relbar1 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %} {% block relbar2 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %} -{% block relbaritems %} -{%- if pagename != "search" and builder != "singlehtml" and builder != "htmlhelp" %} -
  • - {{ searchbox() }} - {{ reldelim2 }} -
    • -{%- endif %} -
  • {{ reldelim2 }}
    • -{% endblock %} - {%- block extrahead -%} diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css index 21be22c..18ad610 100644 --- a/python_docs_theme/static/pydoctheme.css +++ b/python_docs_theme/static/pydoctheme.css @@ -34,24 +34,23 @@ body { } div.related { + margin-top: 0.5em; margin-bottom: 1.2em; padding: 0.5em 0; - border-top: 1px solid #ccc; - margin-top: 0.5em; + border-width: 1px; + border-color: #ccc; } -div.related a:hover { - color: #0095c4; +.mobile-nav + div.related { + border-bottom-style: solid; } -div.related ~ div.related { - border-top: 1px solid #ccc; - border-bottom: none; +.document + div.related { + border-top-style: solid; } -div.related:first-child { - border-top: 0; - border-bottom: 1px solid #ccc; +div.related a:hover { + color: #0095c4; } .related .switchers { @@ -62,13 +61,6 @@ div.related:first-child { margin-right: 5px; } -.version_switcher_placeholder, -.language_switcher_placeholder { - padding-left: 5px; - background-color: white; -} - - div.related ul::after { content: ''; clear: both; diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css index d263f94..c101687 100644 --- a/python_docs_theme/static/pydoctheme_dark.css +++ b/python_docs_theme/static/pydoctheme_dark.css @@ -13,12 +13,7 @@ body { div.related { color: rgba(255, 255, 255, 0.7); /* classic overwrite */ - border-top-color: #424242; -} - -div.related:first-child { - /* use :first-child because border-color would need !important */ - border-bottom-color: #424242; + border-color: #424242; } /* SIDEBAR */ From dd5772236307153b1361b0e825f329cebe8df65d Mon Sep 17 00:00:00 2001 From: Septatrix <24257556+Septatrix@users.noreply.github.com> Date: Mon, 10 May 2021 16:38:16 +0200 Subject: [PATCH 4/7] Adjust to responsive changes --- python_docs_theme/static/pydoctheme.css | 16 ++++++++-------- python_docs_theme/static/pydoctheme_dark.css | 6 +++++- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css index 18ad610..69a59df 100644 --- a/python_docs_theme/static/pydoctheme.css +++ b/python_docs_theme/static/pydoctheme.css @@ -16,6 +16,12 @@ div.sphinxsidebar ul, div.sphinxsidebar h3, div.sphinxsidebar h3 a, div.sphinxsidebar h4, +.menu a, +.menu p, +.menu ul, +.menu h3, +.menu h3 a, +.menu h4, table.docutils td, table.indextable tr.cap, pre { @@ -213,6 +219,7 @@ table.docutils td, table.docutils th { border: 1px solid #ddd !important; border-radius: 3px; + padding: 0.3em 0.5em; } table p, @@ -222,12 +229,6 @@ table li { table.docutils th { background-color: #eee; - padding: 0.3em 0.5em; -} - -table.docutils td { - background-color: white; - padding: 0.3em 0.5em; } table.footnote, @@ -465,6 +466,7 @@ dl > dt span ~ em { width: 300px; height: 100%; background-color: #eee; + color: #444444; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); overflow-y: auto; } @@ -484,7 +486,6 @@ dl > dt span ~ em { font-size: 1.3em; } .menu-wrapper h3 { - color: #444444; font-size: 1.4em; } .menu-wrapper h3 + p, @@ -493,7 +494,6 @@ dl > dt span ~ em { } .menu a { font-size: smaller; - color: #444444; text-decoration: none; } .menu ul { diff --git a/python_docs_theme/static/pydoctheme_dark.css b/python_docs_theme/static/pydoctheme_dark.css index c101687..2d574ad 100644 --- a/python_docs_theme/static/pydoctheme_dark.css +++ b/python_docs_theme/static/pydoctheme_dark.css @@ -17,7 +17,7 @@ div.related { } /* SIDEBAR */ -div.sphinxsidebar { +div.sphinxsidebar, .menu-wrapper { background-color: #333; color: inherit; } @@ -112,3 +112,7 @@ div.note { .note code { background-color: rgba(255, 255, 255, 0.1); } + +.mobile-nav { + box-shadow: rgba(255, 255, 255, 0.25) 0 0 2px 0; +} \ No newline at end of file From 3bf3806b1f829b29ed5664b6772c1e9d163f270c Mon Sep 17 00:00:00 2001 From: Septatrix <24257556+Septatrix@users.noreply.github.com> Date: Fri, 18 Nov 2022 22:31:44 +0200 Subject: [PATCH 5/7] Fix more bugs with the new mobile view --- python_docs_theme/layout.html | 50 +++++++----- python_docs_theme/static/caret-down.svg | 1 - python_docs_theme/static/pydoctheme.css | 85 ++++++++++---------- python_docs_theme/static/pydoctheme_dark.css | 8 ++ python_docs_theme/static/themetoggle.js | 31 ++----- 5 files changed, 89 insertions(+), 86 deletions(-) delete mode 100644 python_docs_theme/static/caret-down.svg diff --git a/python_docs_theme/layout.html b/python_docs_theme/layout.html index f05f166..3b28497 100644 --- a/python_docs_theme/layout.html +++ b/python_docs_theme/layout.html @@ -37,7 +37,7 @@

    {{ _('Navigation') }}

    {{ reldelim2 }} {%- endif %} -
  • {{ reldelim2 }}
    • +
  • {{ themeselector() }}{{ reldelim2 }}
    • {% endblock %} @@ -57,6 +57,17 @@

    {{ _('Navigation') }}

    {%- endif %} {%- endmacro %} +{%- macro themeselector() %} + +{%- endmacro %} + {% block relbar1 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %} {% block relbar2 %} {% if builder != 'qthelp' %} {{ relbar() }} {% endif %} {% endblock %} @@ -84,28 +95,31 @@

    {{ _('Navigation') }}

    -