Skip to content

Commit 90e3a9c

Browse files
wraczukwraczuk
authored
Add dark mode (#106, #285) (#517)
* add a draft of dark mode * remove flickering + refactor * add dependencies * move script from base.html to darkreader.js * move script from base.html to darkreader.js
1 parent bc9e872 commit 90e3a9c

File tree

10 files changed

+139
-9
lines changed

10 files changed

+139
-9
lines changed

‎oioioi/base/static/images/icons/Moon.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎oioioi/base/static/images/icons/sun.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎oioioi/base/static/js/darkreader.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { enable, disable } from 'darkreader';
2+
3+
if (localStorage.getItem("dark-mode") === "enabled") {
4+
enable();
5+
}
6+
7+
document.addEventListener("DOMContentLoaded", function () {
8+
const toggleButton = document.getElementById("dark-mode-toggle");
9+
toggleButton.addEventListener("click", function () {
10+
if (localStorage.getItem("dark-mode") === "enabled") {
11+
disable();
12+
localStorage.setItem("dark-mode", "disabled");
13+
} else {
14+
enable();
15+
localStorage.setItem("dark-mode", "enabled");
16+
}
17+
});
18+
});

‎oioioi/base/static/scss/_dark-mode-toggle.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
#dark-mode-toggle {
2+
margin-left: auto;
3+
position: relative;
4+
appearance: none;
5+
-webkit-appearance: none;
6+
-moz-appearance: none;
7+
width: 60px;
8+
height: 30px;
9+
border-radius: 30px;
10+
background-color: #a8adad;
11+
transition: all 0.5s ease-in;
12+
cursor: pointer;
13+
z-index: 1;
14+
}
15+
16+
#dark-mode-toggle::before {
17+
content: "";
18+
width: 25px;
19+
height: 25px;
20+
border-radius: 50%;
21+
background-color: #EEE;
22+
position: absolute;
23+
top: 50%;
24+
left: 3px;
25+
transform: translateY(-50%);
26+
transition: all 0.5s ease-in;
27+
background-image: url('../images/icons/sun.svg');
28+
background-size: 20px 20px;
29+
background-repeat: no-repeat;
30+
background-position: center;
31+
}
32+
33+
#dark-mode-toggle:checked {
34+
background-color: #a8adad;
35+
}
36+
37+
#dark-mode-toggle:checked::before {
38+
left: 32px;
39+
background-color: #333;
40+
background-image: url('../images/icons/Moon.svg');
41+
}

‎oioioi/base/static/scss/_footer.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "utility";
2+
@import "_dark-mode-toggle";
23

34
$oioioi-footer-bg: #f5f5f5 !default;
45
$oioioi-footer-height: 60px !default;
@@ -19,3 +20,9 @@ body {
1920
height: $oioioi-footer-height;
2021
justify-content: center;
2122
}
23+
24+
.footer-content {
25+
position: absolute;
26+
left: 50%;
27+
transform: translateX(-50%);
28+
}

‎oioioi/base/templates/base.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22

33
{% load i18n all_with_prefix common_media compress simple_tags get_clocks get_su static %}
44
{% site_displayed_tag %}
5-
65
<html lang="{{ LANGUAGE_CODE|default:"en" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
76
<head>
7+
<script src="{% static 'darkreader.bundle.js' %}"></script>
8+
89
{% block head %}
910
<title>{% block title %}{% trans "Main page" %}{% endblock %} - {{ site_name }}</title>
1011
<meta charset="UTF-8">
@@ -28,7 +29,6 @@
2829
{% common_styles %}
2930
{% endcompress %}
3031
{% endblock %}
31-
3232
{% block adminhead %}{% endblock %}
3333
{% all_with_prefix extra_head_ %}
3434

‎oioioi/base/templates/ingredients/footer.html‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
{% load i18n all_with_prefix %}
22
<footer class="footer container-fluid">
3-
<span class="text-muted">
4-
<!--
3+
<div class="footer-content">
4+
<span class="text-muted">
5+
<!--
56
Please make sure that the following text is visible. We are glad that
67
you are using SIO2 and we simply want the other people to learn about
78
this system, too. Thank you.
89
-->
9-
{% blocktrans trimmed %}
10-
Powered by <a href="https://www.github.com/sio2project/oioioi">OIOIOI</a>,
11-
from the <a href="https://github.com/sio2project">SIO2 Project</a>.
12-
{% endblocktrans %}
13-
</span>
10+
{% blocktrans trimmed %}
11+
Powered by <a href="https://www.github.com/sio2project/oioioi">OIOIOI</a>,
12+
from the <a href="https://github.com/sio2project">SIO2 Project</a>.
13+
{% endblocktrans %}
14+
</span>
15+
</div>
16+
<input type="checkbox" id="dark-mode-toggle">
17+
<script>
18+
if (localStorage.getItem("dark-mode") === "enabled") {
19+
document.getElementById("dark-mode-toggle").checked = true;
20+
}
21+
</script>
1422
{% all_with_prefix extra_footer_ %}
1523
</footer>
24+
25+

‎package-lock.json‎

Lines changed: 46 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"bootstrap-3-typeahead": "^4.0.2",
2323
"bootstrap-markdown": "^2.10.0",
2424
"clipboard": "^2.0.11",
25+
"darkreader": "^4.9.105",
2526
"highcharts": "^4.1.10",
2627
"highlight.js": "^11.11.1",
2728
"jqtree": "1.3.8",

‎webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ module.exports = {
77
datetimepicker: './oioioi/base/static/js/datetimepicker.js',
88
portal_tree: './oioioi/portals/static/portals/portal_tree.js',
99
timeline: './oioioi/timeline/static/timeline/timeline.js',
10+
darkreader: './oioioi/base/static/js/darkreader.js',
1011
},
1112
output: {
1213
filename: '[name].bundle.js',

0 commit comments

Comments
 (0)