20250821 - 📝 Quartz theme colors examples

Example 1 - No name

quartz.config.ts

colors: {
        lightMode: {
          light: "#faf8f8",
          lightgray: "#e5e7ea",
          gray: "#b8b8b8",
          darkgray: "#4e4e4e",
          dark: "#2b2b2b",
          secondary: "#284b63",   // slate (primary links/buttons)
          tertiary: "#84a59d",    // sage (supporting accent)
          highlight: "rgba(40, 75, 99, 0.08)",   // slate-tinted selection/hover
          textHighlight: "#fff4a388",            // warm text highlight
        },
        darkMode: {
          light: "#121417",       // softer ink (vs pure black)
          lightgray: "#1a1f26",
          gray: "#6e7681",
          darkgray: "#d4d4d4",
          dark: "#ebebec",
          secondary: "#82a9c1",   // lightened slate for dark UI
          tertiary: "#84a59d",    // sage accent
          highlight: "rgba(130, 169, 193, 0.16)", // slate-tinted hover
          textHighlight: "#b3aa0288",
        },
      }

Example 2 - Twilight/Purple

quartz.config.ts

colors: {
        lightMode: {
          light: "#f6f4f9",
          lightgray: "#e6e1ee",
          gray: "#b8b0c8",
          darkgray: "#4e4a55",
          dark: "#2b2833",
          secondary: "#7D5BA6",    // twilight purple for links/buttons
          tertiary: "#F2C94C",     // golden ember accent
          highlight: "rgba(125, 91, 166, 0.15)",  // violet-tinted selection
          textHighlight: "#ffe08288",             // pale amber overlay
        },
        darkMode: {
          light: "#1A1625",       // ink-violet background
          lightgray: "#252033",
          gray: "#7e7891",
          darkgray: "#d4d1dc",
          dark: "#ebebec",
          secondary: "#9B51E0",   // orchid blue for links/buttons
          tertiary: "#6FCF97",    // firefly green accent
          highlight: "rgba(155, 81, 224, 0.25)", // violet-blue glow
          textHighlight: "#f2c94c66",            // warm gold glow
        },
      },

Example 3 - Serene Garden

quartz.config.ts

colors: {
        lightMode: {
          light: "#f5f9f6",      // soft garden mist background
          lightgray: "#e0ebe5",  // pale sage gray
          gray: "#9aa5a0",       // muted stone gray
          darkgray: "#3b4440",   // grounding forest gray
          dark: "#1e2623",       // deep evergreen
          secondary: "#2D6A4F",  // rich leafy green for links/buttons
          tertiary: "#FFD166",   // warm golden accent
          highlight: "rgba(45, 106, 79, 0.15)",  // green-tinted selection
          textHighlight: "#ffd16666",            // amber overlay for text
        },
        darkMode: {
          light: "#101615",      // near-black forest ink
          lightgray: "#1b2422",  // deep sage surface
          gray: "#6b7a75",       // soft moss gray
          darkgray: "#dce3df",   // pale mist gray
          dark: "#f5f9f6",       // light garden mist for text
          secondary: "#52B788",  // minty green for links/buttons
          tertiary: "#F4978E",   // soft coral accent
          highlight: "rgba(82, 183, 136, 0.25)", // mint glow
          textHighlight: "#ffd16666",            // amber overlay for text
        },
      },

Example 4 - “garden calm” feeling but moves away from everything being green.

quartz.config.ts

colors: {
        lightMode: {
          light: "#f8f9fa",      // soft mist background (neutral, not green)
          lightgray: "#e6e8eb",  // pale stone gray
          gray: "#8a9299",       // muted slate gray
          darkgray: "#2f3b44",   // grounding slate/stone
          dark: "#1c252c",       // deep ink
          secondary: "#3A6EA5",  // blue-slate for links/buttons (water element)
          tertiary: "#FFB88C",   // warm coral/amber accent (sunlight)
          highlight: "rgba(58, 110, 165, 0.15)",  // blue-tinted selection
          textHighlight: "#ffb88c66",             // coral overlay for text
        },
        darkMode: {
          light: "#13181d",      // near-black ink
          lightgray: "#1d242b",  // deep slate surface
          gray: "#6f7c85",       // soft slate gray
          darkgray: "#d9dee2",   // pale stone mist
          dark: "#f8f9fa",       // light mist for text
          secondary: "#5A9FD6",  // brighter blue-slate for dark mode links/buttons
          tertiary: "#F4978E",   // soft coral accent
          highlight: "rgba(90, 159, 214, 0.25)", // blue glow
          textHighlight: "#ffb88c66",             // coral overlay
        },
      },