nutomic/ibis
1
0
Fork 0
mirror of https://github.com/Nutomic/ibis.git synced 2024-11-25 20:01:09 +00:00
Code Projects Releases Packages Activity

Add dark theme with toggle (fixes #49)

Browse source
This commit is contained in:
Felix Ableitner 2024-11-06 14:42:15 +01:00
parent f9a23236df
commit b9171acd07
3 changed files with 31 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/app.rs
View file

@ -92,7 +92,7 @@ pub fn App() -> impl IntoView {
view! { view! {
<Html attr:data-theme="emerald" class="h-full" /> <Html attr:data-theme="emerald" class="h-full" />
<Body class="min-h-full flex max-sm:flex-col md:divide-x divide-slate-300 divide-solid" /> <Body class="min-h-full flex max-sm:flex-col md:divide-x divide-slate-400 divide-solid" />
<> <>
<Stylesheet id="ibis" href="/pkg/ibis.css" /> <Stylesheet id="ibis" href="/pkg/ibis.css" />
<Stylesheet id="katex" href="/katex.min.css" /> <Stylesheet id="katex" href="/katex.min.css" />

13
src/frontend/components/nav.rs
View file

@ -22,7 +22,7 @@ pub fn Nav() -> impl IntoView {
let (search_query, set_search_query) = create_signal(String::new()); let (search_query, set_search_query) = create_signal(String::new());
view! { view! {
<nav class="max-sm:navbar p-2.5 bg-sky-50"> <nav class="max-sm:navbar p-2.5">
<div <div
id="navbar-start" id="navbar-start"
class="max-sm:navbar-start max-sm:flex max-sm:dropdown max-sm:dropdown-bottom max-sm:dropdown-end max-sm:w-full md:h-full" class="max-sm:navbar-start max-sm:flex max-sm:dropdown max-sm:dropdown-bottom max-sm:dropdown-end max-sm:w-full md:h-full"
@ -36,7 +36,7 @@ pub fn Nav() -> impl IntoView {
</button> </button>
<ul <ul
tabindex="0" tabindex="0"
class="menu dropdown-content p-2 max-sm:rounded-box bg-sky-50 max-sm:z-[1] max-sm:shadow md:h-full" class="menu dropdown-content p-2 max-sm:rounded-box max-sm:z-[1] max-sm:shadow md:h-full"
> >
<h1 class="px-4 py-2 text-3xl font-bold font-serif sm:hidden"> <h1 class="px-4 py-2 text-3xl font-bold font-serif sm:hidden">
{GlobalState::api_client().hostname} {GlobalState::api_client().hostname}
@ -120,6 +120,15 @@ pub fn Nav() -> impl IntoView {
</Show> </Show>
<div class="flex-grow min-h-2"></div> <div class="flex-grow min-h-2"></div>
<div class="m-1 grid gap-2"> <div class="m-1 grid gap-2">
<label class="flex cursor-pointer gap-2">
<span class="label-text">Light</span>
<input
type="checkbox"
value="dim"
class="toggle theme-controller select-none"
/>
<span class="label-text">Dark</span>
</label>
<p>"Version "{env!("CARGO_PKG_VERSION")}</p> <p>"Version "{env!("CARGO_PKG_VERSION")}</p>
<p> <p>
<a href="https://github.com/Nutomic/ibis" class="link"> <a href="https://github.com/Nutomic/ibis" class="link">

21
tailwind.config.js
View file

@ -12,6 +12,23 @@ module.exports = {
require('@tailwindcss/typography') require('@tailwindcss/typography')
], ],
daisyui: { daisyui: {
themes: ["emerald"] //themes: ["emerald", "dim"]
} themes: [
{
emerald: {
...require("daisyui/src/theming/themes")["emerald"],
"nav, .menu": {
"background-color": "theme(colors.sky.50)",
},
},
dim: {
...require("daisyui/src/theming/themes")["dim"],
"nav, .menu": {
"background-color": "theme(colors.sky.900)",
},
},
},
],
},
darkMode: ['class', '[data-theme="dim"]']
} }