feat: css variables (#1415)

Author: zodwick

docs/extra/style.css

@@ -1,6 +1,6 @@
 :root {
   --bg-color: #080a0c;
-  --bg-color2:#13161a ;
+  --bg-color2: #13161a;
   --bg-color3: black;
   --text-color: #eeeeee;
   --link-color: #eac874;
@@ -11,13 +11,27 @@
   --header-bg-color: var(--bg-color2);
   --font-color-white: white;
   --md-typeset-a-color: #eac874 !important;
+
+  /* changing default colors */
+
+  /* Primary color shades */
+  /* --md-primary-fg-color: #eac874;
+  --md-primary-fg-color--light: #eac874;
+  --md-primary-fg-color--dark: #eac874; */
+  /* --md-primary-bg-color: var(--bg-color); */
+  /* --md-primary-bg-color--light: var(--bg-color2); */
+
+  /* // Accent color shades */
+  --md-accent-fg-color:#9c864e;
+  /* --md-accent-fg-color--transparent: var(--link-hover-color);
+  --md-accent-bg-color: var(--nav-active-color);
+  --md-accent-bg-color--light: var(--link-color); */
 }
 
 .md-tabs__link:hover {
   color: var(--link-hover-color) !important;
 }
 
-
 body {
   background-color: var(--bg-color) !important;
   color: var(--text-color);
@@ -39,8 +53,6 @@ body {
   box-shadow: none !important;
 }
 
-
-
 .md-search__scrollwrap {
   background: var(--bg-color) !important;
   color: var(--font-color-white) !important;
@@ -171,12 +183,9 @@ h1 {
   color: var(--link-hover-color) !important;
 }
 
-
-
-
 /* Width of the scrollbar */
 ::-webkit-scrollbar {
-  width: 3px;  
+  width: 3px;
 }
 
 ::-webkit-scrollbar-track {
@@ -191,4 +200,4 @@ h1 {
 
 ::-webkit-scrollbar-thumb:hover {
   background: #616161; /* Thumb color on hover */
-}
+}

mkdocs.yml

@@ -77,6 +77,7 @@ theme:
   favicon: _static/favicon.ico
   palette:
     scheme: slate
+    primary: custom
     accent: white
   features:
     - content.tabs.link