1 files changed, 100 insertions, 0 deletions
diff --git a/sass/themes/_auto.scss b/sass/themes/_auto.scss
new file mode 100644
index 0000000..0997d76
--- /dev/null
+++ b/sass/themes/_auto.scss
@@ -0,0 +1,100 @@
+:root {
+  // Typography
+  --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+  --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace;
+  --lh: 1.5; //line-height
+  --fs: 1rem; //font-size
+  --fw: 400; //font-weight
+  --fh: 700; //font-weight h1-h6
+
+  // Colors
+	--f1: #555; //font color 1 bbb ccc
+	--f2: #333; //font color 2 fff eee
+
+	--c1: #fff; //color 1 111
+  --c2: #eee; //color 2 222
+  --c3: #ddd; //color 3 333
+  --c4: #777; //color 4 888
+
+	--a1: #f90; //accent color 1 link
+	--a2: #fb0; //accent color 2 hover,focus
+	--a3: #fb0; //accent color 3 h1-h2 hover,focus
+
+  --cg: #483; //ins green
+  --cr: #d33; //del red
+
+  // Spacings
+  --s1: .5rem;
+  --s2: 1rem;
+  --rc: .5rem; //radius corners
+
+  // Borders
+  --br: 0.25rem; //border radius
+  --bw: 0.0625rem; //border width
+  --ow: 0.1875rem; //outline width
+
+  // Responsive typography
+  @if $enable-responsive-typography {
+    @if map-get($breakpoints, "sm") {
+      @media (min-width: map-get($breakpoints, "sm")) {
+        --fs: 1rem;
+      }
+    }
+    @if map-get($breakpoints, "md") {
+      @media (min-width: map-get($breakpoints, "md")) {
+        --fs: 1.04rem;
+      }
+    }
+    @if map-get($breakpoints, "lg") {
+      @media (min-width: map-get($breakpoints, "lg")) {
+        --fs: 1.08rem;
+      }
+    }
+    @if map-get($breakpoints, "xl") {
+      @media (min-width: map-get($breakpoints, "xl")) {
+        --fs: 1.12rem;
+      }
+    }
+  }
+}
+@media (prefers-color-scheme: dark) {
+	:root {
+  	--f1: #ccc; //font color 1
+  	--f2: #ddd; //font color 2
+
+  	--c1: #111; //color 1
+    --c2: #222; //color 2
+    --c3: #333; //color 3
+    --c4: #888; //color 4
+	}
+}
+
+// Responsives spacings
+@if $enable-responsive-spacings {
+  // Sectionning
+  body > header,
+  body > main,
+  body > footer,
+  section {
+    @if map-get($breakpoints, "sm") {
+      @media (min-width: map-get($breakpoints, "sm")) {
+        --s1: .5rem;
+      }
+    }
+    @if map-get($breakpoints, "md") {
+      @media (min-width: map-get($breakpoints, "md")) {
+        --s1: .6rem;
+      }
+    }
+    @if map-get($breakpoints, "lg") {
+      @media (min-width: map-get($breakpoints, "lg")) {
+        --s1: .7rem;
+      }
+    }
+    @if map-get($breakpoints, "xl") {
+      @media (min-width: map-get($breakpoints, "xl")) {
+        --s1: .8rem;
+      }
+    }
+  }
+}