body {
font-family: 'Raleway', sans-serif;
- background-color: #F5F5F5;
- min-height: 100%; }
+ height: 100%; }
+ body #app {
+ min-height: 100%;
+ transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+ background-color: #f5f5f5;
+ color: #363636; }
+ body #app .title {
+ color: #303030; }
+ body #app .subtitle {
+ color: #424242; }
+ body #app .card {
+ background-color: #ffffff;
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
+ body #app .card:hover {
+ background-color: #ffffff; }
+ body #app .footer {
+ background-color: #ffffff;
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
+ @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
+ body #app {
+ background-color: #f5f5f5;
+ color: #363636; }
+ body #app .title {
+ color: #303030; }
+ body #app .subtitle {
+ color: #424242; }
+ body #app .card {
+ background-color: #ffffff;
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
+ body #app .card:hover {
+ background-color: #ffffff; }
+ body #app .footer {
+ background-color: #ffffff;
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } }
+ @media (prefers-color-scheme: dark) {
+ body #app {
+ background-color: #131313;
+ color: #eaeaea; }
+ body #app .title {
+ color: #fafafa; }
+ body #app .subtitle {
+ color: #f5f5f5; }
+ body #app .card {
+ background-color: #2b2b2b;
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
+ body #app .card:hover {
+ background-color: #2b2b2b; }
+ body #app .footer {
+ background-color: #2b2b2b;
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } }
+ body #app.is-light {
+ background-color: #f5f5f5;
+ color: #363636; }
+ body #app.is-light .title {
+ color: #303030; }
+ body #app.is-light .subtitle {
+ color: #424242; }
+ body #app.is-light .card {
+ background-color: #ffffff;
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
+ body #app.is-light .card:hover {
+ background-color: #ffffff; }
+ body #app.is-light .footer {
+ background-color: #ffffff;
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
+ body #app.is-dark {
+ background-color: #131313;
+ color: #eaeaea; }
+ body #app.is-dark .title {
+ color: #fafafa; }
+ body #app.is-dark .subtitle {
+ color: #f5f5f5; }
+ body #app.is-dark .card {
+ background-color: #2b2b2b;
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
+ body #app.is-dark .card:hover {
+ background-color: #2b2b2b; }
+ body #app.is-dark .footer {
+ background-color: #2b2b2b;
+ box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
body h1, body h2, body h3, body h4, body h5, body h6 {
font-family: 'Lato', sans-serif; }
body h1 {
body #bighead .navbar a:hover {
background-color: #5a95f5; }
body #main-section {
- margin-bottom: 3rem;
+ margin-bottom: 2rem;
padding: 0; }
body #main-section h2 {
border-bottom: 1px dashed #ccc;
body .card a {
outline: none; }
body .card:hover {
- background-color: #FFFFFF;
transform: translate(0, -3px); }
body .card:hover .tag {
width: auto;
bottom: 0;
padding: 0.5rem;
text-align: left;
- background-color: #fafafa;
- border-top: 1px solid #F5F5F5;
color: #676767;
- font-size: 0.85rem; }
+ font-size: 0.85rem;
+ transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; }
body .search-bar {
position: relative;
display: inline-block; }
config: null,
offline: false,
filter: '',
- vlayout: true
+ vlayout: true,
+ overrideDark: null
},
created: function () {
let that = this;
}
}, false);
},
+ computed: {
+ isDark: function() {
+ return this.overrideDark !== null
+ ? this.overrideDark
+ : matchMedia("(prefers-color-scheme: dark)").matches;
+ }
+ },
methods: {
checkOffline: function () {
let that = this;
});
});
},
+ toggleTheme: function() {
+ this.overrideDark = !this.isDark;
+ }
}
});
$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;
}
#main-section {
- margin-bottom: 3rem;
+ margin-bottom: 2rem;
padding: 0;
h2 {
}
.card:hover {
- background-color: #FFFFFF;
transform: translate(0, -3px);
.tag {
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 {
</head>
<body>
- <div id="app" v-if="config">
+ <div id="app" v-if="config" :class="{
+ 'is-dark': overrideDark === true,
+ 'is-light': overrideDark === false
+ }">
<div id="bighead">
<section class="first-line">
<div v-cloak class="container">
</a>
</div>
<div class="end">
+ <a
+ v-on:click="toggleTheme()"
+ aria-label="Toggle dark mode"
+ ><i class="fas fa-adjust"></i>
+ </a>
<a v-on:click="vlayout = !vlayout" class="icon-button navbar-item"><i
:class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
<div class="search-bar">
</div>
</div>
</section>
+ <footer class="footer">
+ <div class="container">
+ <div class="content has-text-centered">
+ <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a
+ href="https://vuejs.org/">vuejs</a>
+ & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i
+ class="fab fa-github-alt"></i></a></p>
+ </div>
+ </div>
+ </footer>
</div>
- <footer class="footer">
- <div class="container">
- <div class="content has-text-centered">
- <p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a
- href="https://vuejs.org/">vuejs</a>
- & <a href="#">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i
- class="fab fa-github-alt"></i></a></p>
- </div>
- </div>
- </footer>
-
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="vendors/js-yaml.min.js"></script>
<script src="app.js"></script>