Implementing dark mode

[github/bastienwirtz/homer.git] / app.scss

diff --git a/app.scss b/app.scss
index ab9a394155353c46ad225797118892a4fbd6c184..d4d2099529f6487739c0ff7cde14fe6b5c14661a 100644 (file)
--- a/app.scss
+++ b/app.scss
@@ -1,12 +1,83 @@
 $primary-color: #3367d6;
 $secondary-color: #4285f4;
 
-html { height: 100%; }
+
+// /!\ Keep background colors sync with `theme-color` meta info
+$theme-light: (
+  background: #f5f5f5,
+  card-background: #ffffff,
+  text: #363636,
+  text-title: #303030,
+  text-subtitle: #424242,
+  card-shadow: rgba(0, 0, 0, 0.1)
+);
+$theme-dark: (
+  background: #131313,
+  card-background: #2b2b2b,
+  text: #eaeaea,
+  text-title: #fafafa,
+  text-subtitle: #f5f5f5,
+  card-shadow: rgba(0, 0, 0, 0.4)
+);
+
+  
+
+@mixin theme($theme) {
+  background-color: map-get($theme, "background");
+  color: map-get($theme, "text");
+
+  .title {
+    color: map-get($theme, "text-title");
+  }
+  .subtitle {
+    color: map-get($theme, "text-subtitle");
+  }
+
+  .card {
+    background-color: map-get($theme, "card-background");
+    box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow");
+    &:hover {
+      background-color: map-get($theme, "card-background");
+    }
+  }
+
+  .footer {
+    background-color:  map-get($theme, "card-background");
+    box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow");
+  }
+}
+
+html { 
+  height: 100%; 
+}
 
 body {
   font-family: 'Raleway', sans-serif;
-  background-color: #F5F5F5;
-  min-height: 100%;
+  height: 100%;
+
+  #app {
+    min-height: 100%;
+    transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+
+    // Default theme
+    @include theme($theme-light);
+
+    // System pref theme
+    @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
+      @include theme($theme-light);
+    }
+    @media (prefers-color-scheme: dark) {
+      @include theme($theme-dark);
+    }
+
+    // User override theme
+    &.is-light {
+      @include theme($theme-light);
+    }
+    &.is-dark {
+      @include theme($theme-dark);
+    }
+  }
 
   h1, h2, h3, h4, h5, h6 {
     font-family: 'Lato', sans-serif;
@@ -90,7 +161,7 @@ body {
   }
 
   #main-section {
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
     padding: 0;
 
     h2 {
@@ -155,7 +226,6 @@ body {
   }
 
   .card:hover {
-    background-color: #FFFFFF;
     transform: translate(0, -3px);
 
     .tag {
@@ -191,10 +261,9 @@ body {
     bottom: 0;
     padding: 0.5rem;
     text-align: left;
-    background-color: #fafafa;
-    border-top: 1px solid #F5F5F5;
     color: #676767;
     font-size: 0.85rem;
+    transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
   }
 
   .search-bar {