src/App.vue

@@ -28,7 +28,7 @@ watch(colorTheme, val => updateColorTheme(val))
 </script>
 
 <template>
-    <div :class="{ dark: colorTheme === 'dark' }" id="app-wrapper">
+    <div :class="{ dark: colorTheme === 'dark', 'color-scheme-auto': colorTheme === 'auto' }" id="app-wrapper">
         <Navbar />
 
         <div class="main-content">

src/styles/variables/colors.css

@@ -77,6 +77,33 @@ limitations under the License.
     --light-bg:             var(--white);
 }
 
+@media (prefers-color-scheme: dark) {
+    #app-wrapper.color-scheme-auto {
+        --dark-l-8:             var(--white-d-8);
+        --dark-l-7:             var(--white-d-7);
+        --dark-l-6:             var(--white-d-6);
+        --dark-l-5:             var(--white-d-5);
+        --dark-l-4:             var(--white-d-4);
+        --dark-l-3:             var(--white-d-3);
+        --dark-l-2:             var(--white-d-2);
+        --dark-l-1:             var(--white-d-1);
+        --dark:                 var(--white);
+        
+        --light:                var(--black);
+        --light-d-1:            var(--black-l-1);
+        --light-d-2:            var(--black-l-2);
+        --light-d-3:            var(--black-l-3);
+        --light-d-4:            var(--black-l-4);
+        --light-d-5:            var(--black-l-5);
+        --light-d-6:            var(--black-l-6);
+        --light-d-7:            var(--black-l-7);
+        --light-d-8:            var(--black-l-8);
+        
+        --dark-bg:              var(--white);
+        --light-bg:             var(--black);
+    }
+}
+
 #app-wrapper.dark {
     --dark-l-8:             var(--white-d-8);
     --dark-l-7:             var(--white-d-7);