优化增强主题颜色切换功能

2周前 162

技术相关

本文是《技术相关（共60篇）》目录的第 56 篇。阅读本文前，建议先阅读本文前3篇文章：

6月中旬，为了更好地体验本站，我在前台增加了颜色切换功能，并把主题自带的颜色扩展成了6个。当时全局变量感觉我加载6个css配色有点多，我觉得也是，因为这6个配色文件完全就是基于那个紫色改的，结构完全相同，就是其中的颜色代码不一样。无奈技术不行，期间有重要的难题没有解决，一直搁浅。又过了一个星期，我又提供了手机浏览模式下的颜色切换功能，一直用到现在。

PIX主题后台扩展配色并在前台为游客提供调色板本站使用的PIX主题配色，除了自带的绿色、紫色和黑色外，最近新增了深海蓝、珍珠灰、暖沙白和象牙黄，为了统一的命名，又将绿色和紫色修改为春芽绿和霓虹紫。黑色其实就是黑夜模式，但是我的网站LOGO背身文字... 时间:2025/6/18 分类:技术相关

啪啪打脸 PIX主题手机平板模式增加侧边栏及配色原则上，代码对安卓系统、苹果系统、鸿蒙系统、UNIX/LINUX系统以及WINDOWS系统，包括横屏和竖屏全平台做了兼容性处理，但是有非鸿蒙系统的童鞋发现什么BUG请评论告知一下。前段时间我写了《增... 时间:2025/6/24 分类:技术相关

前几天，威言威语写了一篇文章《深色模式的设计思考》，我看了之后就想起来这件事情了。我当时留了言，想请他提供一下思路，没想到很快大神给我邮箱发了一个写好的DEMO。

我用元宝分析了DEMO的逻辑，大致是通过类选择器(.theme-green, .theme-red等)定义了不同主题的CSS变量，所有样式属性都使用var(--variable-name)引用这些变量，用户点击颜色选项时，从data-theme属性获取主题名称，先移除<html>元素上所有主题类，再添加对应的主题。

知道了逻辑就很好办了，于是开启了改造升级之路，涉及文件及路径请看上面的2篇文章。

1、合并CSS为themes.css存储在原来6个颜色样式的同级目录，并增加深邃黑颜色，代码如下：

/* ============================================= */
/* 基础样式和默认变量 (green-normal主题) */
/* ============================================= */
:root {
    /* 颜色变量 */
    --body-bg-color: #d0dada;
    --withe-bg-color: #f6faf8;
    --light-bg-color: #f6faf8;
    --linear-color: linear-gradient(90deg, #22bb6d, #16e186);
    --shadow-bg: 0px 7px 20px 1px rgba(180, 214, 196, 0.19);
    --btn-active-color: #22bb6d;
    --btn-light-color: #e5ede8;
    --big-shadow: 0 28px 50px rgba(208, 218, 218, 0.4);
    --hilight-color: #16e186;
    --light-text-color: #aab0bf;
    --heave-text-color: #576b95;
    --border-color: #f7f7ff;
    --icon-color: #576b95;
    --box-bg: #e8f0e8;
    --box-light: #c7d4ce;
    --dark-color: #2f2f2f;
    --bg-image: none;
}

/* ============================================= */
/* 共用样式规则 (所有主题共用) */
/* ============================================= */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    transition: all 0.3s ease;
    background-color: var(--body-bg-color);
    background-image: var(--bg-image);
    background-attachment: fixed;
    background-position: center center;
    color: var(--light-text-color);
}

/* 链接和交互元素 */
.uk-link-toggle:hover .uk-link, 
.uk-link:hover, 
a:hover,
.footer_nav_box ul li a:hover,
.copyright a,
a.mo_link,
.show-more-btn,
.page_content .entry-header i,
.link_group .item:hover .name a,
a.comment-reply-link:hover,
.s_set_box a.active,
.search_box .s_set_box a:hover,
.ad_info a:hover,
.audio_choose li.uk-active a,
.video_choose li.uk-active a,
.posts_show_widget .no_img li a:before,
.posts_mu_list li:hover div,
.posts_mu_list li:hover a,
.posts_mu_list li.active,
.posts_mu_list li.active .s_play_btn,
.pl_btn a i:hover {
    color: var(--hilight-color);
}

/* 输入框焦点状态 */
input#img_link_up:focus,
.top_tool input.s_input:focus,
#t_commentform:focus-within,
#commentform:focus-within,
.vi_reply_item .target_comment,
#comment-author-info input:focus,
#login_form_box input#username:focus,
#login_form_box input#password:focus,
.s_set_box a.active,
.search_box input.s_input:focus,
.edit_card_box .edit_content input:focus,
.audio_choose li.uk-active a,
.video_choose li.uk-active a {
    border-color: var(--hilight-color);
}

/* 内容区域 */
.blog_list_inner,
.normal_list_inner,
.single_wrap,
#t_commentform,
textarea#comment,
.single_content,
.page_content,
.page_wrap,
#commentform,
.top_bar,
.archive_main,
.page_main,
.posts_mu_list,
.single_wrap .comments-area,
.page_content .comments-area,
.topic_comments_wrap,
.column_inner,
#topic_content,
.footer_main .inner {
    background: var(--withe-bg-color);
}

/* 侧边栏和特殊区域 */
.left_nav_inner,
#commentform textarea#comment,
.top_tool input.s_input:focus,
.post_control_list,
.right_admin_tool,
.sidebar_right,
.posts_mu_list li:nth-of-type(odd) {
    background: var(--light-bg-color);
}

/* 按钮和导航 */
.left_menu_box li[class*=current-] a,
.left_menu_box li[class*=current-] a:hover,
input#push_comment,
input.submit_button {
    background: var(--linear-color);
    color: #fff;
}

/* 卡片和阴影效果 */
.main_wrap,
.top_ava img,
.widget_tag_cloud a {
    box-shadow: var(--shadow-bg);
}

/* 激活状态元素 */
.moment_cat_nav ul li a.active,
.posts_cat_nav ul li a.active,
#t_pagination a,
#pagination a,
.up_cat_btn,
a.set_local_btn,
.push_item,
a.img_link_btn,
.commentnav span.page-numbers.current,
::-webkit-scrollbar-thumb,
#post_pager a:hover,
a.go_top,
.edit_card_box .edit_content a.push_card,
a.play_btn,
.post_control_list a:hover,
.top_set_box a.active,
.vo_size {
    background-color: var(--btn-active-color);
}

a.set_local_btn,
.top_set_box a.active,
.top_set_box a.active:hover {
    color: #fff;
}

/* 悬停效果 */
.left_menu_box ul li a:hover,
.link_group .item:hover {
    box-shadow: var(--big-shadow);
    background: var(--btn-light-color);
    color: var(--hilight-color);
}

/* 次要按钮 */
.moment_cat_nav ul li a,
.posts_cat_nav ul li a,
.cancel-comment-reply a,
.commentnav a,
#post_pager a {
    background: var(--btn-light-color);
    color: var(--light-text-color);
}

/* 边框和分隔线 */
textarea#comment,
.tool_box,
.smile_show,
.form_footer,
.set_cat,
#commentform textarea#comment,
.p_item,
.moment_cat_nav,
.posts_cat_nav {
    border-color: var(--border-color);
}

.left_menu_box ul,
.widget_inner .widget {
    border-color: var(--border-color);
}

/* 文本颜色 */
.list_user_meta .name,
.comment-list p.nodata,
.t_cat_box li,
.show_cdn_media span,
.vi_reply_item .name span,
.vi_reply_item .meta a,
.msg_log,
.links_count,
.link_cat_name,
#post_pager .c_paged,
.p_title a,
.ad_info p,
.ad_info a,
.top_set_box a {
    color: var(--heave-text-color);
}

/* 用户面板 */
.user_pannel .inner a {
    background: var(--btn-light-color);
    color: var(--light-text-color);
}

.user_pannel .inner a:hover {
    background: var(--btn-active-color);
}

/* 图标颜色 */
.t_dark a i,
.top_tool i,
.normal_content .post_footer_meta span.comnum i,
.normal_card_content .post_footer_meta span.comnum i,
.normal_grid_content .post_footer_meta span.comnum i,
a.up_like i,
.footer_nav_box ul li a,
a.music_btn,
.post_footer_meta span i,
.comment_smile_box a i,
a.bg_music i,
.top_s_box form i,
.pix_widget_tongji ul li small,
.posts_mu_list .s_play_btn {
    color: var(--icon-color);
}

/* 页脚和底部区域 */
.entry-footer,
.t_cat_box li,
input#set_local,
.show_media_box,
.show_cdn_media,
.single_content .comments-area {
    background: var(--light-bg-color);
}

.bottom_tool .inner,
.links_page .link_group .item,
.link_group .item {
    background: var(--box-bg);
}

/* 特殊内容区域 */
#topic_content {
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    color: var(--heave-text-color);
}

.normal_cat,
.de_cat {
    background: var(--dark-color);
}

/* 小文字和元信息 */
.normal_content .entry_meta,
.normal_card_content .entry_meta,
.normal_grid_content .entry_meta,
a.beian,
footer#colophon,
.page_content .entry-header .right time,
a.comment-reply-link,
.ad_info .name,
.set_text,
.widget_tag_cloud a,
.cst_widget_comment ul li .right .meta,
.posts_show_widget ul li .meta,
.pix_widget_tongji ul li span,
.pl_btn a i {
    color: var(--light-text-color);
}

/* 标题 */
.normal_content .entry-title a,
.normal_grid_content .entry-title a {
    color: var(--dark-color);
}

/* 特殊状态 */
a.up_like.done i {
    color: #ff4040;
}

.show-more-btn:hover {
    color: var(--hilight-color);
}

/* 小图标和标签 */
.smile_box i,
.simi i,
.t_cat i,
.loca i,
.post-categories a {
    background: var(--box-bg);
    color: var(--box-light);
}

#topic_content:focus {
    box-shadow: 0 0 0 0.12rem var(--border-color);
}

/* 上传按钮 */
.up_img_btn i {
    color: var(--box-light);
}

.t_cat_box li span {
    color: var(--heave-text-color) !important;
}

.form_footer .admin_tool a {
    display: none;
}

/* 固定顶部栏 */
.top_bar.uk-sticky-fixed.uk-active {
    background: rgba(var(--body-bg-color), 0.8);
}

/* 表单输入 */
#comment-author-info input,
#login_form_box input#username,
#login_form_box input#password {
    border-color: var(--border-color);
    background: var(--light-bg-color);
}

/* 特殊标记 */
.post_footer_meta span.sticky_icon {
    background: #ff5252;
}

/* 播放器 */
.pix_player {
    background: rgba(var(--white-bg-color), 0.81);
}

/* 音频/视频相关 */
.loacl_audio,
.netease_audio input,
.edit_card_box .edit_content input,
.local_video,
input#moment_video_bili {
    background: var(--light-bg-color);
}

.loacl_audio .audio_right input,
input#moment_video_url {
    background: var(--btn-light-color);
}

.moment_card_item a {
    background: var(--box-bg);
}

.moment_card_item.loop_card_item a:hover {
    box-shadow: 0px 8px 13px 0px var(--shadow-bg);
}

/* 搜索框 */
.top_s_box input.s_input {
    background: rgba(var(--light-bg-color), 0.59);
}

/* 小工具 */
.widget_tag_cloud a,
.cst_widget_comment ul li .right .body {
    background: rgba(0, 0, 0, 0);
}

.pix_widget_tongji ul li {
    background: linear-gradient(90deg, var(--box-bg), transparent);
    box-shadow: 0px 8px 9px 0px rgba(var(--shadow-bg), 0.47);
}

/* 暗色元素 */
.t_dark a,
a.bg_music {
    background: var(--box-light);
}

/* 页脚渐变 */
.single_footer_box {
    background: linear-gradient(90deg, var(--box-bg), transparent);
}

.sf_item a {
    color: var(--light-text-color);
}

/* 播放控制 */
a.m_play i,
a.m_play i:hover {
    color: var(--hilight-color);
}

.player_dot {
    border-color: var(--hilight-color);
}

.player_bar .progress {
    background: var(--linear-color);
}

/* ============================================= */
/* 主题定义 (覆盖默认变量) */
/* ============================================= */

/* beige主题 */
.theme-beige {
    --body-bg-color: #f2e8d5;
    --withe-bg-color: #f8f2e3;
    --light-bg-color: #f8f2e3;
    --linear-color: linear-gradient(90deg,#d9b88c,#c4a073);
    --shadow-bg: 0px 7px 20px 1px #d9c7a830;
    --btn-active-color: #b08c5a;
    --btn-light-color: #f0e6d0;
    --big-shadow: 0 28px 50px rgb(217 199 168 / 30%);
    --hilight-color: #9c7c4d;
    --light-text-color: #8c7c64;
    --heave-text-color: #5c4c34;
    --border-color: #e6d9c0;
    --icon-color: #6b5b46;
    --box-bg: #f5ebd8;
    --box-light: #d9c7a8;
    --dark-color: #4a3a26;
    --bg-image: none;
}

/* blue主题 */
.theme-blue {
    --body-bg-color: #e6f2ff;
    --withe-bg-color: #d9e8ff;
    --light-bg-color: #d9e8ff;
    --linear-color: linear-gradient(90deg, rgba(30, 64, 175, 0.1), #d9e8ff);
    --shadow-bg: 0px 7px 20px 1px rgba(217, 232, 255, 0.3);
    --btn-active-color: #1e40af;
    --btn-light-color: #d1e0f0;
    --big-shadow: 0 28px 50px rgba(217, 232, 255, 0.5);
    --hilight-color: #1e40af;
    --light-text-color: #647c97;
    --heave-text-color: #1a365d;
    --border-color: #d9e8ff;
    --icon-color: #4a6fa5;
    --box-bg: #d9e8ff;
    --box-light: #bdd4ff;
    --dark-color: #1a365d;
    --bg-image: none;
}

/* pearl-grey主题 */
.theme-pearl-grey {
    --body-bg-color: #dcdcdc;
    --withe-bg-color: #f4f4f4;
    --light-bg-color: #f4f4f4;
    --linear-color: linear-gradient(45deg,#c7c7c7,#e7e7e7);
    --shadow-bg: 0px 7px 20px 1px #e5e5e530;
    --btn-active-color: #999;
    --btn-light-color: #eeeeee;
    --big-shadow: 0 0px 1px rgb(238 249 254);
    --hilight-color: #898989;
    --light-text-color: #707070;
    --heave-text-color: #303030;
    --border-color: #e0e0e0;
    --icon-color: #9E9E9E;
    --box-bg: #f4f4f4;
    --box-light: #f2f2f2;
    --dark-color: #2f2f2f;
    --bg-image: none;
}

/* purple-gay主题 */
.theme-purple-gay {
    --body-bg-color: #e8e8f1;
    --withe-bg-color: #f6f7ff;
    --light-bg-color: #f6f7ff;
    --linear-color: linear-gradient(90deg,#4832ff,#816bff);
    --shadow-bg: 0px 7px 20px 1px #d7ceff30;
    --btn-active-color: #3b3eff;
    --btn-light-color: #e9ecfe;
    --big-shadow: 0 28px 50px rgb(212 221 255);
    --hilight-color: #3b3eff;
    --light-text-color: #9498cd;
    --heave-text-color: #44507b;
    --border-color: #f7f7ff;
    --icon-color: #44507b;
    --box-bg: #eff1ff;
    --box-light: #d7d8f0;
    --dark-color: #2f2f2f;
    --bg-image: none;
}

/* warm-sand-white主题 */
.theme-warm-sand-white {
    --body-bg-color: #f5f5f0;
    --withe-bg-color: #f8f8f2;
    --light-bg-color: #f8f8f2;
    --linear-color: linear-gradient(45deg,#e0e0d8,#f0f0e8);
    --shadow-bg: 0px 7px 20px 1px #e5e5e530;
    --btn-active-color: #c8c8b4;
    --btn-light-color: #f0f0e8;
    --big-shadow: 0 0px 1px rgb(248 249 244);
    --hilight-color: #a8a89e;
    --light-text-color: #90908a;
    --heave-text-color: #50504a;
    --border-color: #f2f2ea;
    --icon-color: #AEAEA6;
    --box-bg: #f8f8f2;
    --box-light: #f2f2ec;
    --dark-color: #4f4f4a;
    --bg-image: none;
}

/* dark主题 */
.theme-dark {
    --body-bg-color: #0a0c19;
    --withe-bg-color: #111324;
    --light-bg-color: #111324;
    --linear-color: linear-gradient(90deg, #2b48ff, #7786e7);
    --shadow-bg: 0px 7px 20px 1px rgba(15, 17, 33, 0.19);
    --btn-active-color: #2b48ff;
    --btn-light-color: #292c45;
    --big-shadow: 0 28px 50px rgba(15, 17, 33, 0.4);
    --hilight-color: #7786e7;
    --light-text-color: #5b5f80;
    --heave-text-color: #dedede;
    --border-color: #1e2036;
    --icon-color: #8c92b3;
    --box-bg: #161829;
    --box-light: #2e325c;
    --dark-color: #02ace8;
    --bg-image: none;
    
    /* 新增左侧菜单文字颜色样式 */
    .left_menu_box ul li a,.t_content p,.textarea#comment,.pix-calendar-header,.pix-calendar-day,.pix-calendar-nav a,.cst_widget_comment ul li .right a,.posts_show .title a,.moments_show .title a,.link_group .item .info .name a,.comment {
        color: var(--light-text-color)  !important;
    }
}

暗黑模式还有一种哑黑色，感谢听松客提供：

/* dark主题 */
.theme-dark {
    --body-bg-color: #141414;
    --withe-bg-color: #1b1b1b;
    --light-bg-color: #202020;
    --linear-color: linear-gradient(75deg,#141414,#1f1f1f);
    --shadow-bg: none;
    --btn-active-color: #323232;
    --btn-light-color: #292c45;
    --big-shadow: none;
    --hilight-color: #5d7099;
    --light-text-color: #9a9a9a;
    --heave-text-color: #dedede;
    --border-color: #252525;
    --icon-color: #707070;
    --box-bg: #202020;
    --box-light: #2e325c;
    --dark-color: #7893b6;
    --bg-image: none;
    
    /* 新增左侧菜单文字颜色样式 */
    .left_menu_box ul li a,.t_content p,.textarea#comment,.pix-calendar-header,.pix-calendar-day,.pix-calendar-nav a,.cst_widget_comment ul li .right a,.posts_show .title a,.moments_show .title a,.link_group .item .info .name a,.comment {
        color: var(--light-text-color)  !important;
    }

2、改造电脑模式下颜色切换功能，代码如下：

温馨提示: 此处为隐藏内容，需要评论本文后才能查看.
评论后请刷新一次页面，但注意不要清除缓存，否则还需要再次评论！

3、改造平板手机模式下颜色切换功能，代码如下：

温馨提示: 此处为隐藏内容，需要评论本文后才能查看.
评论后请刷新一次页面，但注意不要清除缓存，否则还需要再次评论！

4、后台设置代码如下：

    array(
      'id'        => 'theme_set',
      'type'      => 'image_select',
      'title'     => '主题风格',
      'options'   => array(
        'green-normal' => THEME_URL .'/img/theme/green.png',
        'purple-gay' => THEME_URL .'/img/theme/purple.png',
        'dark' => THEME_URL .'/img/theme/dark.png',
        'blue' => THEME_URL .'/img/theme/blue.png',
        'pearl-grey' => THEME_URL .'/img/theme/pearl-grey.png',
        'warm-sand-white' => THEME_URL .'/img/theme/warm-sand-white.png',
        'beige' => THEME_URL .'/img/theme/beige.png',
      ),
      'default'   => 'green-normal'
    ),

大功告成！

您已阅读完《技术相关（共60篇）》目录的第 56 篇。请继续阅读本文后3篇文章：

阅读本目录下更多其它文章

Comments | 8 条评论

点击填写昵称和邮箱，方可发布评论

*邮箱和昵称必须填写

瓦匠
· 2周前

Google Chrome 138 Windows 10 中国–福建–厦门电信 27.154.*.*
我以前直接用js直接设置css的主题变量，这样只用一套，想设置啥颜色就设置啥颜色
- 似水流年
  · 2周前
  
  Microsoft Edge 109 Windows 7 中国–河南–漯河电信 222.89.*.*
  是用一个JS调用一个综合多个色彩的CSS么？
网友小宋
· 2周前

Microsoft Edge 138 Windows 10 中国–河南–漯河联通 125.44.*.*
有点淡了吧
- 似水流年
  · 2周前
  
  IBrowse r Android 12 中国中国移动 2409:894a:6116:4f5:*:*
  黑色还淡啊😂
obaby
· 2周前

Google Chrome 138 Android 10 中国中国联通 2408:8417:d20:4383:*:*
专业
- 似水流年
  · 2周前
  
  IBrowse r Android 12 中国中国联通 2408:8220:6114:ad0:*:*
  灵妹子你啥时候可以恢复发文啊？
全局变量
· 2周前

Google Chrome 132 Windows 10 中国–湖南–岳阳联通 42.48.*.*
我觉得还有两个点急需优化，苹果手机版无法下滑滚动条、评论没有邮件回复。哈哈哈。。。折腾起来。😂😂😂😂每次手机版进去想看一下可是怎么都滑不动滚动条。
- 似水流年
  · 2周前
  
  IBrowse r Android 12 中国中国联通 2408:8220:6114:ad0:*:*
  我现在手头就缺一个苹果设备，是侧边栏的滚动条，还是主页面的滚动条，还是都无法滚动。有点回复这个主题，我一开启，评论后点击发送就得等一两分钟才提示成功，改天我得好好研究研究。

标签

优化增强主题颜色切换功能

加载中..