git/ddServer
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases 5 Packages Wiki Activity Actions

add dark-mode and theme switcher

Browse source
This commit is contained in:
Patryk Hegenberg 2023-12-06 08:38:23 +01:00
parent 4f69762b1f
commit d60d1df51e
4 changed files with 62 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

24
main.go
View file

@ -15,11 +15,14 @@ var (
//go:embed templates/*.html //go:embed templates/*.html
//go:embed images/* //go:embed images/*
content embed.FS content embed.FS
//go:embed static/*
static embed.FS
Monsters []model.Monster Monsters []model.Monster
) )
func main() { func main() {
filename := "" filename := ""
log.Printf("Eingebunden is %v\n", static)
http.HandleFunc("/", handlers.FormHandler(content, &Monsters, filename)) http.HandleFunc("/", handlers.FormHandler(content, &Monsters, filename))
http.HandleFunc("/submit", handlers.SubmitHandler(content, &chars, &Monsters, filename)) http.HandleFunc("/submit", handlers.SubmitHandler(content, &chars, &Monsters, filename))
@ -29,6 +32,27 @@ func main() {
http.HandleFunc("/contact", handlers.ContactHandler(content)) http.HandleFunc("/contact", handlers.ContactHandler(content))
http.HandleFunc("/monsterTable", handlers.MonsterTableHandler(content, &Monsters)) http.HandleFunc("/monsterTable", handlers.MonsterTableHandler(content, &Monsters))
// Lade die CSS-Datei
css, err := loadCSS(static)
if err != nil {
log.Fatal(err)
}
// Füge eine Route für die CSS-Datei hinzu
http.HandleFunc("/static/darkly_bulmawatch.css", func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Content-Type", "text/css")
w.Write([]byte(css))
})
log.Print("Server gestartet, erreichbar unter http://localhost:8080") log.Print("Server gestartet, erreichbar unter http://localhost:8080")
http.ListenAndServe(":8080", nil) http.ListenAndServe(":8080", nil)
} }
// loadCSS liest die CSS-Datei aus dem eingebetteten Dateisystem.
func loadCSS(content embed.FS) (string, error) {
file, err := content.ReadFile("static/darkly_bulmawatch.css")
if err != nil {
return "", err
}
return string(file), nil
}

7
static/darkly_bulmawatch.css Normal file
View file

File diff suppressed because one or more lines are too long

3
templates/base.html
View file

@ -9,7 +9,8 @@
<script src="https://unpkg.com/htmx.org@1.9.9" <script src="https://unpkg.com/htmx.org@1.9.9"
integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX" integrity="sha384-QFjmbokDn2DjBjq+fM+8LUIVrAgqcNW2s0PjAxHETgRn9l4fvX31ZxDxvwQnyMOX"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"> <link id="customStylesheet" rel="stylesheet" href="/static/darkly_bulmawatch.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head> </head>
<body> <body>

36
templates/header.html
View file

@ -26,14 +26,11 @@
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-item"> <div class="navbar-item">
<div class="buttons"> <button id="switchButton" class="button is-light">
<a class="button is-primary"> <span id="stylesheetIcon" class="icon">
<strong>Sign up</strong> <i class="fas fa-sun"></i>
</a> </span>
<a class="button is-light"> </button>
Log in
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -54,5 +51,28 @@
</section> </section>
</div> </div>
</div> </div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const switchButton = document.getElementById("switchButton");
const stylesheetIcon = document.getElementById("stylesheetIcon");
if (switchButton) {
switchButton.addEventListener('click', switchStylesheet);
}
function switchStylesheet() {
const link = document.getElementById("customStylesheet");
// Ändere das Icon basierend auf dem aktuellen Stylesheet
if (link.getAttribute("href") === "/static/darkly_bulmawatch.css") {
link.setAttribute("href", "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css");
stylesheetIcon.innerHTML = '<i class="fas fa-moon"></i>'; // Zum Mond-Icon wechseln
} else {
link.setAttribute("href", "/static/darkly_bulmawatch.css");
stylesheetIcon.innerHTML = '<i class="fas fa-sun"></i>'; // Zum Sonnen-Icon wechseln
}
}
});
</script>
</header> </header>
{{ end }} {{ end }}