Haldis/haldis
5
0
Fork 0
Code Issues 39 Pull requests Projects Releases Packages Wiki Activity

Dark theme users can toggle off darkmode + button color fix

Browse source
This commit is contained in:
kindtanton 2019-10-24 16:15:35 +02:00
parent d670b4d247
commit d865cd1b79
3 changed files with 8 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
app/static/css/main.css
View file

@ -17,6 +17,9 @@
.darkmode a { .darkmode a {
color: var(--dBlue); color: var(--dBlue);
} }
.darkmode .btn {
color: var(--dGray0);
}
.darkmode .navbar { .darkmode .navbar {
background-color: var(--dGray6); background-color: var(--dGray6);
} }
@ -63,58 +66,6 @@
text-align: center; text-align: center;
} }
@media (prefers-color-scheme: dark) {
body {
background-color: var(--dGray5);
color: var(--dGray1);
}
a {
color: var(--dBlue);
}
.navbar {
background-color: var(--dGray6);
}
.navbar-default .navbar-nav .active a{
background-color: var(--dGray4);
color: var(--dGray1);
}
.navbar-default .navbar-nav .active a:hover{
background-color: var(--dGray3);
color: var(--dGray0);
}
.navbar-default .navbar-nav li a,.navbar-default .navbar-brand{
color: var(--dGray1);
}
.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-brand:hover{
color: var(--dGray0);
}
hr{
border-top: 1px solid var(--dGray2);
}
h1, h2, h3{
color: var(--dGray0);
}
h4, h5{
color: var(--dGray1);
}
h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: var(--dGray3);
}
.jumbotron, .darker {
background-color: var(--dGray4)!important;
}
.table tbody tr td {
border-top: 1px solid var(--dGray3);
}
.table thead tr th {
border-bottom: 2px solid var(--dGray2);
}
}
body { body {
padding-top: 70px; padding-top: 70px;
} }

7
app/static/js/darkmode.js
View file

@ -6,15 +6,16 @@
} }
const toggleDarkmode = () => { const toggleDarkmode = () => {
localStorage.setItem("darkmodeChanged", 'true');
var newState = !(localStorage.getItem("darkmode") == 'true'); var newState = !(localStorage.getItem("darkmode") == 'true');
localStorage.setItem("darkmode", newState); localStorage.setItem("darkmode", newState);
enableDarkmode(); enableDarkmode();
} }
const enableDarkmode = () => { const enableDarkmode = () => {
if (typeof(Storage) !== "undefined") { if (typeof(Storage) !== "undefined") {
if(localStorage.getItem("darkmode") == 'true'){ if(localStorage.getItem("darkmode") == 'true' && localStorage.getItem("darkmodeChanged") == 'true' || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem("darkmodeChanged") != 'true')){
document.querySelector('body').classList.remove('lightmode'); document.querySelector('body').classList.remove('lightmode');
document.querySelector('body').classList.add('darkmode'); document.querySelector('body').classList.add('darkmode');
} else { } else {
document.querySelector('body').classList.remove('darkmode'); document.querySelector('body').classList.remove('darkmode');
document.querySelector('body').classList.add('lightmode'); document.querySelector('body').classList.add('lightmode');

2
app/templates/layout.html
View file

@ -29,7 +29,7 @@ Haldis - {{ active_page|capitalize }}
{% block scripts %} {% block scripts %}
{{ super() }} {{ super() }}
<script src="{{ url_for('static', filename='js/darkmode.js') }}"></script>> <script src="{{ url_for('static', filename='js/darkmode.js') }}"></script>
<script src="{{ url_for('static', filename='js/timer.js') }}"></script> <script src="{{ url_for('static', filename='js/timer.js') }}"></script>
{% endblock %} {% endblock %}