inhji/chiya
inhji/chiya
1
1
Fork 0
Code Issues 8 Pull requests 9 Activity

add dark mode with toggle for admin \o/

Browse source
This commit is contained in:
Inhji 2023-03-17 20:46:25 +01:00
parent 401edc3f9b
commit c133b8b3a8
9 changed files with 73 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
assets/js/app.js
View file

@ -42,3 +42,22 @@ liveSocket.connect()
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket
document
.querySelector("#dark-mode-toggle")
.addEventListener("click", (e) => {
e.preventDefault()
const data = document.documentElement.dataset
if (data["mode"] && data["mode"] == "dark") {
delete data["mode"]
window.localStorage.removeItem("theme")
} else {
data["mode"] = "dark"
window.localStorage.setItem("theme", "dark")
}
})
console.log("boot complete!")

1
assets/tailwind.config.js
View file

@ -12,6 +12,7 @@ module.exports = {
"../lib/*_web.ex",
"../lib/*_web/**/*.*ex"
],
darkMode: ['class', '[data-mode="dark"]'],
theme: {
extend: {
colors: {

55
lib/chiya_web/components/core_components.ex
View file

@ -23,7 +23,7 @@ defmodule ChiyaWeb.CoreComponents do
"""
def line(assigns) do
~H"""
<hr class="my-6" />
<hr class="my-6 dark:border-gray-700" />
"""
end
@ -40,6 +40,15 @@ defmodule ChiyaWeb.CoreComponents do
<li class="text-xs leading-6 text-gray-100">
<%= @current_user.email %>
</li>
<li>
<.link
href=""
id="dark-mode-toggle"
class="text-xs leading-6 text-gray-100 font-semibold hover:text-gray-300"
>
<.icon name="hero-bolt-mini" class="h-4 w-4" />
</.link>
</li>
<li>
<.link
href={~p"/user"}
@ -97,7 +106,7 @@ defmodule ChiyaWeb.CoreComponents do
def live_upload(assigns) do
~H"""
<div>
<.live_file_input upload={@upload} />
<.live_file_input upload={@upload} class="dark:text-gray-300" />
<section phx-drop-target={@upload.ref}>
<%= for entry <- @upload.entries do %>
@ -273,8 +282,8 @@ defmodule ChiyaWeb.CoreComponents do
role="alert"
class={[
"fixed hidden top-2 right-2 w-80 sm:w-96 z-50 rounded-lg p-3 shadow-md shadow-gray-900/5 ring-1",
@kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900",
@kind == :error && "bg-rose-50 p-3 text-rose-900 shadow-md ring-rose-500 fill-rose-900"
@kind == :info && "bg-emerald-50 text-emerald-800 ring-emerald-500 fill-cyan-900 dark:bg-emerald-900 dark:text-emerald-200 hover:opacity-40",
@kind == :error && "bg-rose-50 p-3 text-rose-900 shadow-md ring-rose-500 fill-rose-900 dark:bg-rose-900 dark:text-rose-200 hover:opacity-40"
]}
{@rest}
>
@ -349,7 +358,7 @@ defmodule ChiyaWeb.CoreComponents do
def simple_form(assigns) do
~H"""
<.form :let={f} for={@for} as={@as} {@rest}>
<div class="space-y-8 bg-white mt-10">
<div class="space-y-8 bg-white dark:bg-gray-900 mt-10">
<%= render_slot(@inner_block, f) %>
<div :for={action <- @actions} class="mt-2 flex items-center justify-between gap-6">
<%= render_slot(action, f) %>
@ -379,7 +388,7 @@ defmodule ChiyaWeb.CoreComponents do
type={@type}
class={[
"phx-submit-loading:opacity-75 rounded-lg bg-gray-900 hover:bg-gray-700 py-2 px-3",
"text-sm font-semibold leading-6 text-white active:text-white/80",
"text-sm font-semibold leading-6 text-white active:text-white/80 dark:bg-gray-800 dark:hover:bg-gray-700",
@class
]}
{@rest}
@ -438,7 +447,7 @@ defmodule ChiyaWeb.CoreComponents do
~H"""
<div phx-feedback-for={@name}>
<label class="flex items-center gap-4 text-sm leading-6 text-gray-600">
<label class="flex items-center gap-4 text-sm leading-6 text-gray-600 dark:text-gray-300">
<input type="hidden" name={@name} value="false" />
<input
type="checkbox"
@ -446,7 +455,7 @@ defmodule ChiyaWeb.CoreComponents do
name={@name}
value="true"
checked={@checked}
class="rounded border-gray-300 text-gray-900 focus:ring-gray-900"
class="rounded border-gray-300 text-gray-900 focus:ring-gray-900 dark:text-gray-700 dark:focus:bg-gray-700 dark:border-gray-700 dark:bg-gray-700"
{@rest}
/>
<%= @label %>
@ -463,7 +472,7 @@ defmodule ChiyaWeb.CoreComponents do
<select
id={@id}
name={@name}
class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm"
class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 sm:text-sm dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400"
multiple={@multiple}
{@rest}
>
@ -487,6 +496,7 @@ defmodule ChiyaWeb.CoreComponents do
"text-gray-900 focus:border-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-800/5 sm:text-sm sm:leading-6",
"phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5",
"border-gray-300 focus:border-gray-400 focus:ring-gray-800/5",
"dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400",
@errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
]}
{@rest}
@ -510,6 +520,7 @@ defmodule ChiyaWeb.CoreComponents do
"text-gray-900 focus:outline-none focus:ring-4 sm:text-sm sm:leading-6",
"phx-no-feedback:border-gray-300 phx-no-feedback:focus:border-gray-400 phx-no-feedback:focus:ring-gray-800/5",
"border-gray-300 focus:border-gray-400 focus:ring-gray-800/5",
"dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:focus:border-gray-400",
@errors != [] && "border-rose-400 focus:border-rose-400 focus:ring-rose-400/10"
]}
{@rest}
@ -527,7 +538,7 @@ defmodule ChiyaWeb.CoreComponents do
def label(assigns) do
~H"""
<label for={@for} class="block text-sm font-semibold leading-6 text-gray-800">
<label for={@for} class="block text-sm font-semibold leading-6 text-gray-800 dark:text-gray-300">
<%= render_slot(@inner_block) %>
</label>
"""
@ -560,10 +571,10 @@ defmodule ChiyaWeb.CoreComponents do
~H"""
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
<div>
<h1 class="text-lg font-semibold leading-8 text-gray-800">
<h1 class="text-lg font-semibold leading-8 text-gray-800 dark:text-gray-200">
<%= render_slot(@inner_block) %>
</h1>
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-gray-600">
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">
<%= render_slot(@subtitle) %>
</p>
</div>
@ -615,27 +626,27 @@ defmodule ChiyaWeb.CoreComponents do
<tbody
id={@id}
phx-update={match?(%Phoenix.LiveView.LiveStream{}, @rows) && "stream"}
class="relative divide-y divide-gray-100 border-t border-gray-200 text-sm leading-6 text-gray-700"
class="relative divide-y divide-gray-100 border-t border-gray-200 text-sm leading-6 text-gray-700 dark:text-gray-200 dark:border-gray-700 dark:divide-gray-800"
>
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-gray-50">
<tr :for={row <- @rows} id={@row_id && @row_id.(row)} class="group hover:bg-gray-50 dark:hover:bg-gray-800">
<td
:for={{col, i} <- Enum.with_index(@col)}
phx-click={@row_click && @row_click.(row)}
class={["relative p-0", @row_click && "hover:cursor-pointer"]}
>
<div class="block py-4 pr-6">
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-gray-50 sm:rounded-l-xl" />
<span class={["relative", i == 0 && "font-semibold text-gray-900"]}>
<span class="absolute -inset-y-px right-0 -left-4 group-hover:bg-gray-50 sm:rounded-l-xl dark:group-hover:bg-gray-800" />
<span class={["relative", i == 0 && "font-semibold text-gray-900 dark:text-gray-100"]}>
<%= render_slot(col, @row_item.(row)) %>
</span>
</div>
</td>
<td :if={@action != []} class="relative p-0 w-14">
<div class="relative whitespace-nowrap py-4 text-right text-sm font-medium">
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-gray-50 sm:rounded-r-xl" />
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-gray-50 sm:rounded-r-xl dark:group-hover:bg-gray-800" />
<span
:for={action <- @action}
class="relative ml-4 font-semibold leading-6 text-gray-900 hover:text-gray-700"
class="relative ml-4 font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-100 dark:hover:text-gray-300"
>
<%= render_slot(action, @row_item.(row)) %>
</span>
@ -665,10 +676,10 @@ defmodule ChiyaWeb.CoreComponents do
def list(assigns) do
~H"""
<div class="mt-14">
<dl class="-my-4 divide-y divide-gray-100">
<dl class="-my-4 divide-y divide-gray-100 dark:divide-gray-800">
<div :for={item <- @item} class="flex gap-4 py-4 sm:gap-8">
<dt class="w-1/4 flex-none text-[0.8125rem] leading-6 text-gray-500"><%= item.title %></dt>
<dd class="text-sm leading-6 text-gray-700"><%= render_slot(item) %></dd>
<dt class="w-1/4 flex-none text-[0.8125rem] leading-6 text-gray-500 dark:text-gray-300"><%= item.title %></dt>
<dd class="text-sm leading-6 text-gray-700 dark:text-gray-400"><%= render_slot(item) %></dd>
</div>
</dl>
</div>
@ -690,7 +701,7 @@ defmodule ChiyaWeb.CoreComponents do
<div class="mt-16">
<.link
navigate={@navigate}
class="text-sm font-semibold leading-6 text-gray-900 hover:text-gray-700"
class="text-sm font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-400"
>
<.icon name="hero-arrow-left-solid" class="w-3 h-3" />
<%= render_slot(@inner_block) %>

14
lib/chiya_web/components/layouts/app.html.heex
View file

@ -1,33 +1,33 @@
<header class="px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between border-b border-gray-100 py-3">
<div class="flex items-center justify-between border-b border-gray-100 dark:border-gray-800 py-3">
<div class="flex items-center gap-4">
<a href="/">Chiya</a>
<p class="rounded-full bg-brand/5 px-2 text-[0.8125rem] font-medium leading-6 text-brand">
<a href="/" class="text-gray-900 font-semibold dark:text-gray-100">Chiya</a>
<p class="rounded-full bg-emerald-500/5 px-2 text-[0.8125rem] font-medium leading-6 text-emerald-500">
v<%= Application.spec(:chiya, :vsn) %>
</p>
</div>
<div class="flex items-center gap-4">
<.link
href={~p"/admin/notes"}
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
>
Notes
</.link>
<.link
href={~p"/admin/channels"}
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
>
Channels
</.link>
<.link
href={~p"/admin/identities"}
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
>
Identities
</.link>
<.link
href={~p"/admin/settings"}
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700 dark:text-gray-200"
>
Settings
</.link>

5
lib/chiya_web/components/layouts/public.html.heex
View file

@ -1,10 +1,7 @@
<header class="px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between border-b border-theme-dim py-3">
<div class="flex items-center gap-4">
<a href="/" class="text-theme-primary font-semibold hover:text-theme-primary/75">Chiya</a>
<p class="rounded-full bg-theme-base/5 px-2 text-[0.8125rem] font-medium leading-6 text-theme-base">
v<%= Application.spec(:chiya, :vsn) %>
</p>
<a href="/" class="text-theme-base font-semibold">Chiya</a>
</div>
<div class="flex items-center gap-4">
<.link

11
lib/chiya_web/components/layouts/root_app.html.heex
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" style="scrollbar-gutter: stable;">
<html lang="en" style="scrollbar-gutter: stable;" data-theme={@settings.theme}>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@ -10,8 +10,15 @@
<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>
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.dataset["mode"] = "dark"
} else {
delete document.documentElement.dataset["mode"]
}
</script>
</head>
<body class="bg-white antialiased">
<body class="bg-white dark:bg-gray-900 antialiased">
<.admin_bar current_user={@current_user} />
<%= @inner_content %>
</body>

2
lib/chiya_web/controllers/setting_html/show.html.heex
View file

@ -20,7 +20,7 @@
<:item title="Subtitle"><%= @setting.subtitle %></:item>
<:item title="Theme">
<%= @setting.theme %>
<div class="flex flex-row gap-2 bg-theme-background">
<div class="flex flex-row gap-2 bg-theme-background p-1 rounded-lg border">
<.icon name="hero-heart-solid" class="bg-theme-primary" />
<.icon name="hero-heart-solid" class="bg-theme-heading" />
<.icon name="hero-heart-solid" class="bg-theme-base" />

2
lib/chiya_web/live/note_show_live.ex
View file

@ -44,7 +44,7 @@ defmodule ChiyaWeb.NoteShowLive do
src={Chiya.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
/>
</a>
<p class="text-center text-xs text-gray-700">
<p class="text-center text-xs text-gray-700 dark:text-gray-300">
<a
href="#"
phx-click="delete_image"

2
lib/chiya_web/router.ex
View file

@ -12,11 +12,11 @@ defmodule ChiyaWeb.Router do
plug :protect_from_forgery
plug :put_secure_browser_headers
plug :fetch_current_user
plug :fetch_settings
end
pipeline :public do
plug :put_root_layout, {ChiyaWeb.Layouts, :root_public}
plug :fetch_settings
plug :fetch_identities
end