I Built Two Complete Visual Themes for One Platform: Here's Why Dark Mode Isn't Enough

TL;DR: Building dual themes for visionvix.world taught me that one look never serves everyone. VEX (dark neon) works for gamers at night. Lab (bright white) works for teachers on projectors. Same simulators, same controls, two entirely different visual experiences. You can build this yourself in a weekend by starting with a single AI-generated image as your design brief.

I launched visionvix.world with a dark neon control-room aesthetic. Gamers loved it. Then a teacher emailed: "This looks amazing, but I can't put it on the classroom projector. The kids can't read the text."

That feedback changed everything. I could have picked one audience and ignored the other. Instead, I built two complete visual themes for the same platform.

The Problem With One-Size-Fits-All Design

A teenager exploring space after school and a biology teacher planning a lesson want the same simulators, but they need different experiences. The teenager sits in a dark bedroom with a gaming monitor. The teacher stands in a bright classroom pointing at a 75-inch screen. One interface cannot work for both contexts.

Neon green text on black looks sharp on an OLED panel at night. Under fluorescent classroom lights on a cheap projector, it washes out completely. White panels with dark text hold up in bright rooms. In a dark room, white panels feel like staring into a flashlight.

I had two choices: pick one group and lose the other, or build both and let people decide.

What VEX and Lab Actually Are

VEX is the original. Deep black background, neon green accents, glowing edges, a futuristic control room vibe. It feels like piloting a spaceship. Gamers and tech enthusiasts immediately recognized the aesthetic. It's built for dark rooms, long sessions, and people who treat software like an experience.

Lab is the calm twin. White glass panels, soft blue buttons, dark readable text, bright clean edges. It feels like a modern science classroom. Teachers, students, and anyone working in daylight can read every label without squinting. Both themes run the exact same simulators with the exact same controls.

The simulators include the History Globe, Molecule Studio, Chemistry Laboratory, Periodic Table, Solar System, and Chord Progression Generator. A molecule bond angle is the same in both themes. A planet orbits at the same speed. The tools work identically. Only the wrapper changes.

Here's how they compare:

That last row is the most important. A theme should never change what a site does, only how it looks. If switching to Lab hid a button or moved a slider, users would have to learn the interface twice. That breaks trust.

How the Theme System Works on VisionVix.World

First Visit: Choose Your Look

Open visionvix.world. A modal window appears with both themes side by side. Each has a preview image, a short description of who it's for, and a single button. Pick VEX or Lab, or press "Not now" to stick with the default.

The choice is saved in your browser's local storage. Tomorrow, when you return, the site opens in the same theme. No login required. No account. Just your preference, remembered.

The Sun and Moon Toggle

Changed your mind? A small sun-and-moon button sits at the top right of every page, next to the main navigation. Sun activates Lab. Moon activates VEX. One click, instant switch, across the entire site.

This toggle appears on every page: the landing page, the simulator index, inside each 3D tool, the Teachers page, the 3D Free Tools page. Consistency matters. Users should never hunt for the theme control.

Inside the Simulators

The theme carries through into every tool. Each simulator has the same "All Simulators" button at the top left and the same theme toggle on the right side of its header. Panels, labels, buttons, and text all shift color with the theme.

The 3D scenes themselves respect their own logic. Space stays dark in the Solar System regardless of theme, because space is dark. The molecule backgrounds adjust slightly for contrast, but a carbon atom doesn't turn neon green just because you picked VEX.

Teacher Pages and Free Tools

The Teachers page and the 3D Free Tools page follow the same theme choice. Lab was built with these pages in mind. Lesson cards, a free teacher resource pack, and printable worksheets all read better on white when a class is looking at a board. Dark text on white wins in bright rooms.

Why Offering Choice Actually Matters

Different People, Different Contexts

Your visitors are not all the same. A 16-year-old exploring chemistry for fun and a 40-year-old teacher planning a curriculum both land on the same page. One look will always feel wrong to one of them.

The physical room changes what works. A gaming monitor in a dark bedroom is not a classroom projector under fluorescent lights. Contrast ratios that look perfect in one context fail in the other.

Accessibility Is Not Optional

Both VEX and Lab were checked against WCAG contrast level AA standards. That means a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. This isn't about aesthetics. It's about people with weaker eyesight, color blindness, or astigmatism being able to read your site.

Dark themes often fail contrast checks because designers use low-contrast grays for "subtlety." Bright themes fail when designers use pastel text on white for "elegance." Neither approach works if users can't read the words.

Trust and Engagement

When people can set things the way they like, they stay longer and come back. Asking once on the first visit is enough. Forcing a choice on every page is annoying. Giving no choice at all is arrogant.

Many phones and laptops already have a light or dark setting, as described in the MDN prefers-color-scheme documentation. Asking visitors directly goes further, because the choice is about the kind of experience they want, not just brightness. This approach aligns with broader landing page best practices that prioritize user control and clarity.

How to Build Your Own Theme in a Weekend

You don't need to be a designer. Lab started as a picture. Here's the simple process.

Step 1: Start With an Image

Describe your visitors and the feeling you want. Ask ChatGPT, Claude, or any image model to draw your page in that style. For Lab, I asked for "a bright, clean science lab version of my landing page, with white glass panels, blue buttons, and a modern classroom feel."

Keep refining the prompt until the image feels right. That image becomes your design brief. You're not copying it pixel-for-pixel. You're extracting its colors, spacing, and mood.

Step 2: Turn the Image Into CSS Variables

Give the image to ChatGPT or Claude along with your current CSS file. Ask it to create a theme that copies the colors, fonts, corner radii, and shadows from the image without changing how the page works.

If you prefer working by hand, open your site in VS Code. Use a color picker to pull hex codes from the image. Define a new set of CSS custom properties for the theme:

/* Lab theme variables */
:root[data-theme="lab"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F7FA;
  --text-primary: #1A1A1A;
  --text-secondary: #4A5568;
  --accent-primary: #2563EB;
  --accent-secondary: #3B82F6;
  --border-color: #E2E8F0;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
}

Do the same for your existing theme (VEX in my case):

/* VEX theme variables */
:root[data-theme="vex"] {
  --bg-primary: #0A0E14;
  --bg-secondary: #141920;
  --text-primary: #E0E0E0;
  --text-secondary: #A0A0A0;
  --accent-primary: #00FF88;
  --accent-secondary: #00CC6E;
  --border-color: #1F2937;
  --shadow-sm: 0 0 8px rgba(0, 255, 136, 0.2);
  --shadow-md: 0 0 16px rgba(0, 255, 136, 0.3);
  --border-radius: 4px;
}

Replace all hard-coded colors in your CSS with var(--bg-primary), var(--text-primary), etc. This takes time but only needs to happen once.

Step 3: Add the Theme Switcher

Create a small JavaScript function to toggle the theme:

function setTheme(themeName) {
  document.documentElement.setAttribute('data-theme', themeName);
  localStorage.setItem('theme', themeName);
}

function loadTheme() {
  const savedTheme = localStorage.getItem('theme') || 'vex';
  setTheme(savedTheme);
}

// Run on page load
loadTheme();

// Attach to toggle button
document.getElementById('theme-toggle').addEventListener('click', () => {
  const current = document.documentElement.getAttribute('data-theme');
  const next = current === 'vex' ? 'lab' : 'vex';
  setTheme(next);
});

This reads the saved preference from localStorage on load and applies it to the root element. The data-theme attribute controls which CSS variables are active.

Step 4: Build the First-Visit Modal

On the first visit, show a modal asking users to pick a theme. Check if localStorage already has a theme saved. If not, show the modal:

function showThemeModal() {
  const hasSavedTheme = localStorage.getItem('theme');
  if (!hasSavedTheme) {
    document.getElementById('theme-modal').style.display = 'flex';
  }
}

// Attach to theme choice buttons
document.getElementById('choose-vex').addEventListener('click', () => {
  setTheme('vex');
  document.getElementById('theme-modal').style.display = 'none';
});

document.getElementById('choose-lab').addEventListener('click', () => {
  setTheme('lab');
  document.getElementById('theme-modal').style.display = 'none';
});

showThemeModal();

The modal HTML should have two preview cards, each with a button. Keep it simple. Users should be able to pick in under five seconds.

Step 5: Test Contrast Ratios

Use a tool like WebAIM's Contrast Checker or Chrome DevTools' built-in contrast checker. Test every text color against its background. Fix anything below 4.5:1 for normal text or 3:1 for large text.

This step is not optional. A beautiful theme that fails contrast checks is a broken theme.

Step 6: Ship It

Deploy the new theme alongside the old one. Add the toggle to every page. Watch analytics to see which theme people prefer. Adjust colors if needed based on real usage.

For visionvix.world, roughly 60% of users pick VEX and 40% pick Lab. That split proves both themes are necessary. If 95% picked one, I could drop the other. But both are serving real people.

What This Approach Cannot Do

Dual themes are not a magic fix. They add complexity. Every new feature now needs to be tested in both themes. Every color choice needs to work in two contexts. If you're a solo developer, that's double the QA time.

Themes also don't fix bad design. If your layout is confusing in VEX, it will be confusing in Lab. If your buttons are hard to find, changing their color won't help. Fix the structure first, then add themes.

And themes don't replace responsive design. A theme that works on desktop but breaks on mobile is still broken. Build mobile-first, then apply themes on top.

Why I'm Still Glad I Built Both

The teacher who couldn't use the site on a projector can now use it. The gamer who wanted a dark interface still has one. Neither group had to compromise.

Building Lab took a weekend. Maintaining both themes adds maybe 10% to my dev time. That's a small cost for doubling the number of people who can comfortably use the platform.

If you're building something people actually use, consider giving them a choice. Not every choice, just the ones that matter. Light and dark is one of them.

The full breakdown of how I built the cinematic 3D website that powers these simulators is in a separate post. You can also watch the entire build process on my YouTube channel, where I document every technical decision in real time.