themes.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/png" href="/logo.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Theme Showcase - markon</title>
  <meta name="description" content="Browse all available themes for markon markdown editor" />
  <meta name="color-scheme" content="dark" />
  <meta name="theme-color" content="#ff1100" />
  <style>
    @import "./src/themes.css";

    @font-face {
      font-family: bungee;
      font-style: normal;
      font-display: swap;
      font-weight: 400;
      src:
        url(https://cdn.jsdelivr.net/fontsource/fonts/bungee@latest/latin-400-normal.woff2) format("woff2"),
        url(https://cdn.jsdelivr.net/fontsource/fonts/bungee@latest/latin-400-normal.woff) format("woff");
      unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
    }

    @font-face {
      font-family: rubik;
      font-style: normal;
      font-display: swap;
      font-weight: 700;
      src:
        url(https://cdn.jsdelivr.net/fontsource/fonts/rubik@latest/latin-700-normal.woff2) format("woff2"),
        url(https://cdn.jsdelivr.net/fontsource/fonts/rubik@latest/latin-700-normal.woff) format("woff");
      unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #1a0f1f;
      color: #f0f0e8;
      line-height: 1.6;
    }

    #showcase {
      max-width: 1400px;
      margin: 0 auto;
      padding: 2rem;
    }

    #themes-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 320px));
      gap: 1.5rem;
      max-width: 1200px;
      margin: 0 auto;
      justify-content: center;
    }

    .theme-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    }

    .theme-group:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

    .theme-card {
      border-radius: 0;
      font-family: rubik, sans-serif;
      font-weight: bold;
      padding: 0.5rem;
      transition: none;
      position: relative;
      overflow: hidden;
      min-height: 100px;
      display: flex;
      flex-direction: column;
      border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .theme-card:last-child {
      border-right: none;
    }

    .theme-header {
      display: flex;
      font-family: bungee, sans-serif;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.3rem;
    }

    .theme-name {
      font-size: 0.8rem;
      font-weight: 600;
      margin: 0;
    }

    .theme-mode {
      font-size: 0.6rem;
      padding: 0.1rem 0.25rem;
      border-radius: 3px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.2px;
    }

    .theme-mode.light {
      background: rgba(255, 255, 255, 0.2);
      color: #000;
    }

    .theme-mode.dark {
      background: rgba(0, 0, 0, 0.3);
      color: #fff;
    }

    .color-swatches {
      display: flex;
      gap: 0.2rem;
      margin-top: auto;
      flex-wrap: wrap;
    }

    .color-swatch {
      width: 14px;
      height: 14px;
      border-radius: 2px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      flex-shrink: 0;
    }

    .color-labels {
      display: flex;
      gap: 0.2rem;
      margin-top: 0.2rem;
      flex-wrap: wrap;
    }

    .color-label {
      font-size: 0.5rem;
      padding: 0.08rem 0.15rem;
      border-radius: 2px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.1px;
    }

    @media (max-width: 768px) {
      #showcase {
        padding: 1rem;
      }

      .theme-group {
        grid-template-columns: 1fr;
      }

      .theme-card {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.4rem;
        min-height: 90px;
      }

      .theme-card:last-child {
        border-bottom: none;
      }
    }
  </style>
</head>

<body>
  <div id="showcase">
    <div id="themes-grid"></div>
  </div>

  <script type="module">
    const COLOR_KEYS = ["brand", "accent", "primary", "secondary", "string", "keyword"];
    const FALLBACKS = {
      bg: "#000", bgLight: "#000", text: "#fff", brand: "#ff1100",
      accent: "#8866ff", primary: "#bb66ff", secondary: "#22aa88",
      string: "#22aa88", keyword: "#ff88bb", comment: "#bbbbbb", operator: "#bb88ee"
    };

    const getThemesSheet = () => Array.from(document.styleSheets).find(sheet =>
      sheet.href?.includes("themes.css") ||
      Array.from(sheet.cssRules).some(rule =>
        rule.selectorText?.includes('[data-theme="panda"]')
      )
    );

    const getThemeColors = (themeName, mode) => {
      const sheet = getThemesSheet();
      if (!sheet) return FALLBACKS;

      try {
        const rule = Array.from(sheet.cssRules).find(rule =>
          rule.selectorText?.includes(`[data-theme="${themeName}"][data-mode="${mode}"]`)
        );
        if (!rule) return FALLBACKS;

        const getColor = (prop) => rule.style?.getPropertyValue(`--${prop}`)?.trim() || FALLBACKS[prop];
        return {
          bg: getColor("bg"),
          bgLight: rule.style?.getPropertyValue("--bg-light")?.trim() || FALLBACKS.bgLight,
          text: getColor("text"),
          ...COLOR_KEYS.reduce((acc, key) => ({ ...acc, [key]: getColor(key) }), {})
        };
      } catch {
        return FALLBACKS;
      }
    };

    const extractThemesFromCSS = () => {
      const sheet = getThemesSheet();
      if (!sheet) return [];

      try {
        return [...new Set(
          Array.from(sheet.cssRules)
            .filter(rule => rule.selectorText?.includes("[data-theme="))
            .map(rule => rule.selectorText.match(/\[data-theme="([^"]+)"/)?.[1])
            .filter(Boolean)
        )].map(id => ({ id }));
      } catch {
        return [];
      }
    };

    const createElement = (tag, { className, textContent, style, title } = {}) => {
      const el = document.createElement(tag);
      if (className) el.className = className;
      if (textContent) el.textContent = textContent;
      if (style) Object.assign(el.style, style);
      if (title) el.title = title;
      return el;
    };

    const createColorElements = (colors, mode, containerClass, itemClass) => {
      const container = createElement("div", { className: containerClass });
      COLOR_KEYS
        .filter(key => colors[key])
        .map(key => createElement("div", {
          className: itemClass,
          style: { 
            background: colors[key],
            ...(itemClass === "color-label" && { color: mode === "light" ? "#000" : "#fff" })
          },
          title: `${key}: ${colors[key]}`,
          textContent: itemClass === "color-label" ? key : ""
        }))
        .forEach(item => container.appendChild(item));
      return container;
    };

    const createThemeCard = (themeName, mode) => {
      const colors = getThemeColors(themeName, mode);
      const card = createElement("div", {
        className: "theme-card",
        style: { background: colors.bg, color: colors.text }
      });

      const header = createElement("div", { className: "theme-header" });
      const name = createElement("h3", {
        className: "theme-name",
        textContent: themeName,
        style: { color: colors.text }
      });
      const modeIndicator = createElement("span", {
        className: `theme-mode ${mode}`,
        textContent: mode,
        style: {
          background: mode === "light" ? colors.bgLight : "rgba(0,0,0,0.3)",
          color: mode === "light" ? colors.text : "#fff"
        }
      });

      header.append(name, modeIndicator);
      const swatches = createColorElements(colors, mode, "color-swatches", "color-swatch");
      const labels = createColorElements(colors, mode, "color-labels", "color-label");

      card.append(header, swatches, labels);
      return card;
    };

    const initShowcase = () => {
      const grid = document.getElementById("themes-grid");
      if (!grid) return;

      extractThemesFromCSS()
        .map(theme => ({
          element: createElement("div", { className: "theme-group" }),
          cards: ["light", "dark"].map(mode => createThemeCard(theme.id, mode))
        }))
        .forEach(({ element, cards }) => {
          cards.forEach(card => element.appendChild(card));
          grid.appendChild(element);
        });
    };
    initShowcase();
  </script>
</body>

</html>