Add theme switcher
This commit is contained in:
Simon Stürz
Michael Zanetti
parent
2a1d5014ea
commit
2aa785aa6c
@ -15,8 +15,8 @@ extraimages.HTML = images/logo.png \
|
||||
# Include the style sheets and scripts used.
|
||||
|
||||
HTML.headerstyles = \
|
||||
" <link rel=\"stylesheet\" type=\"text/css\" href=\"style/main-dark.css\" id=\"theme\"/> \n" \
|
||||
" <script src=\"scripts/main.js\" /></script> \n" \
|
||||
" <link rel=\"stylesheet\" id=\"theme\"/ type=\"text/css\" href=\"style/main.css\"> \n" \
|
||||
" <script type="application/javascript" src=\"scripts/main.js\"/></script> \n" \
|
||||
" <link rel=\"apple-touch-icon-precomposed\" sizes=\"57x57\" href=\"apple-touch-icon-57x57.png\" /> \n" \
|
||||
" <link rel=\"apple-touch-icon-precomposed\" sizes=\"114x114\" href=\"apple-touch-icon-114x114.png\" /> \n" \
|
||||
" <link rel=\"apple-touch-icon-precomposed\" sizes=\"72x72\" href=\"apple-touch-icon-72x72.png\" /> \n" \
|
||||
|
||||
@ -22,7 +22,7 @@ HTML.postheader = \
|
||||
" <li><a href=\"write-plugins.html\">Write Plugins</a></li>\n" \
|
||||
" <li>\n" \
|
||||
" <label class=\"switch\">\n " \
|
||||
" <input type=\"checkbox\">\n" \
|
||||
" <input type=\"checkbox\" onclick=\"onSwitchChanged(this)\" id=\"themeSwitch\">\n" \
|
||||
" <span class=\"slider round\"></span>\n" \
|
||||
" </label>\n" \
|
||||
" </li>\n" \
|
||||
|
||||
@ -54,7 +54,7 @@ footer, header, hgroup, menu, nav, section {
|
||||
|
||||
body {
|
||||
line-height: 1.5;
|
||||
background: #676767;
|
||||
background: #202020;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
@ -261,7 +261,7 @@ a:hover {
|
||||
}
|
||||
|
||||
a {
|
||||
color: #eaeaea;
|
||||
color: #676767;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -299,18 +299,18 @@ strong {
|
||||
}
|
||||
|
||||
em {
|
||||
color: #d63843;
|
||||
color: #676767;
|
||||
}
|
||||
|
||||
ins {
|
||||
background: #efefef;
|
||||
color: #eaeaea;
|
||||
background: #333;
|
||||
color: #676767;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #efefef;
|
||||
color: #eaeaea;
|
||||
background: #333;
|
||||
color: #676767;
|
||||
}
|
||||
|
||||
q {
|
||||
@ -394,7 +394,7 @@ h6 {
|
||||
margin: 0 0 20px 0;
|
||||
font-family: "Ubuntu", Helvetica, "Helvetica Neue", Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
color: #6767671a;
|
||||
color: #a8a8a8;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@ -510,7 +510,7 @@ pre {
|
||||
padding: 10px;
|
||||
border: 1px solid #d3d5d6;
|
||||
border-radius: 3px;
|
||||
background: white;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
pre code {
|
||||
@ -568,9 +568,9 @@ textarea {
|
||||
}
|
||||
|
||||
html {
|
||||
color: #eaeaea;
|
||||
color: #aaa;
|
||||
font-family: "Ubuntu", Arial, Helvetica, sans-serif;
|
||||
background: #676767;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.header {
|
||||
@ -591,7 +591,7 @@ li {
|
||||
}
|
||||
|
||||
table {
|
||||
border: 1px solid #d3d5d6;
|
||||
border: 1px solid #606060;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-bottom: 5px;
|
||||
@ -601,7 +601,7 @@ table {
|
||||
table td {
|
||||
padding: 5px 20px;
|
||||
line-height: 1.5;
|
||||
border: 1px solid #d3d5d6;
|
||||
border: 1px solid #606060;
|
||||
}
|
||||
|
||||
div.table {
|
||||
@ -622,7 +622,7 @@ div.table {
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
background: #efefef;
|
||||
background: #333;
|
||||
border-bottom: 1px solid #dbdbdb;
|
||||
}
|
||||
|
||||
@ -695,7 +695,7 @@ div.table {
|
||||
}
|
||||
|
||||
.nymea-navbar-nav > li > a {
|
||||
color: #676767;
|
||||
color: white;
|
||||
font-size: 1.3rem;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
@ -812,7 +812,7 @@ div.header + li {
|
||||
top: 100px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: #676767
|
||||
background: #202020;
|
||||
box-sizing: border-box;
|
||||
width: 23.5% !important;
|
||||
padding: 40px 40px 160px 40px;
|
||||
@ -827,7 +827,7 @@ div.header + li {
|
||||
}
|
||||
|
||||
.content .sidebar h3 a {
|
||||
color: #676767;
|
||||
color: #a8a8a8;
|
||||
}
|
||||
|
||||
.content .sidebar ul li {
|
||||
@ -898,7 +898,7 @@ div.header + li {
|
||||
|
||||
.content a {
|
||||
text-decoration: none;
|
||||
color: #57baae;
|
||||
color: #439c91;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -914,7 +914,7 @@ div.header + li {
|
||||
height: 1px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #7cc09a;
|
||||
background-color: #333;
|
||||
visibility: hidden;
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
@ -935,7 +935,7 @@ div.header + li {
|
||||
pre {
|
||||
border: 1px solid #676767;
|
||||
resize: both;
|
||||
background: #3a4055;
|
||||
background: #141414;
|
||||
-moz-border-radius: 0.7em 0.7em 0.7em 0.7em;
|
||||
-webkit-border-radius: 0.7em 0.7em 0.7em 0.7em;
|
||||
border-radius: 0.7em 0.7em 0.7em 0.7em;
|
||||
@ -982,7 +982,7 @@ h2:after, h3.fn:after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
background: #d3d5d6;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
div.footer {
|
||||
@ -993,7 +993,7 @@ div.footer {
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
text-align: center;
|
||||
background: #efefef;
|
||||
background: #333;
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
@ -1034,7 +1034,7 @@ div.footer p {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padd
|
||||
background-color: #ccc;
|
||||
background-color: #a8a8a8;
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
@ -1052,11 +1052,11 @@ div.footer p {
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #57baaef3;
|
||||
background-color: #57baae;
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #57baaef3;
|
||||
box-shadow: 0 0 1px #a8a8a8;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
|
||||
45
doc/main.js
45
doc/main.js
@ -1,6 +1,7 @@
|
||||
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
* *
|
||||
* Copyright (C) 2017 Georgi Yatsev <georgi.yatsev@guh.io> *
|
||||
* Copyright (C) 2017 Georgi Yatsev <georgi.yatsev@guh.io> *
|
||||
* Copyright (C) 2018 Simon Stürz <simon.stuerz@guh.io> *
|
||||
* *
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy *
|
||||
* of this software and associated documentation files (the "Software"), to deal *
|
||||
@ -22,6 +23,48 @@
|
||||
* *
|
||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
||||
|
||||
function onSwitchChanged() {
|
||||
setDarkTheme(document.getElementById("themeSwitch").checked);
|
||||
}
|
||||
|
||||
function setDarkTheme(enabled) {
|
||||
if (enabled) {
|
||||
switchTheme("style/main-dark.css")
|
||||
} else {
|
||||
switchTheme("style/main.css")
|
||||
}
|
||||
|
||||
localStorage.setItem("darkTheme", enabled)
|
||||
}
|
||||
|
||||
function switchTheme(themeName) {
|
||||
console.log("Theme switched: " + themeName)
|
||||
document.getElementById("theme").setAttribute("href", themeName);
|
||||
}
|
||||
|
||||
function onLoaded() {
|
||||
var darkThemeEnabled = JSON.parse(localStorage.getItem('darkTheme')) || false
|
||||
|
||||
console.log("Initialize theme: " + (darkThemeEnabled ? "Dark theme" : "Light theme"))
|
||||
setDarkTheme(darkThemeEnabled)
|
||||
|
||||
console.log("Set theme switch " + darkThemeEnabled)
|
||||
var themeSwitch = document.getElementById("themeSwitch");
|
||||
if (darkThemeEnabled) {
|
||||
themeSwitch.checked = true;
|
||||
} else {
|
||||
themeSwitch.checked = false;
|
||||
}
|
||||
}
|
||||
|
||||
document.onreadystatechange = function () {
|
||||
console.log("--> " + document.readyState)
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
onLoaded()
|
||||
});
|
||||
|
||||
(function (root, factory) {
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define([], factory())
|
||||
|
||||
Reference in New Issue
Block a user