Dark mode increased contrast, created pyos variables, added custom css to live rebuild watcher

Author: sneakers-the-rat

_static/pyos.css

@@ -1,3 +1,16 @@
+/* PyOS-specific vars :) */
+:root {
+    --pyos-color-primary: #703c87;
+    --pyos-color-secondary: #8045e5;
+    --pyos-color-secondary-highlight: #591bc2;
+    --pyos-color-tertiary: #A66C98;
+    --pyos-color-dark: #542568;
+    --pyos-color-light: #DAABCF;
+
+    /* Darkmode Adjustments*/
+    --pyos-dm-color-primary: #C483E0;
+}
+
 html, body {
     font-size: 1.0rem;
 }
@@ -37,8 +50,8 @@ h2, h3, h4 {
 h1 {
     margin-top: 10px;
     margin-bottom: 40px;
-    font-family: 'Itim'!important;
-    color: #542568;
+    font-family: 'Itim' !important;
+    color: var(--pyos-h1-color);
 }
 h2 {
     margin-top: 80px;
@@ -66,6 +79,16 @@ figcaption {
     font-size: .9em;
 }
 
+/* Navbar */
+/* 
+Don't fill all vertical space beneath TOC, which causes 
+readthedocs version selector to fall off the page and the
+ugly scrollbar to show all the time
+*/
+.bd-sidebar-primary .sidebar-primary-items__end {
+  margin-bottom: unset;
+  margin-top: unset;
+}
 
 /* Tutorial block page */
 .left-div {
@@ -139,17 +162,17 @@ figcaption {
 
 
 html[data-theme=light] {
-    --pst-color-primary: #703c87;
+    --pst-color-primary: var(--pyos-color-primary);
     --pst-color-primary-text: #fff;
     --pst-color-primary-highlight: #053f49;
     --sd-color-primary: var(--pst-color-primary);
     --sd-color-primary-text: var(--pst-color-primary-text);
     --sd-color-primary-highlight: var(--pst-color-primary-highlight);
     --sd-color-primary-bg: #d0ecf1;
     --sd-color-primary-bg-text: #14181e;
-    --pst-color-secondary: #8045e5;
+    --pst-color-secondary: var(--pyos-color-secondary);
     --pst-color-secondary-text: #fff;
-    --pst-color-secondary-highlight: #591bc2;
+    --pst-color-secondary-highlight: var(--pyos-color-secondary-highlight);
     --sd-color-secondary: var(--pst-color-secondary);
     --sd-color-secondary-text: var(--pst-color-secondary-text);
     --sd-color-secondary-highlight: var(--pst-color-secondary-highlight);
@@ -165,5 +188,13 @@ html[data-theme=light] {
     --sd-color-success-bg-text: #14181e;
     --pst-color-info: #A66C98; /* general admonition */
     --pst-color-info-bg: #eac8e2;
-    --pst-heading-color: #542568;
+    --pst-heading-color: var(--pyos-color-dark);
+    --pyos-h1-color: var(--pyos-color-dark);
+}
+
+html[data-theme=dark] {
+    --pst-color-primary: var(--pyos-dm-color-primary);
+    --pst-color-link: var(--pyos-color-light);
+    --pst-color-link-hover: var(--pyos-dm-color-primary);
+    --pyos-h1-color: var(--pyos-color-light);
 }

noxfile.py

@@ -5,7 +5,8 @@
 
 nox.options.reuse_existing_virtualenvs = True
 
-build_command = ["-b", "html", ".", "_build/html"]
+OUTPUT_DIR = "_build"
+build_command = ["-b", "html", ".", "/".join([OUTPUT_DIR, "/html"])]
 
 @nox.session
 def docs(session):
@@ -24,10 +25,30 @@ def docs_live(session):
         "build_assets",
         "tmp",
     ]
+    # Explicitly include custom CSS in each build since
+    # sphinx doesn't think _static files should change since,
+    # well, they're static.
+    # Include these as the final `filenames` argument
+    AUTOBUILD_INCLUDE = [
+        "_static/pyos.css"
+    ]
+
+    # ----------------
+    # Assemble command
     cmd = ["sphinx-autobuild"]
     for folder in AUTOBUILD_IGNORE:
         cmd.extend(["--ignore", f"*/{folder}/*"])
-    cmd.extend(build_command + session.posargs)
+    
+    cmd.extend(build_command)
+
+    # use positional arguments if we have them
+    if len(session.posargs) > 0:
+        cmd.extend(session.posargs)
+    # otherwise use default output and include directory
+    else:
+        cmd.extend(AUTOBUILD_INCLUDE)
+
+    # ----------------
     session.run(*cmd)
 
 docs_dir = os.path.join("_build", "html")