68 lines
No EOL
2.7 KiB
HTML
68 lines
No EOL
2.7 KiB
HTML
{{define "header"}}
|
|
<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 px-2">
|
|
<a href="/clients.html">Command-line clients</a>
|
|
</li>
|
|
</ul>
|
|
<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}} |