Commit d7ab23e2 authored by Johannes Tomren Røsvik's avatar Johannes Tomren Røsvik
Browse files

Merge branch '2-dark-mode' into 'dev'

Resolve "Dark mode"

See merge request !2
parents c9bf92a7 0cd68f5e
Pipeline #74283 passed with stage
in 1 minute and 3 seconds
......@@ -57,6 +57,17 @@
-->
</ul>
<div class="my-2 my-lg-0 mr-5">
<!-- Darkmode toggleswich -->
<a class="btn btn-link my-sm-0 mr-2">
<div class="custom-control custom-switch">
<input onclick="darkMode()" type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Dark Mode</label>
<svg class="bi bi-moon" width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.002 8.002 0 1010.586 10.586z"></path>
</svg>
</div>
</a>
{% if user.is_authenticated %}
<a role="button" class="btn btn-outline-primary my-2 my-sm-0" href="{% url 'new_project' %}">New project</a>
<a class="btn btn-link my-2 my-sm-0" href="{% url 'logout' %}" role="button">Sign out</a>
......@@ -77,5 +88,9 @@
{% endif %}
{% block content %}{% endblock content %}
</div>
<script src="{% static 'js/darkmode.js' %}"></script>
</body>
</html>
......@@ -66,3 +66,12 @@
.permis{
max-width:1000px;
}
.darkmode{
filter: invert(100%);
background-color: black;
}
.darkmode img{
filter: invert(100%);
}
\ No newline at end of file
// Initialize variables
let darkModeState = false;
let body = document.body;
let toggleButton = document.getElementById('customSwitch1');
// Set default value of localstorage if not set
if(localStorage.getItem("darkmode") == "true") {
darkModeState = true;
darkModeOn();
} else {
darkModeState = false;
darkModeOff();
}
// Toggle dark mode
function darkMode() {
if(darkModeState) {
darkModeOff();
} else {
darkModeOn();
}
}
// Turn on dark mode
function darkModeOn() {
darkModeState = true;
body.classList.add("darkmode");
localStorage.setItem("darkmode", "true");
toggleButton.checked = true
}
// Turn off dark mode
function darkModeOff() {
darkModeState = false;
body.classList.remove("darkmode");
localStorage.setItem("darkmode", "false");
toggleButton.checked = false
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment