npm - @trishchuk/coolors-mcp - Versions diffs - 1.0.0 → 1.1.0 - Mend

@trishchuk/coolors-mcp 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (140) hide show

package/.github/ISSUE_TEMPLATE/bug_report.md +20 -8
package/.github/ISSUE_TEMPLATE/feature_request.md +22 -8
package/.github/pull_request_template.md +33 -8
package/.github/workflows/ci.yml +107 -104
package/.github/workflows/deploy-docs.yml +14 -11
package/.github/workflows/release.yml +25 -23
package/README.md +149 -15
package/dist/bin/server.js +997 -256
package/dist/bin/server.js.map +1 -1
package/dist/{chunk-P3ARRKLS.js → chunk-HOMDMKUY.js} +3 -1
package/dist/{chunk-P3ARRKLS.js.map → chunk-HOMDMKUY.js.map} +1 -1
package/dist/{chunk-IQ7NN26V.js → chunk-LHW2ZTOU.js} +14 -2
package/dist/chunk-LHW2ZTOU.js.map +1 -0
package/dist/color/index.js +1 -1
package/dist/coolors-mcp.d.ts +4 -4
package/dist/coolors-mcp.js +1 -1
package/docs/.vitepress/components/ClientGrid.vue +9 -3
package/docs/.vitepress/components/CodeBlock.vue +51 -44
package/docs/.vitepress/components/ConfigModal.vue +151 -67
package/docs/.vitepress/components/DiagramModal.vue +186 -154
package/docs/.vitepress/components/TroubleshootingModal.vue +101 -96
package/docs/.vitepress/config.js +171 -141
package/docs/.vitepress/theme/FundingLayout.vue +65 -54
package/docs/.vitepress/theme/Layout.vue +21 -21
package/docs/.vitepress/theme/components/AdBanner.vue +73 -52
package/docs/.vitepress/theme/components/AdPlaceholder.vue +3 -3
package/docs/.vitepress/theme/components/FundingEffects.vue +77 -53
package/docs/.vitepress/theme/components/FundingHero.vue +78 -63
package/docs/.vitepress/theme/components/SupportSection.vue +106 -89
package/docs/.vitepress/theme/custom-app.css +19 -12
package/docs/.vitepress/theme/custom.css +33 -25
package/docs/.vitepress/theme/index.js +19 -16
package/docs/concepts/accessibility.md +59 -47
package/docs/concepts/color-spaces.md +28 -6
package/docs/concepts/distance-metrics.md +45 -30
package/docs/concepts/hct.md +30 -27
package/docs/concepts/image-analysis.md +52 -21
package/docs/concepts/material-design.md +43 -17
package/docs/concepts/theme-matching.md +64 -40
package/docs/examples/basic-colors.md +92 -108
package/docs/examples/creating-themes.md +104 -108
package/docs/examples/css-refactoring.md +33 -29
package/docs/examples/image-extraction.md +145 -138
package/docs/getting-started.md +45 -34
package/docs/index.md +5 -1
package/docs/installation.md +15 -1
package/docs/tools/accessibility.md +74 -68
package/docs/tools/image-extraction.md +62 -54
package/docs/tools/theme-matching.md +45 -42
package/eslint.config.ts +13 -0
package/jsr.json +1 -1
package/package.json +17 -13
package/src/bin/server.ts +13 -1
package/src/color/__tests__/extract-colors.test.ts +20 -30
package/src/color/apca.ts +105 -0
package/src/color/color-blindness.ts +109 -0
package/src/coolors-mcp.ts +1 -1
package/src/session.ts +10 -2
package/src/theme/matcher.ts +1 -1
package/src/theme/refactor.ts +1 -1
package/src/theme/types.ts +3 -0
package/src/tools/__tests__/cohesion.test.ts +97 -0
package/src/tools/__tests__/color-blindness.test.ts +45 -0
package/src/tools/__tests__/color-conversion.test.ts +38 -0
package/src/tools/__tests__/contrast-checker.test.ts +56 -0
package/src/tools/__tests__/palette-export.test.ts +54 -0
package/src/tools/adjust-color.tool.ts +80 -0
package/src/tools/cohesion.tools.ts +380 -0
package/src/tools/color-blindness.tool.ts +168 -0
package/src/tools/color-conversion.tool.ts +1 -1
package/src/tools/contrast-checker.tool.ts +53 -14
package/src/tools/dislike-analyzer.tool.ts +41 -54
package/src/tools/image-extraction.tools.ts +62 -115
package/src/tools/index.ts +15 -2
package/src/tools/palette-export.tool.ts +174 -0
package/src/tools/palette-with-locks.tool.ts +8 -6
package/src/types.ts +2 -3
package/tsconfig.json +12 -2
package/vitest.config.js +1 -3
package/.claude/settings.local.json +0 -39
package/.env +0 -2
package/.mcp.json +0 -12
package/CLAUDE.md +0 -201
package/DOCUMENTATION.md +0 -274
package/GEMINI.md +0 -54
package/demo/content_based_color.png +0 -0
package/demo/music-player.html +0 -621
package/demo/podcast-player.html +0 -903
package/dist/chunk-IQ7NN26V.js.map +0 -1
package/docs/.vitepress/cache/deps/@braintree_sanitize-url.js +0 -93
package/docs/.vitepress/cache/deps/@braintree_sanitize-url.js.map +0 -7
package/docs/.vitepress/cache/deps/_metadata.json +0 -127
package/docs/.vitepress/cache/deps/chunk-BUSYA2B4.js +0 -9
package/docs/.vitepress/cache/deps/chunk-BUSYA2B4.js.map +0 -7
package/docs/.vitepress/cache/deps/chunk-JD3CXNQ6.js +0 -12683
package/docs/.vitepress/cache/deps/chunk-JD3CXNQ6.js.map +0 -7
package/docs/.vitepress/cache/deps/chunk-SYPOPCWC.js +0 -9719
package/docs/.vitepress/cache/deps/chunk-SYPOPCWC.js.map +0 -7
package/docs/.vitepress/cache/deps/cytoscape-cose-bilkent.js +0 -4710
package/docs/.vitepress/cache/deps/cytoscape-cose-bilkent.js.map +0 -7
package/docs/.vitepress/cache/deps/cytoscape.js +0 -30278
package/docs/.vitepress/cache/deps/cytoscape.js.map +0 -7
package/docs/.vitepress/cache/deps/dayjs.js +0 -285
package/docs/.vitepress/cache/deps/dayjs.js.map +0 -7
package/docs/.vitepress/cache/deps/debug.js +0 -468
package/docs/.vitepress/cache/deps/debug.js.map +0 -7
package/docs/.vitepress/cache/deps/package.json +0 -3
package/docs/.vitepress/cache/deps/prismjs.js +0 -1466
package/docs/.vitepress/cache/deps/prismjs.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-bash.js +0 -228
package/docs/.vitepress/cache/deps/prismjs_components_prism-bash.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-javascript.js +0 -142
package/docs/.vitepress/cache/deps/prismjs_components_prism-javascript.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-json.js +0 -27
package/docs/.vitepress/cache/deps/prismjs_components_prism-json.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-python.js +0 -65
package/docs/.vitepress/cache/deps/prismjs_components_prism-python.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-typescript.js +0 -53
package/docs/.vitepress/cache/deps/prismjs_components_prism-typescript.js.map +0 -7
package/docs/.vitepress/cache/deps/prismjs_components_prism-yaml.js +0 -73
package/docs/.vitepress/cache/deps/prismjs_components_prism-yaml.js.map +0 -7
package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4507
package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -584
package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js +0 -1146
package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map +0 -7
package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js +0 -1667
package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map +0 -7
package/docs/.vitepress/cache/deps/vitepress___minisearch.js +0 -1814
package/docs/.vitepress/cache/deps/vitepress___minisearch.js.map +0 -7
package/docs/.vitepress/cache/deps/vue.js +0 -344
package/docs/.vitepress/cache/deps/vue.js.map +0 -7
package/examples/theme-matching.md +0 -113
package/mcp-config.json +0 -8
package/note.md +0 -35
package/research_results.md +0 -53
package/src/tools/colors.ts +0 -31
package/src/tools/registry.ts +0 -142
package/src/tools/simple-tools.ts +0 -37

package/demo/music-player.html DELETED Viewed

@@ -1,621 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Content-Based Color Demo - Music Player</title>
-    <style>
-      :root {
-        /* Material Design 3 - Light Theme (from teal seed color #0E7490) */
-        --md-sys-color-primary: #006d9e;
-        --md-sys-color-on-primary: #ffffff;
-        --md-sys-color-primary-container: #c0e9fb;
-        --md-sys-color-on-primary-container: #002851;
-        --md-sys-color-secondary: #3c6473;
-        --md-sys-color-on-secondary: #ffffff;
-        --md-sys-color-secondary-container: #c0e9fb;
-        --md-sys-color-on-secondary-container: #00202d;
-        --md-sys-color-tertiary: #5b5b82;
-        --md-sys-color-on-tertiary: #ffffff;
-        --md-sys-color-tertiary-container: #e1deff;
-        --md-sys-color-on-tertiary-container: #151839;
-        --md-sys-color-background: #f8fdff;
-        --md-sys-color-on-background: #181c1e;
-        --md-sys-color-surface: #f8fdff;
-        --md-sys-color-on-surface: #181c1e;
-        --md-sys-color-surface-variant: #d9e4e9;
-        --md-sys-color-on-surface-variant: #3f484c;
-        --md-sys-color-outline: #6f797d;
-        --md-sys-color-outline-variant: #bdc8cd;
-        /* Tonal variations for UI elements */
-        --md-sys-color-surface-container: #e8f4f9;
-        --md-sys-color-surface-container-high: #dfeef4;
-        --md-sys-color-surface-container-highest: #d9e4e9;
-      }
-      @media (prefers-color-scheme: dark) {
-        :root {
-          /* Material Design 3 - Dark Theme */
-          --md-sys-color-primary: #00d8ff;
-          --md-sys-color-on-primary: #003d6a;
-          --md-sys-color-primary-container: #005583;
-          --md-sys-color-on-primary-container: #32f5ff;
-          --md-sys-color-secondary: #a4cdde;
-          --md-sys-color-on-secondary: #063543;
-          --md-sys-color-secondary-container: #234c5a;
-          --md-sys-color-on-secondary-container: #c0e9fb;
-          --md-sys-color-tertiary: #c5c2ef;
-          --md-sys-color-on-tertiary: #2c2d50;
-          --md-sys-color-tertiary-container: #434369;
-          --md-sys-color-on-tertiary-container: #e1deff;
-          --md-sys-color-background: #0f1416;
-          --md-sys-color-on-background: #dee3e6;
-          --md-sys-color-surface: #181c1e;
-          --md-sys-color-on-surface: #dee3e6;
-          --md-sys-color-surface-variant: #3f484c;
-          --md-sys-color-on-surface-variant: #bdc8cd;
-          --md-sys-color-outline: #889297;
-          --md-sys-color-outline-variant: #3f484c;
-          --md-sys-color-surface-container: #1e2426;
-          --md-sys-color-surface-container-high: #272d30;
-          --md-sys-color-surface-container-highest: #323739;
-        }
-      }
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      body {
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-          sans-serif;
-        background: var(--md-sys-color-background);
-        color: var(--md-sys-color-on-background);
-        min-height: 100vh;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        padding: 20px;
-        background: linear-gradient(
-          135deg,
-          var(--md-sys-color-primary-container) 0%,
-          var(--md-sys-color-secondary-container) 100%
-        );
-      }
-      .phone-container {
-        width: 375px;
-        height: 812px;
-        background: var(--md-sys-color-surface);
-        border-radius: 40px;
-        box-shadow:
-          0 20px 60px rgba(0, 0, 0, 0.3),
-          0 0 0 1px var(--md-sys-color-outline-variant);
-        overflow: hidden;
-        position: relative;
-      }
-      .status-bar {
-        height: 44px;
-        padding: 0 24px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background: var(--md-sys-color-surface);
-        font-size: 14px;
-        font-weight: 600;
-      }
-      .status-icons {
-        display: flex;
-        gap: 6px;
-      }
-      .header {
-        height: 56px;
-        padding: 0 16px;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        background: var(--md-sys-color-surface);
-        border-bottom: 1px solid var(--md-sys-color-outline-variant);
-      }
-      .back-button {
-        width: 40px;
-        height: 40px;
-        border: none;
-        background: transparent;
-        color: var(--md-sys-color-on-surface);
-        cursor: pointer;
-        border-radius: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: background 0.2s;
-      }
-      .back-button:hover {
-        background: var(--md-sys-color-surface-variant);
-      }
-      .header-title {
-        font-size: 20px;
-        font-weight: 500;
-        color: var(--md-sys-color-on-surface);
-      }
-      .content {
-        padding: 32px 24px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 32px;
-        height: calc(100% - 100px);
-        overflow-y: auto;
-      }
-      .album-container {
-        position: relative;
-        width: 280px;
-        height: 280px;
-      }
-      .album-art {
-        width: 100%;
-        height: 100%;
-        border-radius: 24px;
-        background: var(--md-sys-color-primary);
-        position: relative;
-        overflow: hidden;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-      }
-      .album-pattern {
-        position: absolute;
-        inset: 0;
-        display: grid;
-        grid-template-columns: repeat(12, 1fr);
-        grid-template-rows: repeat(12, 1fr);
-        gap: 3px;
-        padding: 20px;
-      }
-      .pattern-cell {
-        border-radius: 2px;
-        animation: pulse 3s ease-in-out infinite;
-      }
-      .pattern-cell:nth-child(3n) {
-        background: var(--md-sys-color-tertiary);
-        animation-delay: 0.1s;
-      }
-      .pattern-cell:nth-child(3n + 1) {
-        background: var(--md-sys-color-secondary);
-        animation-delay: 0.2s;
-      }
-      .pattern-cell:nth-child(3n + 2) {
-        background: var(--md-sys-color-primary-container);
-        animation-delay: 0.3s;
-      }
-      .pattern-cell:nth-child(5n) {
-        background: var(--md-sys-color-tertiary-container);
-      }
-      .pattern-cell:nth-child(7n) {
-        background: var(--md-sys-color-on-primary);
-        opacity: 0.8;
-      }
-      .pattern-cell:nth-child(11n) {
-        background: var(--md-sys-color-secondary-container);
-      }
-      @keyframes pulse {
-        0%,
-        100% {
-          opacity: 0.6;
-          transform: scale(0.95);
-        }
-        50% {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-      .track-info {
-        text-align: center;
-        width: 100%;
-      }
-      .track-title {
-        font-size: 28px;
-        font-weight: 600;
-        color: var(--md-sys-color-on-surface);
-        margin-bottom: 8px;
-      }
-      .track-artist {
-        font-size: 16px;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      .progress-container {
-        width: 100%;
-      }
-      .progress-bar {
-        width: 100%;
-        height: 4px;
-        background: var(--md-sys-color-surface-variant);
-        border-radius: 2px;
-        position: relative;
-        margin-bottom: 8px;
-      }
-      .progress-fill {
-        height: 100%;
-        width: 40%;
-        background: var(--md-sys-color-primary);
-        border-radius: 2px;
-        position: relative;
-      }
-      .progress-handle {
-        position: absolute;
-        right: -8px;
-        top: -6px;
-        width: 16px;
-        height: 16px;
-        background: var(--md-sys-color-primary);
-        border-radius: 50%;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-      }
-      .time-labels {
-        display: flex;
-        justify-content: space-between;
-        font-size: 12px;
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      .controls {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 24px;
-        width: 100%;
-      }
-      .control-btn {
-        background: transparent;
-        border: none;
-        color: var(--md-sys-color-on-surface);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: transform 0.2s;
-      }
-      .control-btn:hover {
-        transform: scale(1.1);
-      }
-      .control-btn:active {
-        transform: scale(0.95);
-      }
-      .control-btn.small {
-        width: 32px;
-        height: 32px;
-        opacity: 0.7;
-      }
-      .control-btn.medium {
-        width: 48px;
-        height: 48px;
-      }
-      .control-btn.primary {
-        width: 72px;
-        height: 72px;
-        background: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-        border-radius: 50%;
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-      }
-      .volume-container {
-        width: 100%;
-        padding: 24px 0;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-      }
-      .volume-icon {
-        color: var(--md-sys-color-on-surface-variant);
-      }
-      .volume-slider {
-        flex: 1;
-        height: 48px;
-        background: var(--md-sys-color-primary);
-        border-radius: 24px;
-        position: relative;
-        display: flex;
-        align-items: center;
-      }
-      .volume-fill {
-        height: 100%;
-        width: 70%;
-        background: var(--md-sys-color-on-primary);
-        border-radius: 24px;
-        opacity: 0.3;
-      }
-      /* Icons */
-      .icon {
-        width: 24px;
-        height: 24px;
-        fill: currentColor;
-      }
-      .icon.large {
-        width: 32px;
-        height: 32px;
-      }
-      /* Demo controls */
-      .demo-controls {
-        position: absolute;
-        bottom: 20px;
-        right: 20px;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        z-index: 10;
-      }
-      .theme-toggle {
-        padding: 12px 20px;
-        background: var(--md-sys-color-primary);
-        color: var(--md-sys-color-on-primary);
-        border: none;
-        border-radius: 20px;
-        cursor: pointer;
-        font-size: 14px;
-        font-weight: 500;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-        transition: transform 0.2s;
-      }
-      .theme-toggle:hover {
-        transform: translateY(-2px);
-      }
-      .theme-toggle:active {
-        transform: translateY(0);
-      }
-    </style>
-  </head>
-  <body>
-    <div class="phone-container">
-      <div class="status-bar">
-        <span>9:30</span>
-        <div class="status-icons">
-          <span>🔋</span>
-          <span>📶</span>
-          <span>📡</span>
-        </div>
-      </div>
-      <div class="header">
-        <button class="back-button">
-          <svg class="icon" viewBox="0 0 24 24">
-            <path
-              d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
-            />
-          </svg>
-        </button>
-        <span class="header-title">Now playing</span>
-      </div>
-      <div class="content">
-        <div class="album-container">
-          <div class="album-art">
-            <div class="album-pattern">
-              <!-- Generate pattern cells -->
-              <script>
-                for (let i = 0; i < 144; i++) {
-                  document.write('<div class="pattern-cell"></div>');
-                }
-              </script>
-            </div>
-          </div>
-        </div>
-        <div class="track-info">
-          <div class="track-title">Early Aughts</div>
-          <div class="track-artist">Song Histories Podcast</div>
-        </div>
-        <div class="progress-container">
-          <div class="progress-bar">
-            <div class="progress-fill">
-              <div class="progress-handle"></div>
-            </div>
-          </div>
-          <div class="time-labels">
-            <span>1:28</span>
-            <span>3:03</span>
-          </div>
-        </div>
-        <div class="controls">
-          <button class="control-btn small">
-            <svg class="icon" viewBox="0 0 24 24">
-              <path
-                d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"
-              />
-            </svg>
-          </button>
-          <button class="control-btn medium">
-            <svg class="icon large" viewBox="0 0 24 24">
-              <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z" />
-            </svg>
-          </button>
-          <button class="control-btn primary">
-            <svg class="icon large" viewBox="0 0 24 24">
-              <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
-            </svg>
-          </button>
-          <button class="control-btn medium">
-            <svg class="icon large" viewBox="0 0 24 24">
-              <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z" />
-            </svg>
-          </button>
-          <button class="control-btn small">
-            <svg class="icon" viewBox="0 0 24 24">
-              <path
-                d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"
-              />
-            </svg>
-          </button>
-        </div>
-        <div class="volume-container">
-          <svg class="icon volume-icon" viewBox="0 0 24 24">
-            <path
-              d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
-            />
-          </svg>
-          <div class="volume-slider">
-            <div class="volume-fill"></div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="demo-controls">
-      <button class="theme-toggle" onclick="toggleTheme()">Toggle Theme</button>
-      <button class="theme-toggle" onclick="changeAlbumColors()">
-        Change Album
-      </button>
-    </div>
-    <script>
-      let darkMode = false;
-      function toggleTheme() {
-        darkMode = !darkMode;
-        if (darkMode) {
-          document.documentElement.style.colorScheme = "dark";
-          applyDarkTheme();
-        } else {
-          document.documentElement.style.colorScheme = "light";
-          applyLightTheme();
-        }
-      }
-      function applyLightTheme() {
-        const root = document.documentElement;
-        root.style.setProperty("--md-sys-color-primary", "#006d9e");
-        root.style.setProperty("--md-sys-color-on-primary", "#ffffff");
-        root.style.setProperty("--md-sys-color-primary-container", "#c0e9fb");
-        root.style.setProperty("--md-sys-color-secondary", "#3c6473");
-        root.style.setProperty("--md-sys-color-secondary-container", "#c0e9fb");
-        root.style.setProperty("--md-sys-color-tertiary", "#5b5b82");
-        root.style.setProperty("--md-sys-color-tertiary-container", "#e1deff");
-        root.style.setProperty("--md-sys-color-background", "#f8fdff");
-        root.style.setProperty("--md-sys-color-on-background", "#181c1e");
-        root.style.setProperty("--md-sys-color-surface", "#f8fdff");
-        root.style.setProperty("--md-sys-color-on-surface", "#181c1e");
-        root.style.setProperty("--md-sys-color-surface-variant", "#d9e4e9");
-        root.style.setProperty("--md-sys-color-on-surface-variant", "#3f484c");
-      }
-      function applyDarkTheme() {
-        const root = document.documentElement;
-        root.style.setProperty("--md-sys-color-primary", "#00d8ff");
-        root.style.setProperty("--md-sys-color-on-primary", "#003d6a");
-        root.style.setProperty("--md-sys-color-primary-container", "#005583");
-        root.style.setProperty("--md-sys-color-secondary", "#a4cdde");
-        root.style.setProperty("--md-sys-color-secondary-container", "#234c5a");
-        root.style.setProperty("--md-sys-color-tertiary", "#c5c2ef");
-        root.style.setProperty("--md-sys-color-tertiary-container", "#434369");
-        root.style.setProperty("--md-sys-color-background", "#0f1416");
-        root.style.setProperty("--md-sys-color-on-background", "#dee3e6");
-        root.style.setProperty("--md-sys-color-surface", "#181c1e");
-        root.style.setProperty("--md-sys-color-on-surface", "#dee3e6");
-        root.style.setProperty("--md-sys-color-surface-variant", "#3f484c");
-        root.style.setProperty("--md-sys-color-on-surface-variant", "#bdc8cd");
-      }
-      const albumThemes = [
-        {
-          name: "Ocean",
-          primary: "#006d9e",
-          secondary: "#3c6473",
-          tertiary: "#5b5b82",
-        },
-        {
-          name: "Sunset",
-          primary: "#d84315",
-          secondary: "#ff6e40",
-          tertiary: "#ffab00",
-        },
-        {
-          name: "Forest",
-          primary: "#2e7d32",
-          secondary: "#66bb6a",
-          tertiary: "#8bc34a",
-        },
-        {
-          name: "Purple Dream",
-          primary: "#6a1b9a",
-          secondary: "#ab47bc",
-          tertiary: "#ce93d8",
-        },
-      ];
-      let currentAlbum = 0;
-      function changeAlbumColors() {
-        currentAlbum = (currentAlbum + 1) % albumThemes.length;
-        const theme = albumThemes[currentAlbum];
-        const root = document.documentElement;
-        root.style.setProperty("--md-sys-color-primary", theme.primary);
-        root.style.setProperty("--md-sys-color-secondary", theme.secondary);
-        root.style.setProperty("--md-sys-color-tertiary", theme.tertiary);
-        // Update track info to match album
-        document.querySelector(".track-title").textContent =
-          theme.name + " Vibes";
-      }
-    </script>
-  </body>
-</html>