怎么簡單實(shí)現(xiàn)CSS主題的切換

這篇文章給大家分享的是有關(guān)怎么簡單實(shí)現(xiàn)CSS主題的切換的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)成立于2013年，我們提供高端成都網(wǎng)站建設(shè)、成都網(wǎng)站制作公司、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、成都全網(wǎng)營銷、成都小程序開發(fā)、微信公眾號開發(fā)、營銷推廣服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來完成項(xiàng)目落地，為木托盤企業(yè)提供源源不斷的流量和訂單咨詢。

HTML

首先，我們需要包含“按鈕”，這些按鈕將觸發(fā)主題根據(jù)選擇的主題進(jìn)行切換。（注：你總是可以使這些作為 options 一個(gè) select 元素，如果你最好的方法）

<div class="color-select">
    <button onclick="toggleDefaultTheme()"></button>
    <button onclick="toggleSecondTheme()"></button>
    <button onclick="toggleThirdTheme()"></button>
</div>

而已！現(xiàn)在不必太擔(dān)心 onclick 參數(shù)，我們將在添加JavaScript時(shí)再回到這一點(diǎn)。剩下的唯一一項(xiàng)是向 html 元素添加默認(rèn)主題類，如下所示：

<html class="theme-default">

CSS

接下來，我們需要為兩個(gè) color-select 按鈕設(shè)置樣式，并使用將更改整個(gè)網(wǎng)站的自定義配色方案。我們將從配色方案開始。

為了使這些主題之間能夠無縫切換，我們將更改的顏色集設(shè)置為CSS變量：

.theme-default {
   --accent-color: #72f1b8;
   --font-color: #34294f;
}

.theme-second {
    --accent-color: #FFBF00;
    --font-color: #59316B;
}

.theme-third {
    --accent-color: #d9455f;
    --font-color: #303960;
}

body {
    background-color: var(--accent-color);
    color: var(--font-color);
}

最后，我們設(shè)置面向用戶的色板的樣式：

.color-select button {
    -moz-appearance: none;
    appearance: none;
    border: 2px solid;
    border-radius: 9999px;
    cursor: pointer;
    height: 20px;
    margin: 0 0.8rem 0.8rem 0;
    outline: 0;
    width: 20px;
}

/* Style each swatch to match the corresponding theme */
.color-select button:nth-child(1) { background: #72f1b8; border-color: #34294f; }
.color-select button:nth-child(2) { background: #FFBF00; border-color: #59316B; }
.color-select button:nth-child(3) { background: #d9455f; border-color: #303960; }

JavaScript

我們需要使每個(gè)色樣按鈕觸發(fā)其相應(yīng)的主題，并交換出 theme-default 我們最初附加到主 html 元素上的類。我們還需要存儲(chǔ)用戶選擇的內(nèi)容 localStorage ，因此在重新加載或?qū)Ш降狡渌撁鏁r(shí)，他們的選擇仍然存在。

// Set a given theme/color-scheme
function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
}

// Toggle between color themes
function toggleDefaultTheme() {
    if (localStorage.getItem('theme') !== 'theme-default'){
        setTheme('theme-default');
    }
}
function toggleSecondTheme() {
    if (localStorage.getItem('theme') !== 'theme-second'){
        setTheme('theme-second');
    }
}
function toggleThirdTheme() {
    if (localStorage.getItem('theme') !== 'theme-third'){
        setTheme('theme-third');
    }
}

// Immediately set the theme on initial load
(function () {
    if (localStorage.getItem('theme') === 'theme-default') {
        setTheme('theme-default');
    }
    if (localStorage.getItem('theme') === 'theme-second') {
        setTheme('theme-second');
    }
    if (localStorage.getItem('theme') === 'theme-third') {
        setTheme('theme-third');
    }
})();

感謝各位的閱讀！關(guān)于“怎么簡單實(shí)現(xiàn)CSS主題的切換”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

標(biāo)題名稱：怎么簡單實(shí)現(xiàn)CSS主題的切換
文章鏈接：http://bm7419.com/article28/pcsejp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、自適應(yīng)網(wǎng)站、虛擬主機(jī)、Google、品牌網(wǎng)站設(shè)計(jì)、App開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容