fix: correct theme initialization for classic and brand themes

[alexkaduk]

Problem

The documentation site was hardcoding theme attributes to 'brand-dark',
which caused styling issues for developers. The existing withBrandTheme flag
was being checked but never actually used to set initial theme values.

Root Causes

1. SiteMetadata component: Hardcoded data-ix-theme="brand-dark"
   instead of conditionally setting based on withBrandTheme flag
2. PlaygroundContext: Hardcoded default theme as 'brand' in state
   initialization and localStorage fallback
3. CSS architecture mismatch: Code used old combined format
   ('brand-dark') while CSS expects new separated format
   (data-ix-theme="brand" + data-ix-color-schema="dark")

Changes Made

src/theme/SiteMetadata/index.tsx

• Changed from single data-ix-theme="brand-dark" attribute to
  separate data-ix-theme and data-ix-color-schema attributes
• Added conditional logic to set data-ix-theme="classic" when
  withBrandTheme is false
• Updated MutationObserver to maintain correct theme on dark/light
  mode toggle

src/context/playground-context.tsx

• Replaced hardcoded 'brand' default with dynamic check:
  withBrandTheme ? 'brand' : 'classic'
• Updated state initialization and localStorage fallback to use
  defaultTheme variable
• Added defaultTheme to useEffect dependency array

Results

✅ Developers now see properly styled components
(classic theme) instead of black/white
✅ Developers with VPN access continue to see brand theme as before
✅ Preview iframe buttons now visible with correct styling
✅ Code is future-proof using current CSS architecture (separate
theme and color-schema attributes)
✅ No package installations required - pure code fix

Testing

Tested in both scenarios:

• Without corporate theme: Classic theme applies correctly
• With corporate theme: Brand theme applies correctly (backwards compatible)

Impact

This fix enables developers without VPN access to contribute to
documentation with properly styled local previews, while maintaining
full compatibility for developers with the corporate theme installed.

[netlify]

✅ Deploy Preview for industrial-experience ready!

Name	Link
🔨 Latest commit	99fd6f5
🔍 Latest deploy log	https://app.netlify.com/projects/industrial-experience/deploys/6900cb62232506000888723a
😎 Deploy Preview	https://deploy-preview-113--industrial-experience.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gemini-code-assist]

Summary of Changes

Hello @alexkaduk, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses critical theme initialization issues within the documentation site, which previously caused styling problems for developers, particularly those without corporate VPN access. By refactoring how themes are detected and applied in both SiteMetadata and PlaygroundContext, the changes ensure that the correct 'classic' or 'brand' theme is consistently rendered, improving the local development experience and aligning with the current CSS architecture.

Highlights

• Theme Initialization Correction: Fixed hardcoded theme attributes in SiteMetadata by introducing separate data-ix-theme and data-ix-color-schema attributes, ensuring proper theme application based on the new CSS architecture.
• Dynamic Default Theme: Updated PlaygroundContext to dynamically determine the default theme ('brand' or 'classic') based on the withBrandTheme flag, removing a hardcoded 'brand' default and improving flexibility.
• Conditional Classic Theme Application: Implemented logic in SiteMetadata to correctly apply the 'classic' theme when withBrandTheme is false, resolving styling issues for developers without corporate theme access.
• Robust Theme Toggling: Enhanced the MutationObserver in SiteMetadata to consistently maintain the correct theme and color schema when dark/light mode is toggled, ensuring visual consistency.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request effectively resolves the theme initialization problem by dynamically setting the theme based on the withBrandTheme flag, which is a significant improvement over the previous hardcoded approach. The changes in playground-context.tsx and SiteMetadata/index.tsx are logical and correctly implemented. I have one suggestion for SiteMetadata/index.tsx to refactor a block of code to make it more concise and maintainable. Overall, this is a well-executed fix.

[alexkaduk]

The results for http://localhost:3000/docs/components/button/code are