From 2aa785aa6c5422638addf9426b27e3b8816e3627 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20St=C3=BCrz?= Date: Mon, 30 Jul 2018 22:00:05 +0200 Subject: [PATCH] Add theme switcher --- doc/html-styles.qdocconf | 4 +-- doc/html-template.qdocconf | 2 +- doc/main-dark.css | 50 +++++++++++++++++++------------------- doc/main.js | 45 +++++++++++++++++++++++++++++++++- 4 files changed, 72 insertions(+), 29 deletions(-) diff --git a/doc/html-styles.qdocconf b/doc/html-styles.qdocconf index 6fc643a0..54c0922d 100644 --- a/doc/html-styles.qdocconf +++ b/doc/html-styles.qdocconf @@ -15,8 +15,8 @@ extraimages.HTML = images/logo.png \ # Include the style sheets and scripts used. HTML.headerstyles = \ - " \n" \ - " \n" \ + " \n" \ + " \n" \ " \n" \ " \n" \ " \n" \ diff --git a/doc/html-template.qdocconf b/doc/html-template.qdocconf index 35d839ab..df636c98 100644 --- a/doc/html-template.qdocconf +++ b/doc/html-template.qdocconf @@ -22,7 +22,7 @@ HTML.postheader = \ "
  • Write Plugins
    • \n" \ "
  • \n" \ " \n" \ "
    • \n" \ diff --git a/doc/main-dark.css b/doc/main-dark.css index 6424b47c..2820dfe5 100644 --- a/doc/main-dark.css +++ b/doc/main-dark.css @@ -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 { diff --git a/doc/main.js b/doc/main.js index 6a99d529..57b09441 100644 --- a/doc/main.js +++ b/doc/main.js @@ -1,6 +1,7 @@ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * Copyright (C) 2017 Georgi Yatsev * + * Copyright (C) 2017 Georgi Yatsev * + * Copyright (C) 2018 Simon Stürz * * * * 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())