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

Add eventlistener for change of day/night mode

Browse Source 
And add a static js folder for js-files apart from the asset pipeline.
This commit is contained in:
Thelonius Kort
2023-02-05 20:14:06 +01:00
parent ab2e8ae816
commit ba2949a3bd
6 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/js/app.js
View File

@ -22,7 +22,8 @@ import {Socket} from "phoenix"
import {LiveSocket} from "phoenix_live_view" import {LiveSocket} from "phoenix_live_view"
import topbar from "../vendor/topbar" import topbar from "../vendor/topbar"
import {DarkModeHook} from './dark-mode' import {DarkModeHook} from './dark-mode-widget'
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, { let liveSocket = new LiveSocket("/live", Socket, {
params: {_csrf_token: csrfToken}, params: {_csrf_token: csrfToken},
@ -42,4 +43,3 @@ liveSocket.connect()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim() // >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket window.liveSocket = liveSocket

0
assets/js/dark-mode.js → assets/js/dark-mode-widget.js
View File

2
lib/outlook_web.ex
View File

@ -17,7 +17,7 @@ defmodule OutlookWeb do
those modules here. those modules here.
""" """
def static_paths, do: ~w(assets fonts images favicon.ico robots.txt) def static_paths, do: ~w(assets fonts images js favicon.ico robots.txt)
def router do def router do
quote do quote do

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

@ -7,17 +7,10 @@
<.live_title suffix=" · Ausblick"> <.live_title suffix=" · Ausblick">
<%= assigns[:page_title] %> <%= assigns[:page_title] %>
</.live_title> </.live_title>
<script type="text/javascript" src={"/js/dark-mode.js"}></script>
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} /> <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 defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script> </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> </head>
<body class="bg-white dark:bg-stone-900 dark:text-stone-100 antialiased max-h-screen"> <body class="bg-white dark:bg-stone-900 dark:text-stone-100 antialiased max-h-screen">
<%= @inner_content %> <%= @inner_content %>

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

@ -7,17 +7,10 @@
<.live_title suffix=" · Phoenix Framework"> <.live_title suffix=" · Phoenix Framework">
<%= assigns[:page_title] || "Outlook" %> <%= assigns[:page_title] || "Outlook" %>
</.live_title> </.live_title>
<script type="text/javascript" src={~p"/js/dark-mode.js"}></script>
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} /> <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 defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script> </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> </head>
<body class="bg-white antialiased max-h-screen"> <body class="bg-white antialiased max-h-screen">
<ul> <ul>

10
priv/static/js/dark-mode.js Normal file
View File

@ -0,0 +1,10 @@
function set_day_night_mode(){
// 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')
}
}
set_day_night_mode()
matchMedia('(prefers-color-scheme: dark)').addEventListener("change", set_day_night_mode)