PIX主题后台扩展配色并在前台为游客提供调色板
本文是《技术相关（共52篇）》目录的第 50 篇。阅读本文前，建议先阅读本文前3篇文章：
本站使用的PIX主题配色，除了自带的绿色、紫色和黑色外，最近新增了深海蓝、珍珠灰、暖沙白和象牙黄，为了统一的命名，又将绿色和紫色修改为春芽绿和霓虹紫。黑色其实就是黑夜模式，但是我的网站LOGO背身文字就是黑白，因此黑夜模式下水和年字看不清楚，因此我果断放弃了。
既然新增了4个配色，我就考虑如何集成到后台设置中，并且在前台添加一个调色盘，游客可以根据自己的喜好进行配色选择，这样大家看到的界面颜色都不一样，算是一个自定义且个性化的小功能。
先说一下配色选择的使用逻辑：这6种颜色后台是随时可以设置哪个颜色为网站默认配色的。当游客第一次访问本站时，网站显示的配色就是后台设置的默认配色。当游客点击右下角的调色盘，选中自己喜欢的颜色，喜欢的颜色就会缓存到浏览器的cookies里，保存期为1年，只要cookies没有被清除，1年内再次打开本站，就直接看到的是选中的配色。如果cookies被清除，则和第一次访问本站相同。如果网站默认配色丢失，且游客也没有选择喜欢的颜色，则用春芽绿兜底作为最后的配色。
总之，就是游客喜欢的配色>网站后台设置的默认配色>春芽绿兜底的配色。另外需要注意的是，游客第一次访问本站的颜色是来自后台设置，且是随时的。比如第一位游客第一次访问本站的时候，本站设置的默认配色是象牙黄，则他第一次看到的就是象牙黄色；第二位游客第一次访问本站前，后台设置的默认配色改为暖沙白，则他第一次看到的就是暖沙白色。
昨晚全局变量感觉我加载的6个css配色有点多，我觉得也是，因为这6个配色文件完全就是基于那个紫色改的，结构完全相同，就是颜色代码不一样。我最终把这6个文件合成了1个，但是出现了问题，就是点击调色盘上的颜色时，没有反应无法切换到对应的配色，调试了一天也没有调试好，目前只得放弃。同样，没能解决的另外一个问题是，虽然现在切换配色很丝滑，但是F5刷新页面后，不能立马出现喜欢的配色，需要先闪烁一次后台默认配色，再转为喜欢的颜色，元宝和豆包都给我提供了解决方法，但是我一一试遍，没有效果，只得作罢。
最后，主题自带的默认绿色和紫色，以我网站左中右三栏为例，中间栏的底色是白色的，我都做了修改，使得左中右三栏颜色一致。
一、后台集成设置，pix/inc/assets/codestar-framework/options/option.php，大概490行（属于外观设置）：
array(
'id' => 'theme_set',
'type' => 'image_select',
'title' => '主题风格',
'options' => array(
'green-normal' => THEME_URL .'https://images.my1981.cn/img/theme/green.png',
'purple-gay' => THEME_URL .'https://images.my1981.cn/img/theme/purple.png',
'dark-theme' => THEME_URL .'https://images.my1981.cn/img/theme/dark.png',
),
'default' => 'green-normal'
),修改为：
array(
'id' => 'theme_set',
'type' => 'image_select',
'title' => '主题风格',
'options' => array(
'green-normal' => THEME_URL .'https://images.my1981.cn/img/theme/green.png',
'purple-gay' => THEME_URL .'https://images.my1981.cn/img/theme/purple.png',
//'dark-theme' => THEME_URL .'https://images.my1981.cn/img/theme/dark.png',
'blue' => THEME_URL .'https://images.my1981.cn/img/theme/blue.png',
'pearl-grey' => THEME_URL .'https://images.my1981.cn/img/theme/pearl-grey.png',
'warm-sand-white' => THEME_URL .'https://images.my1981.cn/img/theme/warm-sand-white.png',
'beige' => THEME_URL .'https://images.my1981.cn/img/theme/beige.png',
),
'default' => 'green-normal'
),这里的green-normal是css的文件名，即green-normal.css，在pix/inc/assets/theme目录下，后面的green.png在pix/img/theme目录下，其他的以此类推。CSS文件名称和图片一定要对照好，不然要么看不到照片，要么设置配色没反应。
二、前台右下角添加调色盘图片按钮，因为前面我说过我不用黑色，所以这个调色盘我是用白天黑夜模式切换按钮修改的。具体文件是在pix/footer.php，可以备份之后，将以下代码全部替换原来的代码。
<?php
/**
• The template for displaying the footer
*
• @package pix
*/
?>
</div><!-- pjax-container -->
<div class="footer_main">
<?php pix_site_cr(); ?>
</div>
</div><!-- page_main -->
<div class="main_sidebar uk-width-1-3@m">
<div class="sidebar_right">
<div class="right_admin_tool" uk-sticky="offset: 0">
<?php
$mod_array = array('mod_third','mod_third_s');
if(in_array(get_op('layout_set'),$mod_array) && !wp_is_mobile()){
get_template_part('layouts/header','tool');
}
?>
</div>
<?php if(is_active_sidebar( 'sidebar_right' )){ ?>
<div class="widget_inner sidebar_right_inner">
<div uk-sticky="offset: 72">
<?php dynamic_sidebar( 'sidebar_right' ); ?>
</div>
</div>
<?php } ?>
</div>
</div>
</div><!-- main_body -->
<div class="go_top_box">
<div class="footer_tool">
<?php if(get_op('bgm_open')) { ?>
<div class="t_music top_tool icon_color">
<a class="bg_music"><i class="ri-disc-line"></i></a>
</div>
<?php } ?>
<!-- 配色方案选择器 -->
<div class="t_color_scheme top_tool icon_color">
<a id="colorSchemeToggle" class="color-scheme-toggle">
<i class="ri-palette-line"></i>
</a>
</div>
</div>
<a class="go_top" href="#page" uk-scroll><i class="ri-arrow-up-s-line"></i></a>
</div>
<?php
if(get_op('fpush_open')){
echo '<div class="footer_nav">';
get_template_part('layouts/footer','nav');
echo get_footer_nav();
echo '</div>';
}
echo msg_modal_box();
echo top_search();
if(is_user_logged_in()) {
get_template_part('layouts/topic-push');
} else {
get_template_part('layouts/login-form');
}
?>
</div><!-- #page -->
<!-- 配色方案抽屉 -->
<div id="colorSchemeDrawer" class="color-scheme-drawer" style="display:none;">
<div class="color-scheme-container">
<div class="color-option" data-theme="green-normal" title="春芽绿">
<div class="theme-circle" style="background:#16e186"></div>
</div>
<div class="color-option" data-theme="blue" title="深海蓝">
<div class="theme-circle" style="background:#1e40af"></div>
</div>
<div class="color-option" data-theme="purple-gay" title="霓虹紫">
<div class="theme-circle" style="background:#816bff"></div>
</div>
<div class="color-option" data-theme="pearl-grey" title="珍珠灰">
<div class="theme-circle" style="background:#e7e7e7"></div>
</div>
<div class="color-option" data-theme="warm-sand-white" title="暖沙白">
<div class="theme-circle" style="background:#f0f0e8"></div>
</div>
<div class="color-option" data-theme="beige" title="象牙黄">
<div class="theme-circle" style="background:#c4a073"></div>
</div>
</div>
</div>
<style>
/* 配色方案选择器样式 */
.color-scheme-drawer {
position: fixed;
z-index: 2147483647;
background: #fff;
border-radius: 8px;
box-shadow: 0 5px 25px rgba(0,0,0,0.2);
padding: 10px;
border: 1px solid #e0e0e0;
min-width: 180px;
}
.color-scheme-container {
display: flex;
gap: 10px; /* 保持原来的间距 */
justify-content: space-between; /* 平均分布选项 */
}
.color-option {
cursor: pointer;
text-align: center;
padding: 3px;
border-radius: 5px;
transition: all 0.2s;
flex: 1; /* 让每个选项平均分配宽度 */
}
.color-option:hover {
background: rgba(0,0,0,0.05);
}
.theme-circle {
width: 16px;
height: 16px;
border-radius: 50%;
margin: 0 auto;
border: 2px solid transparent;
transition: all 0.2s;
}
.color-option.active .theme-circle {
border-color: #2196F3;
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}
.color-option:hover .theme-circle {
transform: scale(1.2);
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const toggle = document.getElementById('colorSchemeToggle');
const drawer = document.getElementById('colorSchemeDrawer');
const colorOptions = document.querySelectorAll('.color-option');
// 从 cookie 获取当前主题
function getCurrentTheme() {
const cookieValue = document.cookie
.split('; ')
.find(row => row.startsWith('pix_theme='));
return cookieValue ? cookieValue.split('=')[1] : null;
}
// 设置当前选中状态
function setActiveTheme(theme) {
colorOptions.forEach(option => {
option.classList.toggle('active', option.dataset.theme === theme);
});
}
// 定位抽屉
function positionDrawer() {
const toggleRect = toggle.getBoundingClientRect();
const drawerWidth = 180;
const drawerHeight = 36;
// 计算位置 (左侧弹出)
let left = toggleRect.left - drawerWidth - 25;
let top = toggleRect.top - (drawerHeight - toggleRect.height) / 2;
// 边界检查
if (left < 10) left = 10;
if (top < 10) top = 10;
if (top + drawerHeight > window.innerHeight - 10) {
top = window.innerHeight - drawerHeight - 10;
}
drawer.style.left = left + 'px';
drawer.style.top = top + 'px';
}
// 切换抽屉显示
toggle.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
positionDrawer();
drawer.style.display = drawer.style.display === 'block' ? 'none' : 'block';
});
// 主题切换功能
colorOptions.forEach(option => {
option.addEventListener('click', function(e) {
e.preventDefault();
const theme = this.dataset.theme;
// 更新 UI 选中状态
setActiveTheme(theme);
// 保存设置到 cookie
document.cookie = `pix_theme=${theme}; path=/; max-age=31536000`;
// 动态加载 CSS（避免闪烁）
loadThemeCSS(theme);
});
});
// 动态加载 CSS（优化版）
function loadThemeCSS(theme) {
// 1. 先创建一个新的 link 元素
const newLink = document.createElement('link');
newLink.rel = 'stylesheet';
newLink.href = getThemeCSSPath(theme) + '?v=' + Date.now(); // 防止缓存
newLink.onload = function() {
// 2. 加载完成后，移除旧的 link 元素（如果有）
const oldLink = document.querySelector('link[data-theme-link]');
if (oldLink) {
oldLink.remove();
}
// 3. 标记新 link 为当前主题
newLink.setAttribute('data-theme-link', 'true');
};
document.head.appendChild(newLink);
}
// 获取主题 CSS 路径
function getThemeCSSPath(theme) {
const cssMap = {
'green-normal': '<?php echo get_template_directory_uri(); ?>/inc/assets/theme/green-normal.css',
'blue': '<?php echo get_template_directory_uri(); ?>/inc/assets/theme/blue.css',
'purple-gay': '<?php echo get_template_directory_uri(); ?>/inc/assets/theme/purple-gay.css',
'pearl-grey': '<?php echo get_template_directory_uri(); ?>/inc/assets/theme/pearl-grey.css',
'warm-sand-white': '<?php echo get_template_directory_uri(); ?>/inc/assets/theme/warm-sand-white.css',
'beige': '<?php echo get_template_directory_uri(); ?>/inc/assets/theme/beige.css'
};
return cssMap[theme] || cssMap['green-normal'];
}
// 初始化主题
function initTheme() {
// 1. 优先使用用户选择的主题
const userTheme = getCurrentTheme();
// 2. 如果没有用户选择，使用后台设置
const defaultTheme = '<?php echo get_op("theme_set"); ?>';
// 3. 确定最终使用的主题
const themeToUse = userTheme || defaultTheme || 'green-normal';
// 4. 加载主题 CSS（直接加载，不等待）
loadThemeCSS(themeToUse);
// 5. 设置活动状态
setActiveTheme(themeToUse);
// 6. 如果用户没有选择过主题，设置 cookie 为后台主题
if (!userTheme && defaultTheme) {
document.cookie = `pix_theme=${defaultTheme}; path=/; max-age=31536000`;
}
}
// 初始化主题
initTheme();
});
</script>
<?php wp_footer(); ?>
</body>
</html>里面的颜色名称如果你不喜欢的话，就自己修改一下。前台游客把鼠标放到调色盘上的颜色上面时，会显示颜色名称。
您已阅读完《技术相关（共52篇）》目录的第 50 篇。请继续阅读本文后3篇文章：
ymz316
已经好久没看web代码了（该有2个多月了吧）。估计再要调个什么功能，得又要从头再学习一遍才行。
似水流年
什么都不用，交给AI就行。
全局变量
css这种真的不想调第二次，端午期间在家调了一整天才把三栏改二栏！css太麻烦了，各种嵌套牵一发而动全身
似水流年
昨天咱俩说的我都没调试成功，还得6个文件。😹
刘郎
我都懒得改了 折腾会上瘾
似水流年
确实会越来越上瘾。🤭
obaby
这，每天都在改进啊
似水流年
每天进步0.001%。🤭