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

fortune_generator/css/styles.css

@@ -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 */
+}

fortune_generator/js/theme.js

@@ -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));