子比主题 – 论坛帖子标签颜色修改

飞流 · 发表于 2025-10-9 23:50:35

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

基于6ke论坛提供的美化代码修改了下颜色方案并添加了文本自适应根据色彩而改变（就是黑白两色而已），这样的话，找颜色方案的时候看着嘎嘎好看，一适配怎么就怪怪的的~简单留个记录吧

美化效果

CSS代码

/*论坛标签美化颜色JS代码*/
const tagColors = [
{ bg: `linear-gradient(120deg, #FFF0DE 20%, #6FB4BC 80%)`, textColor: getTextColor('#FFF0DE', '#6FB4BC') },
{ bg: `linear-gradient(120deg, #FFE6E3 20%, #8379A8 80%)`, textColor: getTextColor('#FFE6E3', '#8379A8') },
{ bg: `linear-gradient(120deg, #E3FDFF 20%, #D17AAA 80%)`, textColor: getTextColor('#E3FDFF', '#D17AAA') },
{ bg: `linear-gradient(120deg, #FFF0DF 20%, #8A3F3F 80%)`, textColor: getTextColor('#FFF0DF', '#8A3F3F') },
{ bg: `linear-gradient(120deg, #E4F6DA 20%, #898CC7 80%)`, textColor: getTextColor('#E4F6DA', '#898CC7') },
{ bg: `linear-gradient(120deg, #FCE5FF 20%, #87AEBE 80%)`, textColor: getTextColor('#FCE5FF', '#87AEBE') },
{ bg: `linear-gradient(120deg, #FFE8DE 20%, #7FBB8A 80%)`, textColor: getTextColor('#FFE8DE', '#7FBB8A') },
{ bg: `linear-gradient(120deg, #E8E5FF 20%, #BE87B9 80%)`, textColor: getTextColor('#E8E5FF', '#BE87B9') },
{ bg: `linear-gradient(120deg, #E5FFFD 20%, #FF768D 80%)`, textColor: getTextColor('#E5FFFD', '#FF768D') },
{ bg: `linear-gradient(120deg, #FFFEDA 20%, #5E6BFF 80%)`, textColor: getTextColor('#FFFEDA', '#5E6BFF') },
{ bg: `linear-gradient(120deg, #FFFCDD 20%, #1899B6 80%)`, textColor: getTextColor('#FFFCDD', '#1899B6') },
{ bg: `linear-gradient(120deg, #FFF4E3 20%, #30A9FF 80%)`, textColor: getTextColor('#FFF4E3', '#30A9FF') },
{ bg: `linear-gradient(120deg, #E2FFFD 20%, #F5600F 80%)`, textColor: getTextColor('#E2FFFD', '#F5600F') },
{ bg: `linear-gradient(120deg, #FFDDDD 20%, #5D62CC 80%)`, textColor: getTextColor('#FFDDDD', '#5D62CC') },
{ bg: `linear-gradient(120deg, #FFD0D0 20%, #18B670 80%)`, textColor: getTextColor('#FFD0D0', '#18B670') },
{ bg: `linear-gradient(120deg, #DDFEFF 20%, #B61877 80%)`, textColor: getTextColor('#DDFEFF', '#B61877') },
{ bg: `linear-gradient(120deg, #D2FFD2 20%, #FF3730 80%)`, textColor: getTextColor('#D2FFD2', '#FF3730') },
{ bg: `linear-gradient(120deg, #FFEF72 20%, #8274FF 80%)`, textColor: getTextColor('#FFEF72', '#8274FF') },
{ bg: `linear-gradient(120deg, #FBF2E3 20%, #28333E 80%)`, textColor: getTextColor('#FBF2E3', '#28333E') },
{ bg: `linear-gradient(120deg, #E2E1E4 20%, #747598 80%)`, textColor: getTextColor('#E2E1E4', '#747598') },
{ bg: `linear-gradient(120deg, #8A8C01 20%, #158888 80%)`, textColor: getTextColor('#8A8C01', '#158888') },
{ bg: `linear-gradient(120deg, #FBF2E3 20%, #2B333E 80%)`, textColor: getTextColor('#FBF2E3', '#2B333E') },
{ bg: `linear-gradient(120deg, #FBEBE6 20%, #AC1F18 80%)`, textColor: getTextColor('#FBEBE6', '#AC1F18') },
{ bg: `linear-gradient(120deg, #FDEEE9 20%, #1E2020 80%)`, textColor: getTextColor('#FDEEE9', '#1E2020') }
];
function getTextColor(color1, color2) {
const luminance1 = calculateLuminance(color1);
const luminance2 = calculateLuminance(color2);
const avgLuminance = (luminance1 + luminance2) / 2;
return avgLuminance > 0.5 ? '#000000' : '#ffffff';
}
function calculateLuminance(hexColor) {
const r = parseInt(hexColor.slice(1, 3), 16) / 255;
const g = parseInt(hexColor.slice(3, 5), 16) / 255;
const b = parseInt(hexColor.slice(5, 7), 16) / 255;
const RsRGB = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
const GsRGB = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
const BsRGB = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
return 0.2126 * RsRGB + 0.7152 * GsRGB + 0.0722 * BsRGB;
}
let tagsInitialized = false;
function applyRandomColor(tag) {
if (tag.dataset.colorApplied) return;
const randomColor = tagColors[Math.floor(Math.random() * tagColors.length)];
tag.style.setProperty('background', randomColor.bg, 'important');
tag.style.setProperty('color', randomColor.textColor, 'important');
tag.style.setProperty('text-shadow', '0 1px 2px rgba(0, 0, 0, 0.1)', 'important');
tag.dataset.colorApplied = 'true';
}
function setupTagDrawer() {
const tagWrappers = document.querySelectorAll('.tag-wrapper');
const isMobile = window.innerWidth <= 768;
const visibleTagCount = isMobile ? 2 : 3;
tagWrappers.forEach(wrapper => {
const container = wrapper.querySelector('.tag-container');
const tags = container.querySelectorAll('a.liuke-biaoqian.tag-link');
if (!tagsInitialized) {
tags.forEach(applyRandomColor);
}
setTimeout(() => {
const visibleTags = Array.from(tags).slice(0, visibleTagCount);
const initialWidth = visibleTags.reduce((sum, tag) => sum + tag.offsetWidth + 6, 0);
const fullWidth = Array.from(tags).reduce((sum, tag) => sum + tag.offsetWidth + 6, 0);
wrapper.style.width = `${initialWidth}px`;
wrapper.addEventListener('mouseenter', () => {
wrapper.style.width = `${fullWidth}px`;
});
wrapper.addEventListener('mouseleave', () => {
wrapper.style.width = `${initialWidth}px`;
});
}, 100);
});
tagsInitialized = true;
}
function initializeTags() {
setTimeout(setupTagDrawer, 100);
}
function applyTagEffects() {
const tags = document.querySelectorAll('a.liuke-biaoqian.tag-link');
tags.forEach(applyRandomColor);
initializeTags();
}
document.addEventListener('DOMContentLoaded', function () {
applyTagEffects();
document.addEventListener('ajaxComplete', function (event) {
applyTagEffects();
});
const observer = new MutationObserver((mutations) => {
let tagsAdded = false;
mutations.forEach((mutation) => {
if (mutation.type === 'childList') {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === Node.ELEMENT_NODE) {
if (node.matches('a.liuke-biaoqian.tag-link')) {
tagsAdded = true;
} else if (node.querySelector('a.liuke-biaoqian.tag-link')) {
tagsAdded = true;
}
}
});
}
});
if (tagsAdded) {
applyTagEffects();
}
});
const config = { childList: true, subtree: true };
if (document.body) {
observer.observe(document.body, config);
} else {
console.warn('document.body is not available yet.');
}
});
window.addEventListener('load', function () {
setTimeout(setupTagDrawer, 100);
});
window.addEventListener('resize', setupTagDrawer);
const style = document.createElement('style');
style.textContent = `
a.liuke-biaoqian.tag-link {
transition: background 0.3s ease, color 0.3s ease;
opacity: 0;
animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
to { opacity: 1; }
}
`;
document.head.appendChild(style);
/*论坛标签美化颜色JS代码*/

复制代码

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 子比主题 – 论坛帖子标签颜色修改

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

美化效果

CSS代码

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn