arnaucube/md-live-server
1
0
Fork 0
mirror of https://github.com/arnaucube/md-live-server.git synced 2026-02-07 20:06:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add theme switcher

Browse Source
This commit is contained in:
arnaucube
2020-05-29 00:01:47 +02:00
parent f4a55d1f1e
commit c905e2a5b3
6 changed files with 145 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
templates.go
View File

@@ -10,14 +10,39 @@ const dirTemplate = `
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.dark {
background:#000000;
color:#cccccc;
}
</style>
<body>
<body class="dark">
<input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">
{{.Content}}
<script>
let theme = localStorage.getItem("theme");
if (theme === "light") {
document.getElementById("themeSwitcher").checked = false;
document.body.className = theme;
}
function switchThemeClick() {
theme = localStorage.getItem("theme");
if (theme === "light") {
document.getElementById("themeSwitcher").checked = true;
theme = "dark";
localStorage.setItem("theme", theme);
} else {
document.getElementById("themeSwitcher").checked = false;
theme = "light";
localStorage.setItem("theme", theme);
}
document.body.className = theme;
}
</script>
</body>
</html>
`
@@ -29,19 +54,30 @@ const htmlTemplate = `
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.dark {
background:#000000;
color:#cccccc;
}
pre, code{
padding-left: 3px;
padding-right: 3px;
background: #333333;
border-radius: 3px;
background: #cccccc;
}
.dark pre, .dark code{
padding-left: 3px;
padding-right: 3px;
border-radius: 3px;
background: #333333;
}
pre{
padding: 5px;
}
pre>code {
color: #000000;
}
.dark pre>code {
color: #c0fffa;
}
h1:after{
@@ -54,7 +90,7 @@ h2:after{
display:block;
border:0.7px solid #cccccc;
}
th{
.dark th{
padding: 3px;
border: 1px solid #234b4f;
background-color: #143134;
@@ -63,10 +99,50 @@ td{
padding: 3px;
border: 1px solid #234b4f;
}
</style>
<body>
.container {
width: 100%;
padding-right: 1rem;
padding-left: 1rem;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 900px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 900px;
}
}
@media (min-width: 1400px) {
.container {
max-width: 900px;
}
}
</style>
<body class="dark">
<input onclick="switchThemeClick()" type="checkbox" id="themeSwitcher" style="float:right;">
<a href="/" title="go to root">root</a>
<div id="content" class="container">
{{.Content}}
</div>
<script>
(function() {
@@ -78,10 +154,32 @@ td{
conn.onmessage = function(evt) {
console.log('file updated');
// location.reload();
console.log("evt", evt);
document.getElementsByTagName("BODY")[0].innerHTML = evt.data;
// console.log("evt", evt);
document.getElementById("content").innerHTML = evt.data;
}
})();
let theme = localStorage.getItem("theme");
if (theme === "light") {
document.getElementById("themeSwitcher").checked = false;
document.body.className = theme;
}
function switchThemeClick() {
theme = localStorage.getItem("theme");
if (theme === "light") {
document.getElementById("themeSwitcher").checked = true;
theme = "dark";
localStorage.setItem("theme", theme);
} else {
document.getElementById("themeSwitcher").checked = false;
theme = "light";
localStorage.setItem("theme", theme);
}
document.body.className = theme;
}
</script>
</body>
</html>
@@ -99,6 +197,7 @@ body {
}
</style>
<body>
<a href="/" title="go to root">root</a>
<h3>File doesn't exist</h3>
<br><br>