feat: Add Dark mode
Implements #2. Signed-off-by: Julien Riou <julien@riou.xyz>
This commit is contained in:
parent
3970501666
commit
beabdd5749
GPG key ID:
9A099EDA51316854
5 changed files with 77 additions and 27 deletions
|
|
@ -1,29 +1,29 @@
|
|||
{{define "create"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-bs-theme="light">
|
||||
|
||||
{{block "head" .}}{{end}}
|
||||
|
||||
<body>
|
||||
{{block "header" .}}{{end}}
|
||||
{{block "header" .}}{{end}}
|
||||
|
||||
<div class="container mb-4 text-center">
|
||||
{{if eq .Err nil}}
|
||||
{{if eq .Err nil}}
|
||||
<div class="alert alert-success" role="alert">
|
||||
<p>Note created successfully</p>
|
||||
<p>
|
||||
<a href="{{.URL}}">{{.URL}}</a>
|
||||
</p>
|
||||
</div>
|
||||
{{else}}
|
||||
{{else}}
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<p>Could not create note</p>
|
||||
<p><strong>{{.Err}}</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
{{block "footer" .}}{{end}}
|
||||
{{block "footer" .}}{{end}}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{{define "footer"}}
|
||||
<footer class="text-center">
|
||||
<small>Powered by <a href="https://git.riou.xyz/jriou/coller">coller</a>{{if ne .Version ``}} ({{.Version}}){{end}}</small>
|
||||
</footer>
|
||||
{{end}}
|
||||
{{define "footer"}}
|
||||
<footer class="text-center">
|
||||
<small>Powered by <a href="https://git.riou.xyz/jriou/coller">coller</a>{{if ne .Version ``}}
|
||||
({{.Version}}){{end}}</small>
|
||||
</footer>
|
||||
{{end}}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
{{define "head"}}
|
||||
|
||||
<head>
|
||||
<title>{{.Title}}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
</head>
|
||||
{{end}}
|
||||
|
|
@ -1,16 +1,63 @@
|
|||
{{define "header"}}
|
||||
<div class="text-center justify-content-center align-items-center bg-light border-bottom mb-4">
|
||||
<div class="container">
|
||||
<header class="d-flex flex-wrap py-2">
|
||||
<a class="d-flex mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" href="/">
|
||||
<span class="fs-3">{{.Title}}</span>
|
||||
</a>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/" aria-content="page">New note</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
</div>
|
||||
<div class="text-center justify-content-center align-items-center bg-light border-bottom mb-4" id="navHeader">
|
||||
<div class="container">
|
||||
<header class="d-flex flex-wrap py-2">
|
||||
<a class="d-flex mb-3 mb-md-0 me-md-auto text-dark text-decoration-none" id="titleHeader" href="/">
|
||||
<span class="fs-3">{{.Title}}</span>
|
||||
</a>
|
||||
<ul class="nav nav-pills align-items-center">
|
||||
<li class="nav-item">
|
||||
<div class="form-check form-switch"
|
||||
style="--bs-form-switch-width:60px;--bs-form-switch-height:30px">
|
||||
<input class="form-check-input" type="checkbox" role="switch" id="lightSwitch" />
|
||||
</div>
|
||||
</li>
|
||||
<label for="lightSwitch">Dark mode</label>
|
||||
</ul>
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item px-2">
|
||||
<a class="nav-link active" href="/" aria-content="page">New note</a>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function setTheme(theme) {
|
||||
if (theme == "dark") {
|
||||
setDarkTheme()
|
||||
} else if (theme == "light") {
|
||||
setLightTheme()
|
||||
}
|
||||
}
|
||||
|
||||
function setDarkTheme() {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'dark')
|
||||
document.getElementById('navHeader').classList.replace('bg-light', 'bg-dark')
|
||||
document.getElementById('titleHeader').classList.replace('text-dark', 'text-light')
|
||||
localStorage.setItem("theme", "dark")
|
||||
}
|
||||
|
||||
function setLightTheme() {
|
||||
document.documentElement.setAttribute('data-bs-theme', 'light')
|
||||
document.getElementById('navHeader').classList.replace('bg-dark', 'bg-light')
|
||||
document.getElementById('titleHeader').classList.replace('text-light', 'text-dark')
|
||||
localStorage.setItem("theme", "light")
|
||||
}
|
||||
|
||||
if (localStorage.getItem("theme")) {
|
||||
if (localStorage.getItem("theme") == "dark") {
|
||||
document.getElementById('lightSwitch').setAttribute('checked', true)
|
||||
}
|
||||
setTheme(localStorage.getItem("theme"))
|
||||
}
|
||||
|
||||
document.getElementById('lightSwitch').addEventListener('click', () => {
|
||||
if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
|
||||
setDarkTheme()
|
||||
} else if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
|
||||
setLightTheme()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
{{end}}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{{define "index"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-bs-theme="light">
|
||||
|
||||
{{block "head" .}}{{end}}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue