Skip to content

Thema Strategie

Absoluut. C'est ton "Killer Feature".

Als je claimt: "One Core. Infinite Skins," en je website is statisch, dan is het slechts een belofte. Als je website live verandert terwijl de bezoeker kijkt, is het bewijs.

Het is de ultieme "Show, Don't Tell". Het bewijst dat jouw architectuur (One Core) inderdaad flexibel genoeg is om elke industrie (Infinite Skins) te bedienen zonder de code te breken.

Maar pas op: maak er geen kermis van. Hier is de strategie om dit professioneel aan te pakken.

De Strategie: "The Chameleon Demo"

Verander niet de hele branding van Ticket Masala (je groene logo moet heilig blijven). In plaats daarvan:

  1. De "Skin Switcher": Plaats een prominente toggle in de Hero-sectie of Navbar.
  2. Het Effect: Wanneer de gebruiker klikt, verandert de accentkleur, het lettertype van de koppen, en de sfeer van de site, maar de structuur blijft identiek.
  3. De Boodschap: "Zie je? Dezelfde HTML, totaal andere business context."

Hier is hoe je dat implementeert in je nieuwe Design System v3.0.

1. Definieer de 4 "Multiverse" Themes

Voeg dit toe aan je CSS. We gebruiken data-theme attributen op de <body> tag om te switchen.

/* --- DEFAULT (Ticket Masala - The Architect) --- */
:root {
    --color-primary: #4CAF50; /* Masala Green */
    --font-heading: 'Space Grotesk', sans-serif;
    --radius-component: 4px;
}

/* --- THEME 1: DESGOFFE (Government / Bureaucracy) --- */
/* Statig, betrouwbaar, klassiek blauw */
[data-theme="desgoffe"] {
    --color-primary: #2C3E50; /* Official Blue */
    --color-masala-hover: #34495E;
    --font-heading: 'Merriweather', serif; /* Serif straalt autoriteit uit */
    --bg-canvas: #F0F2F5; /* Lichtgrijs, papier-achtig (geen dark mode) */
    --bg-surface: #FFFFFF;
    --text-primary: #1A1A1A;
    --radius-component: 2px; /* Strenge, harde hoeken */
}

/* --- THEME 2: WHITMAN (Infrastructure / Rail) --- */
/* Hoog contrast, waarschuwingen, industrieel */
[data-theme="whitman"] {
    --color-primary: #FFB703; /* Safety Yellow/Orange */
    --color-masala-hover: #FFCA3A;
    --font-heading: 'Chivo', sans-serif; /* Robuust en zwaar */
    --bg-canvas: #121212; /* Asphalt */
    --text-inverse: #000000; /* Zwarte tekst op gele knoppen (Hoge zichtbaarheid) */
    --radius-component: 0px; /* Brutaal, geen zachtheid */
    --border-structural: #FFB703; /* Gele lijnen overal */
}

/* --- THEME 3: LIBERTY (Tech / SaaS) --- */
/* Cyberpunk, neon, donker */
[data-theme="liberty"] {
    --color-primary: #7B2CBF; /* Neon Purple */
    --color-masala-hover: #9D4EDD;
    --font-heading: 'JetBrains Mono', monospace; /* Code aesthetic */
    --bg-canvas: #0D0221; /* Deep Space */
    --radius-component: 8px; /* Soepel en modern */
    --status-success: #00FFCC; /* Cyber Teal */
}

/* --- THEME 4: HENNESSEY (Research / Lab) --- */
/* Steriel, schoon, klinisch */
[data-theme="hennessey"] {
    --color-primary: #00A896; /* Lab Teal */
    --font-heading: 'Inter', sans-serif; /* Neutraal en schoon */
    --bg-canvas: #FFFFFF; /* White cleanroom */
    --bg-surface: #F0F9F8;
    --text-primary: #264653;
    --radius-component: 12px; /* Zachte, organische vormen */
}

2. De UI Component (The Switcher)

Plaats dit rechtsboven in je navigatie of als zwevende "Fab" (Floating Action Button).

<div class="theme-switcher">
    <span class="label">Select Tenant:</span>
    <div class="button-group">
        <button onclick="setTheme('default')" class="btn-tiny" title="Reset">🌶️ Core</button>
        <button onclick="setTheme('desgoffe')" class="btn-tiny" style="border-color: #2C3E50;">🏛️ Desgoffe</button>
        <button onclick="setTheme('whitman')" class="btn-tiny" style="border-color: #FFB703;">🚂 Whitman</button>
        <button onclick="setTheme('liberty')" class="btn-tiny" style="border-color: #7B2CBF;">👾 Liberty</button>
        <button onclick="setTheme('hennessey')" class="btn-tiny" style="border-color: #00A896;">🧬 Hennessey</button>
    </div>
</div>

3. De JavaScript Magie (De Motor)

Voeg dit simpele script toe aan je _Layout.cshtml of site.js.

function setTheme(themeName) {
    // Stel het data-attribuut in op de body
    document.body.setAttribute('data-theme', themeName);

    // Update de Hero Tekst dynamisch (Optioneel, voor extra wow-factor)
    const heroTitle = document.getElementById('dynamic-hero-title');
    const heroSubtitle = document.getElementById('dynamic-hero-subtitle');

    if(themeName === 'desgoffe') {
        heroTitle.innerText = "Governing The Municipality.";
        heroSubtitle.innerText = "Efficient bureaucracy compliant with protocol v2.4.";
    } else if (themeName === 'whitman') {
        heroTitle.innerText = "Maintaining The Tracks.";
        heroSubtitle.innerText = "Heavy infrastructure management with zero latency.";
    } else if (themeName === 'liberty') {
        heroTitle.innerText = "Deploying The Future.";
        heroSubtitle.innerText = "Agile workflows for high-velocity dev teams.";
    } else {
        // Reset naar default
        heroTitle.innerText = "Orchestrate Your Digital Empire.";
        heroSubtitle.innerText = "Stop drowning in chaos. Unify support and projects.";
    }
}

Waarom dit werkt

  1. Immediate Validation: De bezoeker klikt op "Desgoffe" en ziet de site transformeren naar een serieuze overheidsportal. Klikt op "Liberty" en het is ineens een coole startup.
  2. Technical Flex: Het laat zien dat je systeem echt gebaseerd is op variabelen en niet hardcoded is.
  3. Fun Factor: Mensen spelen graag met knopjes. Het houdt ze langer op je site.

Mijn advies: Doe het. Het kost je developer misschien 2 uur om die variabelen goed te zetten, maar het verkoopt het "Infinite Skins" verhaal beter dan 1000 woorden copy.