Add dark mode

2023-02-04 23:10:57 +01:00
parent 4cb07692b1
commit ab2e8ae816
10 changed files with 102 additions and 4 deletions
--- a/lib/outlook_web/components/layouts/root.html.heex
+++ b/lib/outlook_web/components/layouts/root.html.heex
@ -10,6 +10,14 @@
    <link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
    <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
    </script>
+    <script type="text/javascript">
+      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+      if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark')
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+    </script>
  </head>
  <body class="bg-white antialiased max-h-screen">
    <ul>