Refactored the code, support for packaging.python.org

Author: maximilionus

CHANGELOG.md

@@ -3,11 +3,17 @@
 
 ## **1.1.0** - Dev
 ### Added
+- Support for domain `packaging.python.org`
 - Support for syntax highlighting compatibility with dark colors
 
 ### Fixed
 - `css` syntax errors
 - Background color for `.note tt`
+- Color for variable `--background-gray`
+
+### Changed
+- Refactored the `css` stylesheet
+- Remade the README file
 
 
 ## **1.0.1** - 2020.11.11

README.md

@@ -2,14 +2,22 @@
     <b>Python Docs</b><br>
     Dark Theme
 </h1>
-<h2 align="center">
-    <div><code>.user.css</code></div>
-    <br>
-    <div>📦 <a href="https://github.com/maximilionus/python_docs_dark/raw/master/python_docs_dark.user.css">INSTALL</a> 📦</div>
-</h2>
-<br><br>
-
 <details align="center">
     <summary>Preview Image</summary>
     <img src="./images/preview.jpg">
 </details>
+
+## About
+This repository contains the userstyle dark theme for python documentation and other style-inherited web pages.
+
+## Installation
+1. Ensure that **Stylish** extension ([Chrome](https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe), [Firefox](https://addons.mozilla.org/ru/firefox/addon/stylish/)) is installed in your browser
+2. 📦 [Install the usercss](https://github.com/maximilionus/python_docs_dark/raw/master/python_docs_dark.user.css)
+
+## Supported Domains
+Here's list of domains that are currenlty supported by this userstyle.
+
+- docs.python.org
+- packaging.python.org
+
+> If you know of other domains that inherited the style from docs.python.org, you can notify me via [Issues](https://github.com/maximilionus/python_docs_dark/issues)

python_docs_dark.user.css

@@ -8,11 +8,11 @@
 @description    Dark theme for docs.python.org
 @author         maximilionus <[email protected]>
 ==/UserStyle== */
-@-moz-document domain("docs.python.org") {
+@-moz-document domain("docs.python.org"), domain("packaging.python.org") {
     :root {
         --background-dark: #181818;
         --background-light: #262626;
-        --background-gray: #404040;
+        --background-gray: #303030;
         --text-normal: #b5b5b5;
         --text-light: #d9d9d9;
         --text-code-general: #ddcbb4;
@@ -32,15 +32,13 @@
         border-radius: 4px;
     }
 
-    html {
-        background: var(--background-dark);
-    }
-
-    body {
-        background: var(--background-dark);
-    }
-
-    ul {
+    html,
+    body,
+    ul,
+    div.related,
+    div.sphinxsidebar,
+    div.warning,
+    div.document {
         background: var(--background-dark);
     }
 
@@ -53,18 +51,10 @@
         color: var(--text-normal);
     }
 
-    div.related {
-        background-color: var(--background-dark);
-    }
-
     div.related a {
         color: var(--text-normal);
     }
 
-    div.sphinxsidebar {
-        background: var(--background-dark);
-    }
-
     div.sphinxsidebar h3 a {
         color: var(--text-light);
     }
@@ -115,10 +105,6 @@
         background: var(--background-light);
     }
 
-    div.warning {
-        background: var(--background-light);
-    }
-
     span.pre {
         color: var(--text-code-general);
         background: var(--background-gray);
@@ -143,14 +129,9 @@
         background: var(--background-light);
     }
 
-    code {
-        background: var(--background-gray);
-    }
-
-    tt {
-        background-color: var(--background-gray);
-    }
-
+    code,
+    tt,
+    .note code,
     .note tt {
         background-color: var(--background-gray);
     }
@@ -171,6 +152,10 @@
         color: #e6572e;
     }
 
+    .highlight .kn {
+        color: #2da74f;
+    }
+
     .highlight .cm {
         color: #46a7bf;
     }