View Icon ۸۵

بکارگیری دکمه دارک مود در تیلویند Tailwind Darkmode

... Loading
Post Pic

این یک نمونه از بکارگیری ساده دکمه دارک مود با ترکیب کدهای جاوا اسکریپت و سی اس اس هست که روی فریمورک Tailwind CSS انجام شده و باعث تغییر رنگ بک گراند که یک گردنیت بصورت انیمیشن است میشود. شماره کد: 1

منبع کد
HTML









charm

UI
CSS
/*
NOTE: This is just an experiment and
could use some changes to improve performance:
https://x.com/actualTimWilson/status/1730753841795158313
See a production optimized version here: https://charmui.com
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
body {
font-family: Inter, sans-serif;
}
@keyframes jumbo {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
.jumbo {
--stripes: repeating-linear-gradient(
100deg,
#fff 0%,
#fff 7%,
transparent 10%,
transparent 12%,
#fff 16%
);
--stripesDark: repeating-linear-gradient(
100deg,
#000 0%,
#000 7%,
transparent 10%,
transparent 12%,
#000 16%
);
--rainbow: repeating-linear-gradient(
100deg,
#60a5fa 10%,
#e879f9 15%,
#60a5fa 20%,
#5eead4 25%,
#60a5fa 30%
);
background-image: var(--stripes), var(--rainbow);
background-size: 300%, 200%;
background-position: 50% 50%, 50% 50%;
filter: blur(10px) invert(100%);
mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
pointer-events: none;
}
.jumbo::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--stripes), var(--rainbow);
background-size: 200%, 100%;
animation: jumbo 60s linear infinite;
background-attachment: fixed;
mix-blend-mode: difference;
}
.dark .jumbo {
background-image: var(--stripesDark), var(--rainbow);
filter: blur(10px) opacity(50%) saturate(200%);
}
.dark .jumbo::after {
background-image: var(--stripesDark), var(--rainbow);
}
JS
function toggleTheme() {
if (document.body.classList.contains("dark"))
document.body.classList.remove("dark");
else
document.body.classList.add("dark");
}
HTML
16
CSS
67
JS
6

CM
(۰)
 Copy link
Category:

Or Tailwind 

Tags:

Darkmode Tailwind UI piut0@ بک گراند انیمیشن تیلویند یوآی دارک مود 

Author:
newuiux
 Date:
شنبه, ۳۰ تیر ۱۴۰۳
 Number:
2