analytics/assets/static/js/applyTheme.js
Vignesh Joglekar 425975efec
Adds dark mode to entire dashboard (#467)
* Adds New Dark Mode Assets

* Moves triangle for dropdown to a reasonable position

* Majority .eex dark implementation

* Fixes Logo Positioning

* Adds theme flag to user schema, uses it

* Uses correct variables for theme applicator script

* Minor missed theme changes/fallbacks

* Individual Component Support + Theme Context

* Sources Tab Support

This was a pain to test D:

* Partial Stats Sections Support

* More of stats modules supported

* Modal +table support

* Improves some Flatpickr in light theme, supports dark theme

* Fixes missed settings tab colors

* Finishes Devices module support

* Fixes bar graph colors

* Better colorizes maps module

* Undoes colorized bars

(they looked bad, on second thought)

* Fixes loading indicator

* Finishes conversions module

* Adds changelog entry

The PR number could be wrong, will double check

* Fixes missed header color

* Fixes naming of migration and removes static alter

* Does migration correctly

As I said, my Elixir is pretty weak heh

* Adds support for spike notifications setting

* Improves contrast and visibility for email settings

* Resolves @ukutaht's comments on #467

* Fixes missing dark style

* Found one more missed dark element (shared links)

* Formatting fixes
2020-12-16 11:57:28 +02:00

38 lines
949 B
JavaScript

var pref = document.currentScript.dataset.pref;
function reapplyTheme() {
var userPref = pref || "system";
var mediaPref = window.matchMedia('(prefers-color-scheme: dark)').matches;
var htmlRef = document.querySelector('html');
var hcaptchaRefs = document.getElementsByClassName('h-captcha');
htmlRef.classList.remove('dark');
for (let i = 0; i < hcaptchaRefs.length; i++) {
hcaptchaRefs[i].dataset.theme = "light";
}
switch (userPref) {
case "dark":
htmlRef.classList.add('dark');
for (let i = 0; i < hcaptchaRefs.length; i++) {
hcaptchaRefs[i].dataset.theme = "dark";
}
break;
case "system":
if (mediaPref) {
htmlRef.classList.add('dark');
for (let i = 0; i < hcaptchaRefs.length; i++) {
hcaptchaRefs[i].dataset.theme = "dark";
}
}
break;
}
}
reapplyTheme();
window.matchMedia('(prefers-color-scheme: dark)').addListener(reapplyTheme);
window.onload = function() {
reapplyTheme();
};