app: Implement dark theme and toggle

This commit is contained in:
Austin Alvarado 2023-03-21 03:50:17 -06:00 committed by GitHub
parent bf64c091cc
commit 80dfeb1293
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 69 additions and 10 deletions

View File

@ -6,15 +6,19 @@
<title>LLDAP Administration</title> <title>LLDAP Administration</title>
<script src="/static/main.js" type="module" defer></script> <script src="/static/main.js" type="module" defer></script>
<link <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css"
rel="preload stylesheet" rel="preload stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" integrity="sha384-CvItGYrXmque42UjYhp+bjRR8tgQz78Nlwk42gYsNzBc6y0DuXNtdUaRzr1cl2uK"
crossorigin="anonymous" crossorigin="anonymous"
as="style" /> as="style" />
<script <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js"
integrity="sha384-A4SLs39X/aUfwRclRaXvNeXNBTLZdnZdHhhteqbYFS2jZTRD79tKeFeBn7SGXNpi"
crossorigin="anonymous"></script>
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
@ -30,6 +34,11 @@
<link <link
rel="stylesheet" rel="stylesheet"
href="/static/style.css" /> href="/static/style.css" />
<script>
function inDarkMode(){
return darkmode.inDarkMode;
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>

View File

@ -6,13 +6,16 @@
<title>LLDAP Administration</title> <title>LLDAP Administration</title>
<script src="/static/main.js" type="module" defer></script> <script src="/static/main.js" type="module" defer></script>
<link <link
href="/static/bootstrap.min.css" href="/static/bootstrap-nightshade.min.css"
rel="preload stylesheet" rel="preload stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" integrity="sha384-CvItGYrXmque42UjYhp+bjRR8tgQz78Nlwk42gYsNzBc6y0DuXNtdUaRzr1cl2uK"
as="style" /> as="style" />
<script <script
src="/static/bootstrap.bundle.min.js" src="/static/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"></script> integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"></script>
<script
src="/static/darkmode.min.js"
integrity="sha384-A4SLs39X/aUfwRclRaXvNeXNBTLZdnZdHhhteqbYFS2jZTRD79tKeFeBn7SGXNpi"></script>
<link <link
rel="stylesheet" rel="stylesheet"
href="/static/bootstrap-icons.css" href="/static/bootstrap-icons.css"
@ -28,6 +31,11 @@
<link <link
rel="stylesheet" rel="stylesheet"
href="/static/style.css" /> href="/static/style.css" />
<script>
function inDarkMode(){
return darkmode.inDarkMode;
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>

View File

@ -17,6 +17,7 @@ use crate::{
}; };
use gloo_console::error; use gloo_console::error;
use wasm_bindgen::prelude::*;
use yew::{ use yew::{
function_component, function_component,
html::Scope, html::Scope,
@ -29,6 +30,25 @@ use yew_router::{
BrowserRouter, Switch, BrowserRouter, Switch,
}; };
#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_namespace = darkmode)]
fn toggleDarkMode(doSave: bool);
#[wasm_bindgen]
fn inDarkMode() -> bool;
}
#[function_component(DarkModeToggle)]
pub fn dark_mode_toggle() -> Html {
html! {
<div class="form-check form-switch">
<input class="form-check-input" onclick={|_| toggleDarkMode(true)} type="checkbox" id="darkModeToggle" checked={inDarkMode()}/>
<label class="form-check-label" for="darkModeToggle">{"Dark mode"}</label>
</div>
}
}
#[function_component(AppContainer)] #[function_component(AppContainer)]
pub fn app_container() -> Html { pub fn app_container() -> Html {
html! { html! {
@ -242,7 +262,7 @@ impl App {
<header class="p-2 mb-3 border-bottom"> <header class="p-2 mb-3 border-bottom">
<div class="container"> <div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"> <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mt-2 mb-lg-0 me-md-5 text-dark text-decoration-none"> <a href="/" class="d-flex align-items-center mt-2 mb-lg-0 me-md-5 text-decoration-none">
<h2>{"LLDAP"}</h2> <h2>{"LLDAP"}</h2>
</a> </a>
@ -251,7 +271,7 @@ impl App {
<> <>
<li> <li>
<Link <Link
classes="nav-link px-2 link-dark h6" classes="nav-link px-2 h6"
to={AppRoute::ListUsers}> to={AppRoute::ListUsers}>
<i class="bi-people me-2"></i> <i class="bi-people me-2"></i>
{"Users"} {"Users"}
@ -259,7 +279,7 @@ impl App {
</li> </li>
<li> <li>
<Link <Link
classes="nav-link px-2 link-dark h6" classes="nav-link px-2 h6"
to={AppRoute::ListGroups}> to={AppRoute::ListGroups}>
<i class="bi-collection me-2"></i> <i class="bi-collection me-2"></i>
{"Groups"} {"Groups"}
@ -269,6 +289,7 @@ impl App {
} } else { html!{} } } } } else { html!{} } }
</ul> </ul>
{ self.view_user_menu(ctx) } { self.view_user_menu(ctx) }
<DarkModeToggle />
</div> </div>
</div> </div>
</header> </header>
@ -281,7 +302,7 @@ impl App {
html! { html! {
<div class="dropdown text-end"> <div class="dropdown text-end">
<a href="#" <a href="#"
class="d-block link-dark text-decoration-none dropdown-toggle" class="d-block nav-link text-decoration-none dropdown-toggle"
id="dropdownUser" id="dropdownUser"
data-bs-toggle="dropdown" data-bs-toggle="dropdown"
aria-expanded="false"> aria-expanded="false">
@ -323,7 +344,7 @@ impl App {
fn view_footer(&self) -> Html { fn view_footer(&self) -> Html {
html! { html! {
<footer class="text-center text-muted fixed-bottom bg-light py-2"> <footer class="text-center fixed-bottom text-muted bg-light py-2">
<div> <div>
<span>{format!("LLDAP version {}", env!("CARGO_PKG_VERSION"))}</span> <span>{format!("LLDAP version {}", env!("CARGO_PKG_VERSION"))}</span>
</div> </div>

View File

@ -1,4 +1,5 @@
https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css
https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/js/darkmode.min.js
https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js
https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

View File

@ -10,3 +10,23 @@ header h2 {
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
} }
html.dark .bg-light {
background-color: rgba(59,59,59,1) !important;
}
html.dark a {
color: #e1e1e1
}
a {
color: #212529
}
html.dark .nav-link {
color: #e1e1e1
}
.nav-link {
color: #212529
}