aboutsummaryrefslogtreecommitdiffhomepage
path: root/app.scss
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2019-10-01 21:35:51 -0700
committerBastien Wirtz <bastien.wirtz@gmail.com>2019-10-01 21:40:45 -0700
commit5323df4a32ca9b81fa598c0ca988596d93afe713 (patch)
treef6a7caacb2b44621839265ffa5edc9ec7dc9c952 /app.scss
parentbf35e3391223659f5ad8f56dc406b85289e915ce (diff)
downloadhomer-5323df4a32ca9b81fa598c0ca988596d93afe713.tar.gz
homer-5323df4a32ca9b81fa598c0ca988596d93afe713.tar.zst
homer-5323df4a32ca9b81fa598c0ca988596d93afe713.zip
Implementing dark mode
Diffstat (limited to 'app.scss')
-rw-r--r--app.scss83
1 files changed, 76 insertions, 7 deletions
diff --git a/app.scss b/app.scss
index ab9a394..d4d2099 100644
--- a/app.scss
+++ b/app.scss
@@ -1,12 +1,83 @@
1$primary-color: #3367d6; 1$primary-color: #3367d6;
2$secondary-color: #4285f4; 2$secondary-color: #4285f4;
3 3
4html { height: 100%; } 4
5// /!\ Keep background colors sync with `theme-color` meta info
6$theme-light: (
7 background: #f5f5f5,
8 card-background: #ffffff,
9 text: #363636,
10 text-title: #303030,
11 text-subtitle: #424242,
12 card-shadow: rgba(0, 0, 0, 0.1)
13);
14$theme-dark: (
15 background: #131313,
16 card-background: #2b2b2b,
17 text: #eaeaea,
18 text-title: #fafafa,
19 text-subtitle: #f5f5f5,
20 card-shadow: rgba(0, 0, 0, 0.4)
21);
22
23
24
25@mixin theme($theme) {
26 background-color: map-get($theme, "background");
27 color: map-get($theme, "text");
28
29 .title {
30 color: map-get($theme, "text-title");
31 }
32 .subtitle {
33 color: map-get($theme, "text-subtitle");
34 }
35
36 .card {
37 background-color: map-get($theme, "card-background");
38 box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow");
39 &:hover {
40 background-color: map-get($theme, "card-background");
41 }
42 }
43
44 .footer {
45 background-color: map-get($theme, "card-background");
46 box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow");
47 }
48}
49
50html {
51 height: 100%;
52}
5 53
6body { 54body {
7 font-family: 'Raleway', sans-serif; 55 font-family: 'Raleway', sans-serif;
8 background-color: #F5F5F5; 56 height: 100%;
9 min-height: 100%; 57
58 #app {
59 min-height: 100%;
60 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
61
62 // Default theme
63 @include theme($theme-light);
64
65 // System pref theme
66 @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
67 @include theme($theme-light);
68 }
69 @media (prefers-color-scheme: dark) {
70 @include theme($theme-dark);
71 }
72
73 // User override theme
74 &.is-light {
75 @include theme($theme-light);
76 }
77 &.is-dark {
78 @include theme($theme-dark);
79 }
80 }
10 81
11 h1, h2, h3, h4, h5, h6 { 82 h1, h2, h3, h4, h5, h6 {
12 font-family: 'Lato', sans-serif; 83 font-family: 'Lato', sans-serif;
@@ -90,7 +161,7 @@ body {
90 } 161 }
91 162
92 #main-section { 163 #main-section {
93 margin-bottom: 3rem; 164 margin-bottom: 2rem;
94 padding: 0; 165 padding: 0;
95 166
96 h2 { 167 h2 {
@@ -155,7 +226,6 @@ body {
155 } 226 }
156 227
157 .card:hover { 228 .card:hover {
158 background-color: #FFFFFF;
159 transform: translate(0, -3px); 229 transform: translate(0, -3px);
160 230
161 .tag { 231 .tag {
@@ -191,10 +261,9 @@ body {
191 bottom: 0; 261 bottom: 0;
192 padding: 0.5rem; 262 padding: 0.5rem;
193 text-align: left; 263 text-align: left;
194 background-color: #fafafa;
195 border-top: 1px solid #F5F5F5;
196 color: #676767; 264 color: #676767;
197 font-size: 0.85rem; 265 font-size: 0.85rem;
266 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
198 } 267 }
199 268
200 .search-bar { 269 .search-bar {