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

apply prose invert based on the theme variant \o/

Browse source
This commit is contained in:
Inhji 2023-03-16 07:30:58 +01:00
parent 1eb249a510
commit de3daea40e
3 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
assets/css/app.css
View file

@ -25,6 +25,13 @@
}
}
/*
Invert prose styles based on the variant of the theme.
*/
:root[data-variant=dark] .prose {
@apply prose-invert;
}
/* Set appropriate width for identity icons */
a[rel] svg {
width: 1em;

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

@ -2,4 +2,11 @@ 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

2
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}>
<html lang="en" style="scrollbar-gutter: stable;" data-theme={@settings.theme} data-variant={theme_variant(@settings.theme)}>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />