Skip to content

Commit

Permalink
fix: dark mode color
Browse files Browse the repository at this point in the history
  • Loading branch information
@dewanakl
dewanakl committed Apr 21, 2024
1 parent 0c0d46e commit 9ec9f56
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 16 deletions.
16 changes: 8 additions & 8 deletions dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,7 +211,7 @@ <h4 class="m-0 p-0 flex-grow-1 text-end" id="dashboard-name">
</div>

<!-- Form -->
<div class="bg-light p-3 my-2 rounded-4 shadow">
<div class="bg-theme-light p-3 my-2 rounded-4 shadow">
<label for="form-comment" class="form-label fw-bold"><i class="fa-solid fa-comment me-1"></i>Comment</label>
<textarea class="form-control shadow-sm mb-3 rounded-3" id="form-comment" name="form-comment" placeholder="Type to comment"></textarea>

Expand Down Expand Up @@ -252,13 +252,13 @@ <h4 class="m-0 p-0 flex-grow-1 text-end" id="dashboard-name">
</div>

<!-- Email -->
<div class="p-3 bg-light mb-3 rounded-4 shadow">
<div class="p-3 bg-theme-light mb-3 rounded-4 shadow">
<p class="mx-0 mt-0 mb-1 p-0 fw-bold"><i class="fa-solid fa-envelope me-1"></i>Email</p>
<p class="m-0 p-0" id="dashboard-email"></p>
</div>

<!-- Name -->
<div class="p-3 bg-light mb-3 rounded-4 shadow">
<div class="p-3 bg-theme-light mb-3 rounded-4 shadow">
<p class="mx-0 mt-0 mb-1 p-0 fw-bold"><i class="fa-solid fa-person me-1"></i>Name</p>
<form>
<div class="mb-3">
Expand All @@ -273,7 +273,7 @@ <h4 class="m-0 p-0 flex-grow-1 text-end" id="dashboard-name">
</div>

<!-- Access Key -->
<div class="p-3 bg-light mb-3 rounded-4 shadow">
<div class="p-3 bg-theme-light mb-3 rounded-4 shadow">
<p class="mx-0 mt-0 mb-1 p-0 fw-bold"><i class="fa-solid fa-key me-1"></i>Access Key</p>

<div class="input-group input-group-sm rounded-3 mb-3">
Expand All @@ -289,7 +289,7 @@ <h4 class="m-0 p-0 flex-grow-1 text-end" id="dashboard-name">
</div>

<!-- Toggle -->
<div class="p-3 bg-light mb-3 rounded-4 shadow">
<div class="p-3 bg-theme-light mb-3 rounded-4 shadow">
<p class="mx-0 mt-0 mb-1 p-0 fw-bold"><i class="fa-solid fa-sliders me-1"></i>Control</p>

<div class="form-check form-switch mb-1">
Expand All @@ -315,7 +315,7 @@ <h4 class="m-0 p-0 flex-grow-1 text-end" id="dashboard-name">
</div>

<!-- Change Password -->
<div class="p-3 bg-light mb-3 rounded-4 shadow">
<div class="p-3 bg-theme-light mb-3 rounded-4 shadow">
<p class="mx-0 mt-0 mb-3 p-0 fw-bold"><i class="fa-solid fa-lock me-1"></i>Change Password</p>
<form>
<input hidden type="text" name="username" autocomplete="username" value="...">
Expand All @@ -335,14 +335,14 @@ <h4 class="m-0 p-0 flex-grow-1 text-end" id="dashboard-name">

<!-- Logout -->
<div class="d-md-none d-lg-none d-xl-none">
<div class="p-3 bg-light mb-3 rounded-4 shadow">
<div class="p-3 bg-theme-light mb-3 rounded-4 shadow">
<button type="button" class="btn btn-danger btn-sm w-100 text-center fw-semibold rounded-3" onclick="session.logout()">
<i class="fa-solid fa-right-from-bracket me-2"></i>Logout
</button>
</div>
</div>

<div class="p-3 bg-light mb-4 rounded-4 shadow">
<div class="p-3 bg-theme-light mb-4 rounded-4 shadow">
<div class="row align-items-center justify-content-between">
<div class="col-auto">
<small>
Expand Down
8 changes: 4 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
<body data-key="bfb9cfea33ab7ae21a315fbd6f065a815d3e20ff2f007aa2ca" data-url="https://api.ulems.my.id/" style="overflow-y: hidden;">

<!-- Navbar Bottom -->
<nav class="navbar bg-theme-dark navbar-expand fixed-bottom rounded-top-4 p-0" id="navbar-menu">
<nav class="navbar bg-dark navbar-expand fixed-bottom rounded-top-4 p-0" id="navbar-menu">
<ul class="navbar-nav nav-justified w-100 align-items-center">
<li class="nav-item">
<a class="nav-link" href="#home">
Expand Down Expand Up @@ -107,7 +107,7 @@
</nav>

<!-- Main Content -->
<main class="text-light" data-bs-spy="scroll" data-bs-target="#navbar-menu" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">
<main class="bg-dark text-light" data-bs-spy="scroll" data-bs-target="#navbar-menu" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">

<!-- Home -->
<section class="container" id="home">
Expand Down Expand Up @@ -577,12 +577,12 @@ <h1 class="font-esthetic my-4" style="font-size: 2.5rem;">Wahyu & Riski</h1>
</div>

<!-- Theme Button -->
<button type="button" id="button-theme" style="display: none;" class="btn bg-theme-dark border border-2 btn-sm rounded-circle btn-theme" onclick="theme.change()">
<button type="button" id="button-theme" style="display: none;" class="btn bg-dark border border-2 btn-sm rounded-circle btn-theme" onclick="theme.change()">
<i class="fa-solid fa-circle-half-stroke"></i>
</button>

<!-- Audio Button -->
<button type="button" id="button-music" style="display: none;" class="btn bg-theme-dark border border-2 btn-sm rounded-circle btn-music" onclick="audio.button(this)" data-status="true" data-url="./assets/music/sound.mp3">
<button type="button" id="button-music" style="display: none;" class="btn bg-dark border border-2 btn-sm rounded-circle btn-music" onclick="audio.button(this)" data-status="true" data-url="./assets/music/sound.mp3">
<i class="fa-solid fa-circle-pause spin-button"></i>
</button>

Expand Down
12 changes: 8 additions & 4 deletions js/theme.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export const theme = (() => {

if (element.classList.contains('bg-dark')) {
element.classList.remove('bg-dark');
element.classList.add('bg-theme-light');
element.classList.add('bg-light');
}

if (element.classList.contains('bg-black')) {
Expand Down Expand Up @@ -63,7 +63,7 @@ export const theme = (() => {

if (element.classList.contains('bg-light')) {
element.classList.remove('bg-light');
element.classList.add('bg-theme-dark');
element.classList.add('bg-dark');
}

if (element.classList.contains('bg-white')) {
Expand Down Expand Up @@ -111,8 +111,12 @@ export const theme = (() => {
};

const check = () => {
if (!theme.has('active') && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme.set('active', THEME_DARK);
if (!theme.has('active')) {
theme.set('active', THEME_LIGHT);

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
theme.set('active', THEME_DARK);
}
}

if (isDarkMode()) {
Expand Down

0 comments on commit 9ec9f56

Please sign in to comment.