Version 2.3.0 release

maximilionus · May 4, 2022 · 25ca603 · 25ca603
2 parents 5a34113 + b74eb98
commit 25ca603
Show file tree

Hide file tree

Showing 4 changed files with 358 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,11 @@
 # Python Docs - Dark Theme: Changelog
 
 
+## 2.3.0 - 2022.05.04
+### Added
+- New [Adaptive theme](./python_docs_dark_adaptive.user.css) variant. Activation depends on selected web browser color scheme.
+
+
 ## 2.2.1 - 2022.04.13
 ### Fixed
 - Text color for `div.body` element

diff --git a/README.md b/README.md
@@ -11,7 +11,11 @@ This repository contains the userstyle dark theme for python documentation and o
 
 ## 📦 Installation
 1. 🧩 Ensure that **Stylus** extension ([Chrome](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne), [Firefox](https://addons.mozilla.org/ru/firefox/addon/styl-us/)) is installed in your browser
-2. ⬇️ [Install The Usercss](https://github.com/maximilionus/python_docs_dark/raw/master/python_docs_dark.user.css)
+2. ✔️ Select one of the theme variants below:
+   - [⬇️ Adaptive][gh-raw-adaptive]
+   - [⬇️ Default][gh-raw-default]
+
+   > **Adaptive** theme activation depends on selected web browser color scheme, while **Default** one will always be active
 
 ## ☄️ Supported Domains
 Here's list of domains that are currenlty supported by this userstyle.
@@ -20,3 +24,8 @@ Here's list of domains that are currenlty supported by this userstyle.
 - packaging.python.org
 
 > If you know of other domains that inherited the style from docs.python.org, you can notify me by [creating the new issue](https://github.com/maximilionus/python_docs_dark/issues/new?labels=add%20to%20supported%20pages)
+
+
+<!-- REFERENCE LINKS -->
+[gh-raw-adaptive]: https://github.com/maximilionus/python_docs_dark/raw/master/python_docs_dark_adaptive.user.css (Raw adaptive theme)
+[gh-raw-default]: https://github.com/maximilionus/python_docs_dark/raw/master/python_docs_dark.user.css (Raw default theme)
diff --git a/python_docs_dark.user.css b/python_docs_dark.user.css
@@ -4,7 +4,7 @@
 @homepageURL    https://github.com/maximilionus/python_docs_dark
 @updateURL      https://github.com/maximilionus/python_docs_dark/raw/master/python_docs_dark.user.css
 @license        MIT
-@version        2.2.1
+@version        2.3.0
 @description    Dark theme for python documentation pages
 @author         maximilionus <[email protected]>
 ==/UserStyle== */

diff --git a/python_docs_dark_adaptive.user.css b/python_docs_dark_adaptive.user.css
@@ -0,0 +1,342 @@
+/* ==UserStyle==
+@name           Python Docs - Dark Theme (Adaptive)
+@namespace      https://github.com/maximilionus
+@homepageURL    https://github.com/maximilionus/python_docs_dark
+@updateURL      https://github.com/maximilionus/python_docs_dark/raw/master/python_docs_dark_adaptive.user.css
+@license        MIT
+@version        2.3.0
+@description    Dark theme for python documentation pages, activation depends on selected web browser color scheme
+@author         maximilionus <[email protected]>
+==/UserStyle== */
+@-moz-document domain("docs.python.org"), domain("packaging.python.org") {
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --background-dark: #181818;
+            --background-light: #262626;
+            --background-gray: #303030;
+            --text-normal: #b5b5b5;
+            --text-light: #d9d9d9;
+            --text-code-general: #bfbfbf;
+        }
+
+        ::-webkit-scrollbar {
+            width: 10px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background-color: var(--background-light);
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background-color:  #424242;
+            border-radius: 4px;
+        }
+
+        .mobile-nav {
+            background-color: var(--background-light);
+            color: var(--text-normal)
+        }
+
+        .menu-wrapper {
+            background-color: var(--background-dark);
+        }
+
+        .menu a {
+            color: var(--text-normal);
+        }
+
+        .toggler__label {
+            border-color: var(--background-dark);
+        }
+
+        div#sidebarbutton {
+            color: #6d6d6d !important;
+            background-color: var(--background-light) !important;
+        }
+
+        div#sidebarbutton:hover {
+            color: #9b9b9b !important;
+            background-color: #535353 !important;
+        }
+
+        input, select {
+            color: var(--text-normal);
+            background-color: var(--background-light);
+            border: 1px solid #272727;
+        }
+
+        form.inline-search input,
+        div.sphinxsidebar input {
+            border: 1px solid #272727;
+        }
+
+        html,
+        body,
+        ul,
+        div.related,
+        div.sphinxsidebar,
+        div.warning,
+        div.document {
+            background-color: var(--background-dark);
+        }
+
+        div.topic,
+        .nav-content .search input[type=submit] {
+            border: 0px;
+            background-color: var(--background-gray);
+        }
+
+        div {
+            color: var(--text-normal);
+            background-color: var(--background-dark);
+        }
+
+        p {
+            color: var(--text-normal);
+        }
+
+        div.related a {
+            color: var(--text-normal);
+        }
+
+        div.sphinxsidebar h3 a {
+            color: var(--text-light);
+        }
+
+        div.sphinxsidebar h3,
+        div.sphinxsidebar h4 {
+            color: var(--text-light);
+        }
+
+        div.sphinxsidebar a {
+            color: var(--text-normal);
+        }
+
+        div.body {
+            color: var(--text-light);
+            background-color: inherit;
+        }
+
+        div.sidebar {
+            background-color: var(--background-light);
+            border: 2px solid var(--background-gray);
+        }
+
+        div.body h1,
+        div.body h2,
+        div.body h3,
+        div.body h4,
+        div.body h5,
+        div.body h6 {
+            color: var(--text-light);
+            background-color: var(--background-dark);
+        }
+
+        div.body pre {
+            color: var(--text-normal);
+            background-color: var(--background-light);
+            border: 2px solid var(--background-gray);
+        }
+
+        div.seealso,
+        th,
+        dl.field-list > dt {
+            background-color: var(--background-light);
+        }
+
+        div.note {
+            background-color: var(--background-light);
+            border: 1px solid #5d5d5d;
+        }
+
+        div.body div.seealso {
+            border: 2px solid var(--background-gray);
+        }
+
+        span.pre {
+            color: var(--text-code-general);
+            background-color: var(--background-gray);
+            border: 0.4px solid var(--background-gray);
+            border-radius: 5px;
+        }
+
+        span.highlighted {
+            color: #0f0f0f;
+            background-color:#fff08c;
+            border: 0.4px solid #fff08c;
+            border-radius: 5px;
+        }
+
+        span.copybutton {
+            color: #64a576 !important;
+        }
+
+        dt:target {
+            color: var(--text-light);
+            background-color: var(--background-gray);
+        }
+
+        table.docutils td,
+        table.docutils th {
+            background-color: var(--background-light);
+            border: 1px solid #5f5f5f !important;
+        }
+
+        code,
+        tt,
+        .note code,
+        .note tt {
+            background-color: var(--background-gray);
+        }
+
+        .version_switcher_placeholder,
+        .language_switcher_placeholder,
+        .nav-content
+        {
+            background-color: var(--background-dark);
+            border: 2px solid var(--background-gray);
+            border-radius: 5px;
+        }
+
+        .language_switcher_placeholder select, .version_switcher_placeholder select {
+            background-color: var(--background-dark);
+            border: none;
+        }
+
+        .highlight .o {
+            color: #bfbfbf;
+        }
+
+        .highlight .go {
+            color: var(--text-normal);
+        }
+
+        .highlight .n {
+            color: var(--text-light);
+        }
+
+        .highlight .nf {
+            color: #e83b7c;
+        }
+
+        .highlight .nn {
+            color: #8f8fff;
+        }
+
+        .highlight .nc {
+            color: #c28eff;
+        }
+
+        .highlight .vm {
+            color: #ffa4f3;
+        }
+
+        .highlight .nd {
+            color: #ffc4c4;
+        }
+
+        .highlight .k {
+            color: #34b75a;
+        }
+
+        .highlight .kt {
+            color: #e6572e;
+        }
+
+        .highlight .kn {
+            color: #2da74f;
+        }
+
+        .highlight .cm {
+            color: #46a7bf;
+        }
+
+        .highlight .nb {
+            color: #16d84e;
+        }
+
+        .highlight .fm {
+            color: #54afda;
+        }
+
+        .highlight .bp {
+            color: #6ed88c;
+        }
+
+        .highlight .s {
+            color: #72a8de;
+        }
+
+        .highlight .s1 {
+            color: #59acff;
+        }
+
+        .highlight .s2 {
+            color: #a6d2ff;
+        }
+
+        .highlight .se {
+            color: #f3a68f;
+        }
+
+        .highlight .sd {
+            color: #5b9de0;
+        }
+
+        .highlight .nt {
+            color: #e64a7d;
+        }
+
+        .highlight .mi {
+            color: #34c17b;
+        }
+
+        .highlight .mf {
+            color: #2cb772;
+        }
+
+        .highlight .ow {
+            color: #00b534;
+        }
+
+        .highlight .c1 {
+            color: #59b6ce;
+        }
+
+        .highlight .ne {
+            color: #77bf8b;
+        }
+
+        .highlight .cp {
+            color: #45ca6b;
+        }
+
+        .highlight .cpf {
+            color: #61c0d8;
+        }
+
+        .highlight .gh {
+            color: #8787da;
+        }
+
+        .highlight .gr {
+            color: #ff6b97;
+        }
+
+        .highlight .gt {
+            color: #7a7cff;
+        }
+
+        .highlight .gp {
+            color: #8ac98a;
+        }
+
+        .highlight .na {
+            color: #508fce;
+        }
+
+        .warning code {
+            background-color: var(--background-dark);
+        }
+    }
+}