Your Theme Is Data Too

Brand colours as a JSON database with presets — emerald forest green, Sigiriya sunset gold — turned into CSS variables at runtime.

13 Oct 20264 min read#Design tokens#CSS variables#Tourism

Lesson 3 of 10 · Tourism Tech · built from Nora Travels, Nora Labs, Mahesh Travellers and my hospitality sites

Tourism brands change palettes for seasons, partners and campaigns. If colours live in code, every change is a deploy. In Nora Travels, colours work like a database.

Example — theme.json

ExampleJSON

{
  "activeTheme": "noraTravelsSignature",
  "themes": {
    "noraTravelsSignature": {
      "name": "Nora Travels Signature",
      "description": "Emerald forest green, sunset gold, and warm Ceylon ivory",
      "colors": {
        "primary": "#143d30",
        "secondary": "#d49b38",
        "accent": "#e76f51",
        "surface": "#ffffff",
        "surfaceSubtle": "#fbfaf7",
        "text": "#11231c",
        "footerBg": "#11231c"
      }
    }
  }
}

Example — palette to CSS variables

ExampleTypeScript

export function getActiveTheme(): ThemeConfig {
  const activeKey = themeData.activeTheme as keyof typeof themeData.themes;
  return themeData.themes[activeKey] || themeData.themes.googleCloudClassic;
}

export function generateCssVariables(colors: ThemeColors): string {
  return `
    :root {
      --brand-primary: ${colors.primary};
      --brand-secondary: ${colors.secondary};
      --brand-surface: ${colors.surface};
      --brand-text: ${colors.text};
    }`;
}

ExampleJavaScript

// tailwind.config.js — utilities read the variables, with a fallback
brand: {
  primary: 'var(--brand-primary, #1a73e8)',
  surface: 'var(--brand-surface, #ffffff)',
}

The portal ships presets — Google Cloud Classic, Ceylon Sapphire, Emerald Tea Valley, Sigiriya Golden Ochre — and an on-page palette switcher. Changing the brand is a JSON edit.