Update custom.css

Signed-off-by: 0xbentobyte <[email protected]>

css/custom.css

@@ -4,16 +4,9 @@
 :root {
     --ifm-color-scheme:                                                    dark;
 
-    --ifm-color-primary:                                                #000000;
-    --ifm-color-secondary:                                              #1C1C1C;
-    --ifm-color-success:                                                #00a400;
-    --ifm-color-info:                                                   #54c7ec;
-    --ifm-color-warning:                                                #ffba00;
-    --ifm-color-danger:                                                 #fa383e;
-
     --ifm-global-border-width:                                              1px;
     --ifm-global-radius:                                                 0.4rem;
-    --ifm-global-spacing:                                                  1rem;
+    --ifm-global-spacing:                                                  2rem;
     --ifm-hover-overlay:                                        rgba(0,0,0,.05);
 
     --ifm-font-color-base:                             var(--ifm-color-content);
@@ -47,9 +40,9 @@
   --ifm-heading-line-height: 1.25;
 
   --ifm-h1-font-size: 1.5rem;
-  --ifm-h2-font-size: 1.25rem;
-  --ifm-h3-font-size: 1.rem;
-  --ifm-h4-font-size: 1rem;
+  --ifm-h2-font-size: 1.3rem;
+  --ifm-h3-font-size: 1.3rem;
+  --ifm-h4-font-size: 1.1rem;
   --ifm-h5-font-size: 0.875rem;
   --ifm-h6-font-size: 0.85rem;
 }
@@ -74,7 +67,7 @@ h6 {
 }
 article {
   max-width: 900px;
-  margin-left: auto;
+  margin-left: 150px;
   margin-right: auto;
 }
 @each $color in (primary, secondary, success, info, warning, danger) {
@@ -83,6 +76,49 @@ article {
   }
 }
 html[data-theme='dark'] {
-  --ifm-background-color: #0E0E0E;
+  --ifm-color-scheme: dark;
+
+  --ifm-color-emphasis-0: var(--ifm-color-gray-1000);
+  --ifm-color-emphasis-100: var(--ifm-color-gray-900);
+  --ifm-color-emphasis-200: var(--ifm-color-gray-800);
+  --ifm-color-emphasis-300: var(--ifm-color-gray-700);
+  --ifm-color-emphasis-400: var(--ifm-color-gray-600);
+  --ifm-color-emphasis-500: var(--ifm-color-gray-500);
+  --ifm-color-emphasis-600: var(--ifm-color-gray-400);
+  --ifm-color-emphasis-700: var(--ifm-color-gray-300);
+  --ifm-color-emphasis-800: var(--ifm-color-gray-200);
+  --ifm-color-emphasis-900: var(--ifm-color-gray-100);
+  --ifm-color-emphasis-1000: var(--ifm-color-gray-0);
+
+  --ifm-background-color: #0B0B0B;
   --ifm-background-surface-color: #000000;
+
+  --ifm-hover-overlay: rgba(255, 255, 255, 0.05);
+
+  --ifm-color-content: #e3e3e3;
+  --ifm-color-content-secondary: rgba(255, 255, 255, 1);
+
+  --ifm-breadcrumb-separator-filter: invert(64%) sepia(11%) saturate(0%)
+    hue-rotate(149deg) brightness(99%) contrast(95%);
+
+  --ifm-code-background: rgba(255, 255, 255, 0.1);
+
+  --ifm-scrollbar-track-background-color: #444444;
+  --ifm-scrollbar-thumb-background-color: #686868;
+  --ifm-scrollbar-thumb-hover-background-color: #7a7a7a;
+
+  --ifm-table-stripe-background: rgba(255, 255, 255, 0.07);
+
+  --ifm-toc-border-color: var(--ifm-color-emphasis-200);
+
+  @each $color in (primary, secondary, success, info, warning, danger) {
+    --ifm-color-$(color)-contrast-background: color-mod(
+      var(--ifm-color-$(color)),
+      shade(var(--ifm-contrast-background-dark-value))
+    );
+    --ifm-color-$(color)-contrast-foreground: color-mod(
+      var(--ifm-color-$(color)),
+      tint(var(--ifm-contrast-foreground-dark-value))
+    );
+  }
 }