theme.js 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. var themes = document.getElementById("theme-choices");
  2. var themePicker = document.getElementById("theme-picker");
  3. function switchThemeButtonState() {
  4. if (themes.style.display === "block") {
  5. themes.style.display = "none";
  6. themePicker.style.borderBottomRightRadius = "3px";
  7. themePicker.style.borderBottomLeftRadius = "3px";
  8. } else {
  9. themes.style.display = "block";
  10. themePicker.style.borderBottomRightRadius = "0";
  11. themePicker.style.borderBottomLeftRadius = "0";
  12. }
  13. };
  14. function handleThemeButtonsBlur(e) {
  15. var active = document.activeElement;
  16. var related = e.relatedTarget;
  17. if (active.id !== "themePicker" &&
  18. (!active.parentNode || active.parentNode.id !== "theme-choices") &&
  19. (!related ||
  20. (related.id !== "themePicker" &&
  21. (!related.parentNode || related.parentNode.id !== "theme-choices")))) {
  22. switchThemeButtonState();
  23. }
  24. }
  25. themePicker.onclick = switchThemeButtonState;
  26. themePicker.onblur = handleThemeButtonsBlur;
  27. ["dark","light"].forEach(function(item) {
  28. var but = document.createElement('button');
  29. but.innerHTML = item;
  30. but.onclick = function(el) {
  31. switchTheme(currentTheme, mainTheme, item);
  32. };
  33. but.onblur = handleThemeButtonsBlur;
  34. themes.appendChild(but);
  35. });