thelonius/phoenix-ausblick
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add dark mode

Browse Source
This commit is contained in:
Thelonius Kort
2023-02-04 23:10:57 +01:00
parent 4cb07692b1
commit ab2e8ae816
10 changed files with 102 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/outlook_web/components/layouts/app.html.heex
View File

@ -34,6 +34,7 @@
</a>
</div>
</div>
<.dark_mode_widget />
</header>
<main class="px-4 py-20 sm:px-6 lg:px-8">
<div class="mx-auto max-w-4xl">

10
lib/outlook_web/components/layouts/proot.html.heex
View File

@ -10,8 +10,16 @@
<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">
<body class="bg-white dark:bg-stone-900 dark:text-stone-100 antialiased max-h-screen">
<%= @inner_content %>
</body>
</html>

1
lib/outlook_web/components/layouts/public.html.heex
View File

@ -3,6 +3,7 @@
<img class="w-full" src="/images/elbefoto-lg.jpg"
src-set="elbefoto-xxl.jpg 4496w, /images/elbefoto-lg.jpg 2248w, /images/elbefoto-md.jpg 1199w, /images/elbefoto-sm.jpg 991w, /images/elbefoto-xs.jpg 767w">
</a>
<.dark_mode_widget />
</header>
<main class="px-4 py-20 sm:px-6 lg:px-8">
<div class="mx-auto max-w-4xl">

8
lib/outlook_web/components/layouts/root.html.heex
View File

@ -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>