Add dark theme (#1204)

Fixes #1151
This commit is contained in:
Dawid Potocki 2019-08-29 20:03:04 +00:00 committed by GitHub
parent 09e1d85933
commit f09d6c3165
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 236 additions and 3 deletions

View File

@ -44,4 +44,5 @@
<!-- CSS stylesheets --> <!-- CSS stylesheets -->
<link href="/assets/css/style.css?v=5" rel="stylesheet"> <link href="/assets/css/style.css?v=5" rel="stylesheet">
<link id="dark-css" href="/assets/css/dark.css?v=1" rel="stylesheet" media="(prefers-color-scheme: dark)">
</head> </head>

View File

@ -143,6 +143,9 @@
<a href="/donate/" class="nav-anchor"> <a href="/donate/" class="nav-anchor">
Donate <span class="fas fa-heart text-danger"></span> Donate <span class="fas fa-heart text-danger"></span>
</a> </a>
<a id="nav-switch-theme" class="nav-anchor" href="javascript:void(0)" onClick="changeColorScheme()">
Theme <span class="nav-theme-icon fas"></span>
</a>
</div> </div>
</div> </div>
</nav> </nav>

174
assets/css/dark.scss Normal file
View File

@ -0,0 +1,174 @@
---
---
$dark-400: #181b21;
$dark-300: #22262e;
$dark-200: #343a46;
$dark-100: #464f60;
$light: #d8d8d8;
$primary: #345e8e;
$danger: #b63f4a;
$secondary: $dark-100;
$success: #2c7f40;
$warning: #c6a339;
$info: #218899;
/*
* HTML
*/
body {
background: $dark-400;
color: $light;
}
a {
color: lighten($primary, 25%);
}
a:hover {
color: lighten($primary, 10%);
}
img {
filter: saturate(80%);
}
/*
* Bootstrap
*/
.alert a {
color: #214D97;
}
.bg-secondary, .btn-secondary, .badge-secondary { background-color: $secondary !important; }
.btn-secondary, .card-secondary .card-header { border-color: $secondary !important; }
.text-secondary { color: $secondary !important; }
.alert-secondary, .btn-secondary:hover {
color: $light;
background-color: darken($secondary, 10%);
border-color: darken($secondary, 10%);
}
.bg-primary, .btn-primary, .badge-primary { background-color: $primary !important; }
.btn-primary, .card-primary .card-header { border-color: $primary !important; }
.text-primary { color: $primary !important; }
.alert-primary, .btn-primary:hover {
color: $light;
background-color: darken($primary, 10%);
border-color: darken($primary, 10%);
}
.bg-warning, .btn-warning, .badge-warning { background-color: $warning !important; }
.btn-warning, .card-warning .card-header { border-color: $warning !important; }
.text-warning { color: $warning !important; }
.card-warning > .text-dark { color: $dark-400 !important; }
.alert-warning, .btn-warning:hover {
color: $light;
background-color: darken($warning, 10%);
border-color: darken($warning, 10%);
}
.bg-info, .btn-info, .badge-info { background-color: $info !important; }
.btn-info, .card-info .card-header { border-color: $info !important; }
.text-info { color: $info !important; }
.alert-info, .btn-info:hover {
color: $light;
background-color: darken($info, 10%);
border-color: darken($info, 10%);
}
.bg-success, .btn-success, .badge-success { background-color: $success !important; }
.btn-success, .card-success .card-header { border-color: $success !important; }
.text-success { color: $success !important; }
.alert-success, .btn-success {
color: $light;
background-color: darken($success, 10%);
border-color: darken($success, 10%);
}
.bg-danger, .btn-danger, .badge-danger { background-color: $danger !important; }
.btn-danger, .card-danger .card-header { border-color: $danger !important; }
.text-danger { color: $danger !important; }
.alert-danger, .btn-danger:hover {
color: $light;
background-color: darken($danger, 10%);
border-color: darken($danger, 10%);
}
.card {
box-shadow: none !important;
}
.dropdown-item:hover {
color: $light;
background-color: $dark-300;
}
.form-control,
.form-control:focus {
color: $light;
background: $dark-300;
border-color: $dark-300;
}
.card,
.jumbotron,
.list-group-item {
background: $dark-300;
}
.blockquote {
border-color: $dark-300;
}
.bg-dark {
background-color: $dark-300 !important;
}
.dropdown-item {
color: $light;
}
.list-group-item {
border-color: $dark-200;
}
.text-dark {
color: $light !important;
}
table[data-sortable].sortable-theme-bootstrap {
color: $light;
background-color: $dark-300;
}
table[data-sortable].sortable-theme-bootstrap th,
table[data-sortable].sortable-theme-bootstrap td {
border-color: $dark-100 !important;
}
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"] {
color: $light;
background: $dark-200;
}
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="ascending"]::after, {
border-bottom-color: $light;
}
table[data-sortable].sortable-theme-bootstrap th[data-sorted="true"][data-sorted-direction="descending"]::after {
border-top-color: $light;
}
/*
* Other
*/
.nav-dropdown {
color: $light;
background-color: $dark-400;
border-color: $dark-300;
}
.nav-theme-icon:before {
color: $warning;
font-size: 1em;
content: "\f185";
}

View File

@ -177,6 +177,10 @@ h2, h3:not(.h5), h4, h5 {
text-align: justify; text-align: justify;
} }
.no-text-wrap {
white-space: nowrap;
}
footer { footer {
img, img,
i { i {
@ -184,6 +188,7 @@ footer {
} }
} }
/* /*
* Navbar * Navbar
*/ */
@ -272,8 +277,15 @@ input#nav-toggle,
display: none; display: none;
} }
#nav-switch-theme {
/* We will make it visible with JavaScript
* as it does not work without it */
display: none;
}
/* Mobile hamburger menu */ /*
* Mobile hamburger menu
*/
@media only screen and (max-width: 992px) { @media only screen and (max-width: 992px) {
.menu, .menu,
@ -336,8 +348,10 @@ input#nav-toggle,
} }
} }
.no-text-wrap { .nav-theme-icon:before {
white-space: nowrap; color: var(--warning);
font-size: 0.875em;
content: "\f186";
} }
.table td, .table th { .table td, .table th {

View File

@ -27,6 +27,47 @@ function navSectionsClose(event) {
}); });
} }
// Dark/Light color scheme switch button
document.querySelector("#nav-switch-theme").style.display = "inline"
if (localStorage.getItem("colorScheme") === "dark") {
document.querySelector("#dark-css").removeAttribute("media"); // Set dark theme
}
else if (localStorage.getItem("colorScheme") === "light") {
document.querySelector("#dark-css").setAttribute("media", "invalid"); // Set light theme
}
function changeColorScheme() {
// Use whatever users want
if (localStorage.getItem("colorScheme") === "dark") {
// Change to light theme
// by setting invalid media it will just not apply CSS for anyone
document.querySelector("#dark-css").setAttribute("media", "invalid");
localStorage.setItem("colorScheme", "light");
}
else if (localStorage.getItem("colorScheme") === "light") {
// Change to dark theme
// media was set to prefers-color-scheme: dark
document.querySelector("#dark-css").removeAttribute("media");
localStorage.setItem("colorScheme", "dark");;
}
// Just use whatever browsers want
else if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
// Change to light Theme
document.querySelector("#dark-css").setAttribute("media", "invalid");
localStorage.setItem("colorScheme", "light");
}
else {
// Change to dark theme
document.querySelector("#dark-css").removeAttribute("media");
localStorage.setItem("colorScheme", "dark");;
}
}
// Matomo // Matomo
var _paq = window._paq || []; var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */ /* tracker methods like "setCustomDimension" should be called before "trackPageView" */