子比主题 – 论坛帖子标签颜色修改
基于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;
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代码*/
页:
[1]