dnitza/adamantium
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add light/dark mode toggle

Browse Source
This commit is contained in:
Daniel Nitsikopoulos
2024-01-08 18:06:36 +11:00
parent 941cbca8e8
commit 21131fba6b
6 changed files with 9962 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/js/app.js
View File

@@ -4,6 +4,10 @@ import { md_gallery } from "./gallery.js";
(function() {
document.addEventListener("DOMContentLoaded", function () {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
localStorage.setItem("_x_darkMode", event.matches ? true : false)
});
if (window.hljs !== undefined) {
window.hljs.highlightAll();
}

14
app/templates/layouts/app.html.slim
View File

@@ -1,5 +1,5 @@
doctype html
html
html x-data="{darkMode: $persist(false)}" :class="{'dark' : darkMode === true}"
head
meta charest="utf-8"
@@ -29,17 +29,18 @@ html
link rel="icon" type="image/x-icon" href="/assets/favicon.ico"
script data-domain="dnitza.com" src="https://stats.dnitza.com/js/script.js" defer=""
= javascript_tag "app"
script src="https://unpkg.com/htmx.org@1.9.2/dist/htmx.min.js" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"
script src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js" defer=""
script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.13.3/dist/cdn.min.js"
= javascript_tag "app"
script src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js" defer=""
link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/styles/github-dark.min.css"
script src="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/highlight.min.js" defer=""
- if Hanami.app.settings.micropub_pub_key
link rel="pgpkey" href="/key"
body class="bg-white dark:bg-indigo-950 selection:bg-blue-100 selection:text-blue-900 dark:selection:bg-amber-600 dark:selection:text-amber-400" x-data="{ imgModal : false, imgModalSrc : '', imgModalDesc : '' }" x-on:keydown.escape="imgModal=false"
body class="transition-colors bg-white dark:bg-indigo-950 selection:bg-blue-100 selection:text-blue-900 dark:selection:bg-amber-600 dark:selection:text-amber-400" x-data="{ imgModal : false, imgModalSrc : '', imgModalDesc : '' }" x-on:keydown.escape="imgModal=false"
main class="pb-8 px-4 pt-4 md:pt-8"
header class="mb-12 max-w-screen-md mx-auto items-center md:items-justify"
div class="flex mb-8 md:mb-12 text-lg md:text-xl text-gray-400 dark:text-gray-600 grid grid-cols-1 md:grid-cols-2"
@@ -57,6 +58,11 @@ html
span class="text-gray-400 dark:text-gray-600"
= "/"
a class="transition-colors p-1 rounded text-gray-400 hover:bg-orange-100 hover:text-orange-400 dark:hover:bg-orange-800" href="#{Hanami.app.settings.micropub_site_url}/feeds/rss" RSS
span class="text-gray-400 dark:text-gray-600"
= "/"
button x-data="" @click="darkMode = ! darkMode"
span class="opacity-80 hover:opacity-100 hidden dark:block" ☀️
span class="opacity-80 hover:opacity-100 block dark:hidden" 🌝
== yield
div class="px-4 max-w-screen-md mx-auto pb-10"
p class="float-left text-gray-200 dark:text-indigo-900" © 2023 Daniel Nitsikopoulos. All rights reserved.

4
config/app.rb
View File

@@ -11,7 +11,9 @@ module Adamantium
config.actions.content_security_policy[:script_src] += " https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"
config.actions.content_security_policy[:media_src] += " https://dnitza.com"
config.actions.content_security_policy[:script_src] += " https://unpkg.com/htmx.org@1.9.2/dist/htmx.min.js "
config.actions.content_security_policy[:script_src] += " https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js"
config.actions.content_security_policy[:script_src] += " https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"
config.actions.content_security_policy[:script_src] += " https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.13.3/dist/cdn.min.js"
config.actions.content_security_policy[:script_src] += " https://unpkg.com/@highlightjs/cdn-assets@11.8.0/highlight.min.js"
config.actions.content_security_policy[:connect_src] += " https://stats.dnitza.com/api/event https://*.mapbox.com"
config.actions.content_security_policy[:frame_src] += " https://embed.music.apple.com https://www.youtube.com https://player.vimeo.com"

10427
public/assets/admin/app.css
View File

File diff suppressed because it is too large Load Diff

6
public/assets/index.js
View File

@@ -1,4 +1,10 @@
(function() {
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')
}
document.addEventListener('alpine:init', () => {
Alpine.magic('clipboard', () => {
return subject => navigator.clipboard.writeText(subject)

1
tailwind.config.js
View File

@@ -3,6 +3,7 @@
const colors = require("tailwindcss/colors");
module.exports = {
darkMode: 'class',
content: ["./app/templates/**/*.slim", "./slices/admin/templates/**/*.slim", "./public/assets/index.js", "app/decorators/*/decorator.rb"],
safelist: [
{