ChenKaiLiuG/life_generators
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Feat(fortune): Add color dots for visual preview in theme item

Browse Source
This commit is contained in:
lifeadventurer
2024-11-01 22:02:03 +08:00
parent 15d3cfb35a
commit a345a61f25
2 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
fortune_generator/css/styles.css
View File

@@ -125,3 +125,15 @@ button:hover {
background-color: var(--bg-color);
color: var(--title-color);
}
.color-preview {
display: flex; /* Use flex to align dots in a row */
}
.color-dot {
display: inline-block;
width: 12px; /* Dot size */
height: 12px; /* Dot size */
border-radius: 50%; /* Circular shape */
margin-left: 5px; /* Spacing between dots */
}

11
fortune_generator/js/theme.js
View File

@@ -27,6 +27,17 @@ document.addEventListener("DOMContentLoaded", () => {
themeName.textContent = theme.name;
themeItem.appendChild(themeName);
// Add color dots for visual preview
const colorPreview = document.createElement("div");
colorPreview.className = "color-preview";
Object.values(theme.properties).slice(0, 3).forEach((color) => {
const colorDot = document.createElement("span");
colorDot.style.backgroundColor = color;
colorDot.className = "color-dot";
colorPreview.appendChild(colorDot);
});
themeItem.appendChild(colorPreview);
// Apply theme on click
themeItem.addEventListener("click", () => applyTheme(theme.properties));