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

add theming to public pages, make default theme dark/light

Browse source
This commit is contained in:
Inhji 2023-03-29 18:47:45 +02:00
parent 46997c261d
commit c7c4f554f9
6 changed files with 29 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/css/app.css
View file

@ -6,13 +6,22 @@
@import "./lightbox.css";
@layer base {
:root {
--color-primary: 16 185 129;
:root[data-theme=default] {
--color-primary: 68 68 68;
--color-background: 255 255 255;
--color-text-base: 82 82 91;
--color-text-heading: 24 24 27;
--color-text-muted: 82 82 91;
--color-text-dim: 244 244 245;
--color-text-base: 68 68 68;
--color-text-heading: 68 68 68;
--color-text-muted: 153 153 153;
--color-text-dim: 204 204 204;
}
:root[data-theme=default][data-mode=dark] {
--color-primary: 255 255 255;
--color-background: 34 34 34;
--color-text-base: 204 204 204;
--color-text-heading: 255 255 255;
--color-text-muted: 102 102 102;
--color-text-dim: 68 68 68;
}
:root[data-theme=roguelight] {
@ -28,7 +37,7 @@
/*
Invert prose styles based on the variant of the theme.
*/
:root[data-variant=dark] .prose {
:root[data-mode=dark] .prose {
@apply prose-invert;
}

14
lib/chiya_web/components/admin_components.ex
View file

@ -70,15 +70,6 @@ defmodule ChiyaWeb.AdminComponents 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-sun-mini" class="h-4 w-4" />
</.link>
</li>
<li>
<.link
href={~p"/user"}
@ -107,10 +98,11 @@ defmodule ChiyaWeb.AdminComponents do
<% else %>
<li>
<.link
href={~p"/user/register"}
href="#"
id="dark-mode-toggle"
class="text-xs leading-6 text-gray-100 font-semibold hover:text-gray-300"
>
Register
<.icon name="hero-sun-mini" class="h-4 w-4" />
</.link>
</li>
<li>

7
lib/chiya_web/components/layouts.ex
View file

@ -2,11 +2,4 @@ defmodule ChiyaWeb.Layouts do
use ChiyaWeb, :html
embed_templates "layouts/*"
@doc """
Defines which themes are light and which are dark themes.
This influences the prose styles in app.css.
"""
def theme_variant(:default), do: "light"
def theme_variant(:roguelight), do: "dark"
end

9
lib/chiya_web/components/layouts/root_public.html.heex
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" style="scrollbar-gutter: stable;" data-theme={@settings.theme} data-variant={theme_variant(@settings.theme)}>
<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" />
@ -13,6 +13,13 @@
<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>
<style><%= @settings.custom_css %></style>
</head>
<body class="bg-theme-background antialiased">

2
lib/chiya_web/controllers/page_html/home.html.heex
View file

@ -1,6 +1,6 @@
<div class="px-4 py-10 sm:py-28 sm:px-6 lg:px-8 xl:py-32 xl:px-28">
<div class="mx-auto max-w-xl lg:mx-0">
<h1 class="mt-4 text-[2rem] font-semibold leading-10 tracking-tighter text-theme-primary">
<h1 class="mt-4 text-[2rem] font-semibold font-serif leading-10 tracking-tighter text-theme-primary">
<%= @settings.title %>
</h1>
<p class="mt-4 text-base leading-7 text-theme-base">

2
lib/chiya_web/controllers/page_html/note.html.heex
View file

@ -1,5 +1,5 @@
<header>
<h1 class="text-lg font-semibold leading-8 text-theme-heading"><%= @note.name %></h1>
<h1 class="text-2xl font-semibold leading-8 text-theme-heading font-serif"><%= @note.name %></h1>
<p class="mt-2 text-sm leading-6 text-theme-muted">
<%= pretty_date(@note.published_at) %>
</p>