Theme Builder and Theme JSON Internals

Theming & Responsive LayoutsModule 2The lesson guide, the walkthrough video, the knowledge check and the hands-on lab this sample was built from are on learnwisej.com — free, with an AI tutor in every lesson.

Open the course

This example is the Module 1 console gets one theme file, Themes/AdaptiveOps.theme, created as a full copy of the Bootstrap-4 base theme and edited in the lesson's order: named colour and font tokens first (brandPrimary, brandAccent, surface, surfaceAlt, textMain, textMuted, danger, warning, success, focusFrame; fonts default, heading, mono), then the button, panel (caption bar), tab, grid header, invalid editor and tooltip appearances from those tokens, then an action-button appearance that inherits from button and overrides only default, hovered and pressed. Default.json names the theme, the status label reports Application.Theme.Name, the Save command gets its look through AppearanceKey, and no BackColor, ForeColor or Font is left in the project.

The source of this sample

iceteagroup/LearnWisej-SamplesTheming and Responsive Layouts Course/Module 2

Browse this folder on GitHub

Or clone it: git clone https://github.com/iceteagroup/LearnWisej-Samples.git — then open AdaptiveOps.slnx in Visual Studio and press F5.

Run it

cd "LearnWisej-Samples/Theming and Responsive Layouts Course/Module 2/AdaptiveOps"
dotnet run -f net10.0 --urls http://localhost:5502

Then open http://localhost:5502 (or open AdaptiveOps.slnx in Visual Studio and press F5).

What to try

• Startup: the console renders on AdaptiveOps (page on surfaceAlt, white cards with 6 px corners, a brandPrimary caption bar on the details card); the status bar reads Theme: AdaptiveOps and Width: N px.
• Save (details panel) is an action-button: hover it (#1F4A92), hold the mouse (#183B75 and a 1 px shift), Tab to it (the shared focus ring from button). Its tooltip uses the tooltip/atom appearance.
• Clear the Title (or Owner) and press Save: the server rejects the ticket and the editor enters the theme's invalid state (danger border, the message in the error tooltip); the status label says why.
• Grid header: table-header-cell on surfaceAlt with textMuted text; the sorted column's text is brandAccent.
• Apply theme re-reads Application.Theme.Name into the status label and re-applies action-button to Save.
• Theme not found: change "theme" in Default.json to a name with no file in Themes/ and restart: the status label reads Theme "AdaptiveOps" was not found in the Themes folder; running "…".

Where things live

AdaptiveOps/
├─ Themes/AdaptiveOps.theme      the custom theme: full Bootstrap-4 copy + the Module 2 edits (Content, copied to bin/)
├─ Default.json                  "theme": "AdaptiveOps"
├─ Web.config                    Wisej.DefaultTheme = AdaptiveOps
├─ MainPage.Designer.cs          the docked shell: AppearanceKey / States only, no BackColor, ForeColor or Font
├─ MainPage.cs                   ApplyTheme() (Load + btnApplyTheme_Click), tickets, Save with the invalid state
├─ Models/                       the same ticket data as every module
└─ docs/
   ├─ ThemeNotes.md              file structure, tokens, appearances, inheritance and state-order decisions
   ├─ ThemeBuilderSteps.md       the Theme Builder session (tree, property grid, preview, live update, Last Clicked)
   └─ ThemePreviewScreenshots.md the preview and browser screenshots the learner takes, and what each must show