dark mode

This commit is contained in:
Ellpeck 2018-12-30 02:26:56 +01:00
parent b8db5a6b72
commit b92948525b
12 changed files with 78 additions and 12 deletions

24
dark.css Normal file
View file

@ -0,0 +1,24 @@
body {
color: #d8d8d8;
background-color: #222222;
}
.jumbotron {
background-color: #34373a;
}
.list-display {
background-color: #404142;
}
.card {
background-color: #3d3d3d !important;
}
.text-muted {
color: #979797 !important;
}
.footer {
background-color: #404142;
}

View file

@ -31,6 +31,8 @@
<body data-spy="scroll" data-target="#navbar"> <body data-spy="scroll" data-target="#navbar">
<!-- Navbar --> <!-- Navbar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light rounded-bottom" id="navbar"> <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light rounded-bottom" id="navbar">
<script src="scripts/navbar.js"></script>
<!-- Navbar brand and logo --> <!-- Navbar brand and logo -->
<a class="navbar-brand mb-0 h1" href="#"> <a class="navbar-brand mb-0 h1" href="#">
<img src="res/logo.png" width="40" height="40" alt=""> Ellpeck.de <img src="res/logo.png" width="40" height="40" alt=""> Ellpeck.de
@ -43,12 +45,18 @@
<!-- Navbar content --> <!-- Navbar content -->
<div class="collapse navbar-collapse" id="navbar-content"> <div class="collapse navbar-collapse" id="navbar-content">
<div class="navbar-nav"> <div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="#projects">Projects</a> <a class="nav-item nav-link" href="#projects">Projects</a>
<a class="nav-item nav-link" href="#social">Social</a> <a class="nav-item nav-link" href="#social">Social</a>
<a class="nav-item nav-link" href="#about">About</a> <a class="nav-item nav-link" href="#about">About</a>
<a class="nav-item nav-link" href="#support">Support Me</a> <a class="nav-item nav-link" href="#support">Support Me</a>
</div> </div>
<span class="navbar-text">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dark-mode">
<label class="custom-control-label" for="dark-mode">Dark Mode</label>
</div>
</span>
</div> </div>
</nav> </nav>

BIN
res/social/email_dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
res/social/github_dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
res/social/reddit_dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

BIN
res/support/amazon_dark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

View file

@ -1,3 +1,8 @@
let dark = getCookie("dark") === "true";
if (dark) {
document.write('<link rel="stylesheet" href="dark.css">')
}
$(function () { $(function () {
let openModals = function (hash) { let openModals = function (hash) {
if (hash.length > 1) { if (hash.length > 1) {
@ -18,4 +23,22 @@ $(function () {
$('#blobheart').on('click', function () { $('#blobheart').on('click', function () {
$('#navbar-image').attr('src', 'res/heart.png'); $('#navbar-image').attr('src', 'res/heart.png');
}); });
let mode = $('#dark-mode');
mode.prop('checked', dark);
mode.on('click', function () {
var date = new Date();
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
document.cookie = "dark=" + $(this).prop('checked') + ";expires=" + date.toUTCString();
location.reload();
}); });
});
function getCookie(key) {
let c = document.cookie;
if (!c)
return undefined;
let start = c.indexOf(key + "=") + key.length + 1;
let end = c.indexOf(";", start);
return c.substring(start, end < 0 ? c.length : end);
}

5
scripts/navbar.js Normal file
View file

@ -0,0 +1,5 @@
if (dark) {
let navbar = $("#navbar");
navbar.removeClass("navbar-light bg-light");
navbar.addClass("navbar-dark bg-dark");
}

View file

@ -42,7 +42,7 @@ for (project of projects) {
let links = project['links']; let links = project['links'];
if (links) { if (links) {
for (let name in links) { for (let name in links) {
p += '<a href="' + links[name] + '" class="card-link btn btn-outline-info rounded-0">' + name + '</a>'; p += '<a href="' + links[name] + '" class="card-link btn ' + (dark ? "btn-outline-light" : "btn-outline-info") + ' rounded-0">' + name + '</a>';
} }
} }

View file

@ -1,6 +1,7 @@
const socials = [{ const socials = [{
'name': 'Email', 'name': 'Email',
'link': 'mailto:me@ellpeck.de' 'link': 'mailto:me@ellpeck.de',
'darkIcon': true
}, },
{ {
'name': 'Discord', 'name': 'Discord',
@ -9,9 +10,11 @@ const socials = [{
{ {
'name': 'Twitter', 'name': 'Twitter',
'link': 'https://twitter.com/Ellpeck' 'link': 'https://twitter.com/Ellpeck'
}, { },
{
'name': 'GitHub', 'name': 'GitHub',
'link': 'https://github.com/Ellpeck/' 'link': 'https://github.com/Ellpeck/',
'darkIcon': true
}, },
{ {
'name': 'YouTube', 'name': 'YouTube',
@ -21,10 +24,10 @@ const socials = [{
'name': 'Twitch', 'name': 'Twitch',
'link': 'http://twitch.tv/ellpeck' 'link': 'http://twitch.tv/ellpeck'
}, },
{ {
'name': 'Reddit', 'name': 'Reddit',
'link': 'https://www.reddit.com/user/Ellpeck/' 'link': 'https://www.reddit.com/user/Ellpeck/',
'darkIcon': true
}, },
{ {
'name': 'Instagram', 'name': 'Instagram',
@ -50,8 +53,11 @@ const socials = [{
let s = ''; let s = '';
for (social of socials) { for (social of socials) {
s += '<a class="btn btn-light social-button rounded-0" href="' + social['link'] + '"">'; s += '<a class="btn ' + (dark ? "btn-dark" : "btn-light") + ' social-button rounded-0" href="' + social['link'] + '"">';
s += '<img class="social-image" src="res/social/' + social['name'].toLowerCase() + '.png" alt="">'; let icon = social['name'].toLowerCase();
if (dark && social['darkIcon'])
icon += '_dark';
s += '<img class="social-image" src="res/social/' + icon + '.png" alt="">';
s += social['name']; s += social['name'];
s += '</a>' s += '</a>'
} }

View file

@ -14,7 +14,7 @@ const support = [{
'name': 'Send me a gift', 'name': 'Send me a gift',
'desc': 'If you want to make a nice surprise, then you can get me something from my Amazon wishlist. I update it fairly regularly and items I want most are generally closer to the top. Keep in mind that the link goes to the German Amazon page, but for most products, you can just change the link a bit and it\'ll come up with the same. Please don\'t get me anything expensive, though.', 'desc': 'If you want to make a nice surprise, then you can get me something from my Amazon wishlist. I update it fairly regularly and items I want most are generally closer to the top. Keep in mind that the link goes to the German Amazon page, but for most products, you can just change the link a bit and it\'ll come up with the same. Please don\'t get me anything expensive, though.',
'link': 'https://ellpeck.de/wishlist', 'link': 'https://ellpeck.de/wishlist',
'icon': 'amazon' 'icon': dark ? 'amazon_dark' : 'amazon'
} }
]; ];
@ -23,7 +23,7 @@ for (way of support) {
sp += '<div class="row align-items-center">'; sp += '<div class="row align-items-center">';
sp += '<div class="col-md-auto">'; sp += '<div class="col-md-auto">';
sp += '<a class="btn btn-light support-button rounded-0" href="' + way['link'] + '"><img src="res/support/' + way['icon'] + '.png" class="support-image" alt="">' + way['name'] + '</a>'; sp += '<a class="btn ' + (dark ? "btn-dark" : "btn-light") + ' support-button rounded-0" href="' + way['link'] + '"><img src="res/support/' + way['icon'] + '.png" class="support-image" alt="">' + way['name'] + '</a>';
sp += '</div>'; sp += '</div>';
sp += '<div class="col support-desc">'; sp += '<div class="col support-desc">';