Fix dark theme in demo

vkurko · Oct 20, 2023 · ce9c570 · ce9c570
1 parent f2a5c3b
commit ce9c570
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 3 deletions.
diff --git a/docs/global.css b/docs/global.css
@@ -61,6 +61,25 @@ body:not(.ec-dark) svg.dark {
 body.ec-dark svg.light {
  display: none;
 }
+@media (prefers-color-scheme: dark) {
+ body {
+ background: #22272e;
+ color: #adbac7;
+ }
+ body.ec-light {
+ background: #fff;
+ color: #000;
+ }
+ body:not(.ec-dark) svg.dark {
+ display: revert;
+ }
+ body:not(.ec-light) svg.light {
+ display: none;
+ }
+ body.ec-light svg.dark {
+ display: none;
+ }
+}
 .toggle-dark-button {
  color: inherit;
  border: 0;

diff --git a/docs/index.html b/docs/index.html
@@ -10,7 +10,7 @@
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
  <link rel="manifest" href="site.webmanifest">
- <link rel="stylesheet" href="global.css">
+ <link rel="stylesheet" href="global.css?20231020">
 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/[email protected]/event-calendar.min.css">
  <script src="https://cdn.jsdelivr.net/npm/@event-calendar/[email protected]/event-calendar.min.js"></script>
@@ -35,7 +35,7 @@
 
 <header class="row">
  <h4 class="col"><a href="https://github.com/vkurko/calendar">Event Calendar</a> Demo</h4>
- <button class="toggle-dark-button" title="Toggle dark mode" onclick="document.body.classList.toggle('ec-dark')">
+ <button class="toggle-dark-button" title="Toggle dark mode" onclick="toggleTheme()">
  <svg class="light" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg>
  <svg class="dark" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg>
  </button>
@@ -45,7 +45,7 @@ <h4 class="col"><a href="https://github.com/vkurko/calendar">Event Calendar</a>
 </main>
 
 <script type="text/javascript">
- let ec = new EventCalendar(document.getElementById('ec'), {
+ const ec = new EventCalendar(document.getElementById('ec'), {
  view: 'timeGridWeek',
  headerToolbar: {
  start: 'prev,next today',
@@ -100,6 +100,24 @@ <h4 class="col"><a href="https://github.com/vkurko/calendar">Event Calendar</a>
  let norm = Math.floor(Math.abs(num));
  return (norm < 10 ? '0' : '') + norm;
  }
+
+ /**
+ * Toggle theme
+ */
+ let themeClass = 'ec-dark';
+ if (window.matchMedia) {
+ const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+ if (matchMedia.matches) {
+ themeClass = 'ec-light';
+ }
+ matchMedia.addEventListener('change', function (event) {
+ document.body.classList.remove(themeClass);
+ themeClass = event.matches ? 'ec-light' : 'ec-dark';
+ });
+ }
+ function toggleTheme() {
+ document.body.classList.toggle(themeClass);
+ }
 </script>
 </body>
 </html>