kristoferssolo/kristofersxyz
1
0
Fork 0
mirror of https://github.com/kristoferssolo/kristofersxyz.git synced 2025-10-21 18:30:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added jQuery

Browse Source
This commit is contained in:
Kristofers Solo 2023-01-21 14:04:58 +02:00
parent 87424d64d3
commit d977897ccd
2 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
static/main/js/lightmode.js
View File

@ -1,27 +1,31 @@
let lightmode = localStorage.getItem("lightmode") $(document).ready(function() {
const HTML = document.documentElement let lightmode = localStorage.getItem("lightmode")
const AUDIO = document.getElementById("flashbang") const HTML = $("html")
const AUDIO = $("#flashbang")
const ENABLE_LIGHT_MODE = () => { const enable_light_mode = () => {
HTML.setAttribute("data-color-mode", "light") HTML.attr("data-color-mode", "light")
$("meta[name='color-scheme']").attr("content", "light")
localStorage.setItem("lightmode", "enabled") localStorage.setItem("lightmode", "enabled")
} }
const DISABLE_LIGHT_MODE = () => { const disable_light_mode = () => {
HTML.setAttribute("data-color-mode", "dark") HTML.attr("data-color-mode", "dark")
$("meta[name='color-scheme']").attr("content", "dark")
localStorage.setItem("lightmode", null) localStorage.setItem("lightmode", null)
} }
if (lightmode === "enabled") { if (lightmode === "enabled") {
ENABLE_LIGHT_MODE() enable_light_mode()
} }
document.querySelector("#color-mode-toggle").addEventListener("click", () => { $("#color-mode-toggle").click(() => {
lightmode = localStorage.getItem("lightmode") lightmode = localStorage.getItem("lightmode")
if (lightmode !== "enabled") { if (lightmode !== "enabled") {
ENABLE_LIGHT_MODE() enable_light_mode()
AUDIO.play() AUDIO[0].play()
} else { } else {
DISABLE_LIGHT_MODE() disable_light_mode()
} }
})
}) })

5
templates/layout.html
View File

@ -3,7 +3,7 @@
<html lang="en" data-color-mode="dark"> <html lang="en" data-color-mode="dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="color-scheme" content="dark light"> <meta name="color-scheme" content="dark">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="{% static 'main/img/icons/logo.svg' %}" /> <link rel="icon" href="{% static 'main/img/icons/logo.svg' %}" />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@ -28,6 +28,7 @@
<link rel="stylesheet" <link rel="stylesheet"
type="text/css" type="text/css"
href="{% static 'main/css/layout.css' %}"/> href="{% static 'main/css/layout.css' %}"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="{% static 'main/js/navigation.js' %}" defer></script> <script src="{% static 'main/js/navigation.js' %}" defer></script>
<script src="{% static 'main/js/lightmode.js' %}" defer></script> <script src="{% static 'main/js/lightmode.js' %}" defer></script>
{% block meta %}{% endblock %} {% block meta %}{% endblock %}
@ -50,7 +51,7 @@
<a href="{% url 'projects' %}" class="bold">Projects</a> <a href="{% url 'projects' %}" class="bold">Projects</a>
<button id="color-mode-toggle" <button id="color-mode-toggle"
class="color-mode-toggle" class="color-mode-toggle"
aria-label="toggle dark mode "> aria-label="toggle dark mode">
<audio id="flashbang" <audio id="flashbang"
src="{% static 'main/audio/csgo-throwing-flashbang-sound-effect.m4a' %}"> src="{% static 'main/audio/csgo-throwing-flashbang-sound-effect.m4a' %}">
</audio> </audio>