حالت dark/light در vue js

یکی از ترند های جدید طراحی اضافه کردن حالت Dark/light به وبسایت ها و برنامه ها هست. توی این پست راحت ترین . جامع ترین روش رو مورد بحث قرار میدیم.

در اصل به یه دکمه برای تغییر حالت نیاز دارین . پس اول دکمه رو که یه ورودی چک باکس استفاده میکنیم :

<a class>
<input type=&quotcheckbox&quot id=&quottheme-switch&quot class=&quottheme-switch&quot v-model=&quotdarkMode&quot />
<label for=&quottheme-switch&quot>
<span>
<svg viewBox=&quot0 0 285.919 285.919&quot class=&quottheme-switch&quot>
<pathd=&quotM142.959 0C64.131 0 0 64.132 0 142.96s64.131 142.959 142.959 142.959 142.96-64.131 142.96-142.959S221.787 0 142.959 0zm0 260.919V25c65.043 0 117.96 52.917 117.96 117.96 0 65.043-52.917 117.959-117.96 117.959z&quot/>
</svg>
</span>
</label>
</a>

در کد بالا از یه svg برای نمایش یه شکل گرافیکی استفاده شده که با توجه به نیاز خودتون میتونین اون رو تغییر بدین و مقدار darkmode رو برای مدل اینپوت خودمون ست میکنیم.

در ادامه با توجه به ظاهر خیلی ابتدای از کد sass زیر رو برای اسکریپت خودتون اضافه کنید :

input.theme-switch {
display: none;
}
input.theme-switch+label {
cursor: pointer;
}
input.theme-switch:not(:checked)+label:hover {
cursor: pointer;
}
input.theme-switch+label:active,
input.theme-switch:checked+label {
cursor: pointer;
}
svg.theme-switch {
fill: var(--dnicon);
width: 0.8em;
}

توی کد sass بالا مقداری به اسم var(--dnicon) رو میبینین. در اصل این مقدار برابر یک متغیر رنگی هست که شما میتونین اون رو ست کنید.

مثل عکس زیر :

و الان وقتشه که قابلیت تغییر تم رو به دکمه ای که ساختیم اضافه کنیم:

export default {
name: &quotdarkMode&quot,
data() {
return {
darkMode: true,
darkIconColor: &quot#4B4E64&quot
};
},
mounted() {
localStorage.setItem(&quottheme&quot, &quotdark&quot);
let bodyElement = document.body;
bodyElement.classList.add(&quotapp-background&quot);
let htmlElement = document.documentElement;
let theme = localStorage.getItem(&quottheme&quot);
if (theme === &quotdark&quot) {
htmlElement.setAttribute(&quottheme&quot, &quotdark&quot);
this.darkMode = true;
} else {
htmlElement.setAttribute(&quottheme&quot, &quotlight&quot);
this.darkMode = false;
}
},
watch: {
darkMode: function() {
let htmlElement = document.documentElement;
if (this.darkMode) {
localStorage.setItem(&quottheme&quot, &quotdark&quot);
htmlElement.setAttribute(&quottheme&quot, &quotdark&quot);
} else {
localStorage.setItem(&quottheme&quot, &quotlight&quot);
htmlElement.setAttribute(&quottheme&quot, &quotlight&quot);
}
}
}
};

و تمام! شما یک تم خیلی زیبا دارید.(سعی دارم برای این که کامپوننت بسازم . اگه شد میزارم توی npm و این پست رو ادیت میزنم)