rvtr/wiki
1
Fork 0
mirror of https://github.com/rvtr/wiki.git synced 2025-10-31 06:31:13 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add manual theme selector

Browse Source
This commit is contained in:
Pk11 2021-06-01 22:03:02 -05:00
parent 13a5c8f483
commit 519d832852
4 changed files with 65 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_includes/footer.html
View File

@ -1,5 +1,7 @@
<footer class="bg-dark">
<div class="container">
<div class="row mb-3">
<div class="col-sm-10">
<p class="text-light">
{{ site.data[page.collection].strings.by | replace: "$1", '<a href="https://github.com/DS-Homebrew/" class="link">DS-Homebrew</a>'}} •
<a href="https://ds-homebrew.com/discord" title="{{ site.data[page.collection].strings.discord-server }}" class="clean">
@ -13,4 +15,14 @@
{{ site.data[page.collection].strings.published-with | replace: "$1", site.repo }}
</p>
</div>
<div class="col-sm-2">
<label for="themeSelector" class="text-light">Color scheme:</label>
<select id="themeSelector" class="form-select form-select-dark text-light" onchange="setTheme(value)">
<option value="default">Default</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
</div>
</div>
</div>
</footer>

1
_includes/head.html
View File

@ -17,6 +17,7 @@
{% endif %}
<link rel="stylesheet" type="text/css" media="screen" href="/assets/css/style.css">
<script src="/assets/js/theme.js"></script>
{% include favicon.html %}
{% include seo.html %}

6
assets/css/style.scss
View File

@ -480,6 +480,12 @@ input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline
border-color: #565e64;
}
// Select
.form-select-dark {
background-color: #444;
border: 1px solid #333;
}
@media only screen and (min-width: 576px) {
// Version of .position-absolute that only triggers for sm+
.position-absolute-sm {

34
assets/js/theme.js Normal file
View File

@ -0,0 +1,34 @@
function loadTheme() {
if(!localStorage.theme || localStorage.theme == "default") {
document.getElementById("themeCSS")?.remove();
} else {
if(document.getElementById("themeCSS")) {
document.getElementById("themeCSS").href = `/assets/css/${localStorage.theme}.css`;
} else {
let l = document.createElement("link");
l.rel = "stylesheet";
l.type = "text/css";
l.media = "screen";
l.href = `/assets/css/${localStorage.theme}.css`
l.id = "themeCSS";
document.head.appendChild(l);
}
}
}
function setTheme(theme) {
if(theme == "default")
delete localStorage.theme;
else
localStorage.theme = theme;
loadTheme();
}
loadTheme();
window.onload = () => {
if(localStorage.theme)
document.getElementById("themeSelector").value = localStorage.theme;
}