Skip to content

Commit

Permalink
feat: add async update theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@dewanakl
dewanakl committed Oct 7, 2024
1 parent 1a3673d commit 8f2c035
Showing 1 changed file with 84 additions and 80 deletions.
164 changes: 84 additions & 80 deletions js/theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,46 +12,48 @@ export const theme = (() => {
document.documentElement.setAttribute('data-bs-theme', THEME_LIGHT);

const elements = document.querySelectorAll('.text-light, .btn-theme-light, .bg-dark, .bg-black, .bg-theme-dark, .color-theme-black, .btn-outline-light, .bg-cover-black');
elements.forEach((element) => {
if (element.classList.contains('text-light')) {
element.classList.remove('text-light');
element.classList.add('text-dark');
}

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

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

if (element.classList.contains('bg-black')) {
element.classList.remove('bg-black');
element.classList.add('bg-white');
}

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

if (element.classList.contains('color-theme-black')) {
element.classList.remove('color-theme-black');
element.classList.add('color-theme-white');
}

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

if (element.classList.contains('bg-cover-black')) {
element.classList.remove('bg-cover-black');
element.classList.add('bg-cover-white');
}
elements.forEach((el) => {
(async (element) => {
if (element.classList.contains('text-light')) {
element.classList.remove('text-light');
element.classList.add('text-dark');
}

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

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

if (element.classList.contains('bg-black')) {
element.classList.remove('bg-black');
element.classList.add('bg-white');
}

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

if (element.classList.contains('color-theme-black')) {
element.classList.remove('color-theme-black');
element.classList.add('color-theme-white');
}

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

if (element.classList.contains('bg-cover-black')) {
element.classList.remove('bg-cover-black');
element.classList.add('bg-cover-white');
}
})(el);
});

// --bs-body-bg
Expand All @@ -63,46 +65,48 @@ export const theme = (() => {
document.documentElement.setAttribute('data-bs-theme', THEME_DARK);

const elements = document.querySelectorAll('.text-dark, .btn-theme-dark, .bg-light, .bg-white, .bg-theme-light, .color-theme-white, .btn-outline-dark, .bg-cover-white');
elements.forEach((element) => {
if (element.classList.contains('text-dark')) {
element.classList.remove('text-dark');
element.classList.add('text-light');
}

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

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

if (element.classList.contains('bg-white')) {
element.classList.remove('bg-white');
element.classList.add('bg-black');
}

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

if (element.classList.contains('color-theme-white')) {
element.classList.remove('color-theme-white');
element.classList.add('color-theme-black');
}

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

if (element.classList.contains('bg-cover-white')) {
element.classList.remove('bg-cover-white');
element.classList.add('bg-cover-black');
}
elements.forEach((el) => {
(async (element) => {
if (element.classList.contains('text-dark')) {
element.classList.remove('text-dark');
element.classList.add('text-light');
}

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

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

if (element.classList.contains('bg-white')) {
element.classList.remove('bg-white');
element.classList.add('bg-black');
}

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

if (element.classList.contains('color-theme-white')) {
element.classList.remove('color-theme-white');
element.classList.add('color-theme-black');
}

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

if (element.classList.contains('bg-cover-white')) {
element.classList.remove('bg-cover-white');
element.classList.add('bg-cover-black');
}
})(el);
});

// --bs-body-bg
Expand Down

0 comments on commit 8f2c035

Please sign in to comment.