aboutsummaryrefslogtreecommitdiffhomepage
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
parentbf35e3391223659f5ad8f56dc406b85289e915ce (diff)
downloadhomer-5323df4a32ca9b81fa598c0ca988596d93afe713.tar.gz
homer-5323df4a32ca9b81fa598c0ca988596d93afe713.tar.zst
homer-5323df4a32ca9b81fa598c0ca988596d93afe713.zip
Implementing dark mode
Diffstat
-rw-r--r--app.css90
-rw-r--r--app.js13
-rw-r--r--app.scss83
-rw-r--r--index.html31
4 files changed, 190 insertions, 27 deletions
diff --git a/app.css b/app.css
index 846b54b..8a97742 100644
--- a/app.css
+++ b/app.css
@@ -3,8 +3,86 @@ html {
3 3
4body { 4body {
5 font-family: 'Raleway', sans-serif; 5 font-family: 'Raleway', sans-serif;
6 background-color: #F5F5F5; 6 height: 100%; }
7 min-height: 100%; } 7 body #app {
8 min-height: 100%;
9 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
10 background-color: #f5f5f5;
11 color: #363636; }
12 body #app .title {
13 color: #303030; }
14 body #app .subtitle {
15 color: #424242; }
16 body #app .card {
17 background-color: #ffffff;
18 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
19 body #app .card:hover {
20 background-color: #ffffff; }
21 body #app .footer {
22 background-color: #ffffff;
23 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
24 @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
25 body #app {
26 background-color: #f5f5f5;
27 color: #363636; }
28 body #app .title {
29 color: #303030; }
30 body #app .subtitle {
31 color: #424242; }
32 body #app .card {
33 background-color: #ffffff;
34 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
35 body #app .card:hover {
36 background-color: #ffffff; }
37 body #app .footer {
38 background-color: #ffffff;
39 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } }
40 @media (prefers-color-scheme: dark) {
41 body #app {
42 background-color: #131313;
43 color: #eaeaea; }
44 body #app .title {
45 color: #fafafa; }
46 body #app .subtitle {
47 color: #f5f5f5; }
48 body #app .card {
49 background-color: #2b2b2b;
50 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
51 body #app .card:hover {
52 background-color: #2b2b2b; }
53 body #app .footer {
54 background-color: #2b2b2b;
55 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } }
56 body #app.is-light {
57 background-color: #f5f5f5;
58 color: #363636; }
59 body #app.is-light .title {
60 color: #303030; }
61 body #app.is-light .subtitle {
62 color: #424242; }
63 body #app.is-light .card {
64 background-color: #ffffff;
65 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
66 body #app.is-light .card:hover {
67 background-color: #ffffff; }
68 body #app.is-light .footer {
69 background-color: #ffffff;
70 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
71 body #app.is-dark {
72 background-color: #131313;
73 color: #eaeaea; }
74 body #app.is-dark .title {
75 color: #fafafa; }
76 body #app.is-dark .subtitle {
77 color: #f5f5f5; }
78 body #app.is-dark .card {
79 background-color: #2b2b2b;
80 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
81 body #app.is-dark .card:hover {
82 background-color: #2b2b2b; }
83 body #app.is-dark .footer {
84 background-color: #2b2b2b;
85 box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
8 body h1, body h2, body h3, body h4, body h5, body h6 { 86 body h1, body h2, body h3, body h4, body h5, body h6 {
9 font-family: 'Lato', sans-serif; } 87 font-family: 'Lato', sans-serif; }
10 body h1 { 88 body h1 {
@@ -54,7 +132,7 @@ body {
54 body #bighead .navbar a:hover { 132 body #bighead .navbar a:hover {
55 background-color: #5a95f5; } 133 background-color: #5a95f5; }
56 body #main-section { 134 body #main-section {
57 margin-bottom: 3rem; 135 margin-bottom: 2rem;
58 padding: 0; } 136 padding: 0; }
59 body #main-section h2 { 137 body #main-section h2 {
60 border-bottom: 1px dashed #ccc; 138 border-bottom: 1px dashed #ccc;
@@ -95,7 +173,6 @@ body {
95 body .card a { 173 body .card a {
96 outline: none; } 174 outline: none; }
97 body .card:hover { 175 body .card:hover {
98 background-color: #FFFFFF;
99 transform: translate(0, -3px); } 176 transform: translate(0, -3px); }
100 body .card:hover .tag { 177 body .card:hover .tag {
101 width: auto; 178 width: auto;
@@ -117,10 +194,9 @@ body {
117 bottom: 0; 194 bottom: 0;
118 padding: 0.5rem; 195 padding: 0.5rem;
119 text-align: left; 196 text-align: left;
120 background-color: #fafafa;
121 border-top: 1px solid #F5F5F5;
122 color: #676767; 197 color: #676767;
123 font-size: 0.85rem; } 198 font-size: 0.85rem;
199 transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; }
124 body .search-bar { 200 body .search-bar {
125 position: relative; 201 position: relative;
126 display: inline-block; } 202 display: inline-block; }
diff --git a/app.js b/app.js
index dc8b6cc..a404314 100644
--- a/app.js
+++ b/app.js
@@ -4,7 +4,8 @@ const app = new Vue({
4 config: null, 4 config: null,
5 offline: false, 5 offline: false,
6 filter: '', 6 filter: '',
7 vlayout: true 7 vlayout: true,
8 overrideDark: null
8 }, 9 },
9 created: function () { 10 created: function () {
10 let that = this; 11 let that = this;
@@ -22,6 +23,13 @@ const app = new Vue({
22 } 23 }
23 }, false); 24 }, false);
24 }, 25 },
26 computed: {
27 isDark: function() {
28 return this.overrideDark !== null
29 ? this.overrideDark
30 : matchMedia("(prefers-color-scheme: dark)").matches;
31 }
32 },
25 methods: { 33 methods: {
26 checkOffline: function () { 34 checkOffline: function () {
27 let that = this; 35 let that = this;
@@ -44,6 +52,9 @@ const app = new Vue({
44 }); 52 });
45 }); 53 });
46 }, 54 },
55 toggleTheme: function() {
56 this.overrideDark = !this.isDark;
57 }
47 } 58 }
48}); 59});
49 60
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 {
diff --git a/index.html b/index.html
index 6b75e49..d5aebd3 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,10 @@
14</head> 14</head>
15 15
16<body> 16<body>
17 <div id="app" v-if="config"> 17 <div id="app" v-if="config" :class="{
18 'is-dark': overrideDark === true,
19 'is-light': overrideDark === false
20 }">
18 <div id="bighead"> 21 <div id="bighead">
19 <section class="first-line"> 22 <section class="first-line">
20 <div v-cloak class="container"> 23 <div v-cloak class="container">
@@ -39,6 +42,11 @@
39 </a> 42 </a>
40 </div> 43 </div>
41 <div class="end"> 44 <div class="end">
45 <a
46 v-on:click="toggleTheme()"
47 aria-label="Toggle dark mode"
48 ><i class="fas fa-adjust"></i>
49 </a>
42 <a v-on:click="vlayout = !vlayout" class="icon-button navbar-item"><i 50 <a v-on:click="vlayout = !vlayout" class="icon-button navbar-item"><i
43 :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a> 51 :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
44 <div class="search-bar"> 52 <div class="search-bar">
@@ -98,19 +106,18 @@
98 </div> 106 </div>
99 </div> 107 </div>
100 </section> 108 </section>
109 <footer class="footer">
110 <div class="container">
111 <div class="content has-text-centered">
112 <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a
113 href="https://vuejs.org/">vuejs</a>
114 & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i
115 class="fab fa-github-alt"></i></a></p>
116 </div>
117 </div>
118 </footer>
101 </div> 119 </div>
102 120
103 <footer class="footer">
104 <div class="container">
105 <div class="content has-text-centered">
106 <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a
107 href="https://vuejs.org/">vuejs</a>
108 & <a href="#">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i
109 class="fab fa-github-alt"></i></a></p>
110 </div>
111 </div>
112 </footer>
113
114 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script> 121 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
115 <script src="vendors/js-yaml.min.js"></script> 122 <script src="vendors/js-yaml.min.js"></script>
116 <script src="app.js"></script> 123 <script src="app.js"></script>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 23:16:36 +0000