add ui system theme media query

1 files changed, 52 insertions, 17 deletions

diff --git a/docs/style.css b/docs/style.css
index ec60864..f95623f 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -1,5 +1,21 @@
 @import url('https://rsms.me/inter/inter.css');
 
+.feed-button {
+  float: right;
+  text-decoration: none;
+  color: var(--black) !important;
+  background-color: var(--cyan);
+  font-size: 0.8rem;
+  padding: 0.3rem 0.5rem;
+  margin: -0.5rem 0;
+  border: 0px solid var(--dark-white);
+  border-radius: 0.2rem;
+}
+
+::-moz-selection, ::selection {
+  background: var(--cyan);
+}
+
 :root {
   --cyan: #79ffe1;
   --pink: #d344e2;
@@ -9,6 +25,25 @@
   --dark-white: #eeeeee;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+  --cyan: #79ffe1;
+  --pink: #ff3299;
+  --black: #dedede;
+  --light-black: #ccc;
+  --white: #000;
+  --dark-white: #323232;
+  }
+  .feed-button {
+    color: var(--white) !important;
+    background: var(--cyan);
+  }
+  ::-moz-selection, ::selection {
+    color: var(--white);
+    background: var(--cyan);
+  }
+}
+
 body { font-family: 'Inter', sans-serif; }
 @supports (font-variation-settings: normal) {
   body {
@@ -31,6 +66,21 @@ html {
   font-size: 17px;
 }
 
+h1, h2, h3 {
+  margin-top: 4rem;
+}
+h4, h5, h6 {
+  margin-top: 2rem;
+}
+
+.subheading {
+  font-weight: 400;
+  font-size: 0.8rem;
+  color: var(--light-black);
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 table {
   width: 100%;
   border-collapse: collapse;
@@ -106,7 +156,7 @@ pre > code {
 
 img {
   max-width: 100%;
-  border: 1px solid var(--dark-white);
+  border: 2px solid var(--dark-white);
   border-radius: 0.4rem;
   box-shadow: 0 0 1.5rem 0.5rem rgba(0, 0, 0, 0.15);
 }
@@ -130,17 +180,6 @@ hr {
   border-top: 2px solid var(--dark-white);
 }
 
-.feed-button {
-  float: right;
-  text-decoration: none;
-  color: var(--black) !important;
-  background-color: var(--cyan);
-  font-size: 0.8rem;
-  padding: 0.3rem 0.5rem;
-  margin: -0.5rem 0;
-  border: 0px solid var(--dark-white);
-  border-radius: 0.2rem;
-}
 
 .intro {
   font-size: 0.8rem;
@@ -207,11 +246,6 @@ ul {
   list-style: lower-greek inside none;
 }
 
-
-::-moz-selection, ::selection {
-  background: var(--cyan);
-}
-
 .stats {
   float: right;
   text-align: right;
@@ -239,3 +273,4 @@ ul {
   cursor: pointer;
   box-shadow: none;
 }
+