refactor(theme): use scss and split index.css into modules

1 files changed, 44 insertions, 0 deletions

diff --git a/assets/css/components/_variables.scss b/assets/css/components/_variables.scss
new file mode 100644
index 00000000..11eded55
--- /dev/null
+++ b/assets/css/components/_variables.scss
@@ -0,0 +1,44 @@
+:root {
+  /* colors */
+  --background-color: #F5F5F7;
+  --block-background-color: #E9E8ED;
+  --border-color: #d0d7de;
+  --text-color: #1D1D1F;
+  --secondary-text-color: #6E6E73;
+  --link-color: #277BD9;
+
+  --strong-text-color: #B6506A;
+  --em-text-color: #0271A4;
+
+  /* fonts */
+  --mono-font-family: "Courier New", Courier, "Menlo", "Monaco", Consolas, "Liberation Mono", "Lucida Console", monospace;
+  --serif-font-family:  "Noto Serif SC", serif;
+  --content-font-size: 20px;
+
+  /* waline */
+  --waline-font-size: 20px;
+  --waline-border-color: var(--border-color);
+  --waline-bg-color: var(--background-color);
+
+  --page-width: 700px;
+}
+
+.dark {
+  --background-color: #1D2021;
+  --block-background-color: #181A1B;
+  --border-color: rgba(255,255,255,0.2);
+  --text-color: #D2CEC9;
+  --secondary-text-color: #A1998D;
+  --link-color: #277BD9
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: #1D2021;
+    --block-background-color: #181A1B;
+    --border-color: rgba(255,255,255,0.2);
+    --text-color: #D2CEC9;
+    --secondary-text-color: #A1998D;
+    --link-color: #277BD9;
+  }
+}