apply prose invert based on the theme variant \o/
This commit is contained in:
parent
1eb249a510
commit
de3daea40e
3 changed files with 15 additions and 1 deletions
|
@ -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 */
|
/* Set appropriate width for identity icons */
|
||||||
a[rel] svg {
|
a[rel] svg {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
|
|
|
@ -2,4 +2,11 @@ defmodule ChiyaWeb.Layouts do
|
||||||
use ChiyaWeb, :html
|
use ChiyaWeb, :html
|
||||||
|
|
||||||
embed_templates "layouts/*"
|
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
|
end
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<!DOCTYPE html>
|
<!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>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
Loading…
Reference in a new issue