feat: update styling

litestar-org · Nov 4, 2023 · 09d6313 · 09d6313
1 parent 2404340
commit 09d6313
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/litestar_sphinx_theme/style.css b/litestar_sphinx_theme/style.css
@@ -1,6 +1,14 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --litestar-blue: #202235;
+  --litestar-gold: #EDB641;
+  --litestar-yellow: #FFD480;
+  --litestar-gray: #DCDFE4;
+  --litestar-light: #ffffff;
+  --litestar-dark: #202020;
+}
 
 [aria-expanded="true"] .menu-state-indicator  {
     transform: rotate(-180deg);
@@ -10,8 +18,6 @@
     transition: transform .2s ease;
 }
 
-
-
 table.docutils {
   clear: left;
   float: left;
@@ -21,7 +27,6 @@ table.docutils {
 /* theme customization */
 
 html[data-theme="dark"] {
-  --litestar-gray: #DCDFE4;
   --color-background-primary: #18181b;
   --color-background-secondary: #27272a;
   --pst-color-on-background: #27272a;
@@ -31,7 +36,6 @@ html[data-theme="dark"] {
 }
 
 html[data-theme="light"] {
-  --litestar-blue: #202235;
   --color-background-primary: #f8f9fb;
   --color-background-secondary: #fff;
   --pst-color-text-muted: #111827;
@@ -41,10 +45,17 @@ html[data-theme="light"] {
 html[data-theme="light"],
 html[data-theme="dark"] {
   --pst-color-background: var(--color-background-primary);
-  --litestar-gold: #EDB641;
   --pst-color-primary: var(--litestar-gold);
 }
 
+html[data-theme="dark"] {
+  --pst-color-secondary: var(--litestar-light);
+}
+
+html[data-theme="light"] {
+  --pst-color-secondary: var(--litestar-dark);
+}
+
 h1, h2 {
   color: unset;
 }

diff --git a/litestar_sphinx_theme/theme/static/litestar-sphinx-theme.css b/litestar_sphinx_theme/theme/static/litestar-sphinx-theme.css
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,7 +7,12 @@ module.exports = {
     theme: {
         extend: {
             colors: {
-                "litestar-gold": "#EDB641"
+                "litestar-blue": "#202235",
+                "litestar-gold": "#EDB641",
+                "litestar-yellow": "#FFD480",
+                "litestar-gray": "#DCDFE4",
+                "litestar-light": "#ffffff",
+                "litestar-dark": "#202020",
             }
         }
     }