diff --git a/themes/corazon/assets/css/main.css b/themes/corazon/assets/css/main.scss
similarity index 54%
rename from themes/corazon/assets/css/main.css
rename to themes/corazon/assets/css/main.scss
index 166ade9..a59a05e 100644
--- a/themes/corazon/assets/css/main.css
+++ b/themes/corazon/assets/css/main.scss
@@ -1,5 +1,4 @@
 body {
-  color: #222;
   font-family: sans-serif;
   line-height: 1.5;
   margin: 1rem;
@@ -17,6 +16,20 @@ footer {
 }
 
 a {
-  color: #00e;
+  color: #a4c35b;
   text-decoration: none;
 }
+
+@media (prefers-color-scheme: light) {
+  body {
+    background: #eee;
+    color: #291712;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #291712;
+    color: #eee;
+  }
+}
diff --git a/themes/corazon/layouts/partials/head/css.html b/themes/corazon/layouts/partials/head/css.html
index 91b928d..33dbc45 100644
--- a/themes/corazon/layouts/partials/head/css.html
+++ b/themes/corazon/layouts/partials/head/css.html
@@ -1,4 +1,5 @@
-{{- with resources.Get "css/main.css" }}
+{{ $opts := dict "transpiler" "libsass" "targetPath" "css/style.css" }}
+{{- with resources.Get "css/main.scss" | toCSS $opts }}
   {{- if eq hugo.Environment "development" }}
     <link rel="stylesheet" href="{{ .RelPermalink }}">
   {{- else }}