详细说明怎样简易完成CSS主题风格的✤转换

日期:2021-03-23 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

我非常近在我的本人网站在加上了一个十分简易的颜色计划方案(主题风格)转换器。您能够在网站的页脚中转换此简易的色调转换器,以查询实际上际实际效果。万一别的人期待将那样的作用加上到自身的站点/新项目中,我觉得我能写一篇简洁明了的文章内容表述怎样做。要我们刚开始吧。

HTML

最先,大家必须包括“按键”,这种按键将开启主题风格依据挑选的主题风格开展转换。(注:你一直可使这种做为 options 一个 select 原素,假如你最好的方式)

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

罢了!如今无须太担忧 onclick 主要参数,大家将在加上JavaScript时再返回这一点。剩余的唯逐一项是向 html 原素加上默认设置主题风格类,以下所显示:

<html class="theme-default">

CSS

接下去,大家必须为2个 color-select 按键设定款式,并应用将变更全部网站的自定颜色计划方案。大家将从颜色计划方案刚开始。

以便使这种主题风格中间可以无缝拼接转换,大家将变更的色调集设定为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);
}

最终,大家设定朝向客户的色板的款式:

.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

大家必须使每一个色样按键开启其相对的主题风格,并互换出 theme-default 大家最开始额外到主 html 原素上的类。大家还必须储存客户挑选的內容 localStorage ,因而在再次载入或导航栏到别的网页页面时,她们的挑选依然存有。

// 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');
    }
})();

便是那样!如今,这仅在于您期待每个主题风格款式的自定水平。将会性是无止尽!

到此这篇有关详细说明怎样简易完成CSS主题风格的转换的文章内容就详细介绍到这了,大量有关CSS主题风格的转换內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!