Initial commit

quartz/components/styles/darkmode.scss

@@ -0,0 +1,46 @@
+.darkmode {
+  cursor: pointer;
+  padding: 0;
+  position: relative;
+  background: none;
+  border: none;
+  width: 20px;
+  height: 20px;
+  margin: 0 10px;
+  text-align: inherit;
+
+  & svg {
+    position: absolute;
+    width: 35px;
+    height: 20px;
+    top: calc(50% - 10px);
+    fill: var(--darkgray);
+    transition: opacity 0.1s ease;
+  }
+}
+
+:root[saved-theme="dark"] {
+  color-scheme: dark;
+}
+
+:root[saved-theme="light"] {
+  color-scheme: light;
+}
+
+:root[saved-theme="dark"] .darkmode {
+  & > #dayIcon {
+    display: none;
+  }
+  & > #nightIcon {
+    display: inline;
+  }
+}
+
+:root .darkmode {
+  & > #dayIcon {
+    display: inline;
+  }
+  & > #nightIcon {
+    display: none;
+  }
+}