CSS, CssClass, CssStyle, States, Runtime Themes

Theming & Responsive LayoutsModule 3The 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

The console ships its theme (Themes/AdaptiveOps.theme, selected in Default.json) and a scoped stylesheet (Styles/AdaptiveOps.css, linked from Default.html). The metric cards get CssClass = "metric-card", the priority badge CssClass = "compact-badge", the SLA bar carries the project's only CssStyle (a computed value), Save uses AppearanceKey = "action-button", the Overdue card gets a themed stale state from data, and a toolbar switch changes the theme for the current session only.

The source of this sample

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

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 3/AdaptiveOps"
dotnet run -f net10.0 --urls http://localhost:5503

Then open http://localhost:5503. For the two-session check open the same URL in a private window too.

What to try

• Page load: white cards with a soft shadow and small uppercase titles; the Overdue card is tinted amber (stale: two seed tickets are at least 2 days past due); the SLA bar is filled to the computed share; Save is brand blue. Status bar: Theme: AdaptiveOps (this session) and Width: N px.
• Dark theme (toolbar): this session turns dark, the status label reads Theme: AdaptiveOps-Dark (this session), the second browser stays light. Reload: still dark. Click Light theme to go back.
• Stale comes and goes with data: select T-1037 and T-1038, set each Due to tomorrow and Save; after the second save the Overdue card turns white and the SLA share rises.
• Priority badge: select tickets of different priority; the badge tint changes (compact-badge priority-critical / -high / -medium / -low).
• Save: hover and press it (the action-button states); clear the Title and Save to see the server reject it in the status label.

Where things live

AdaptiveOps/
├─ Default.html                   <link rel="stylesheet" href="Styles/AdaptiveOps.css" />
├─ Default.json · Web.config      "theme": "AdaptiveOps" (startup theme)
├─ Themes/AdaptiveOps.theme       tokens, fonts, appearances card, metric-card (+ stale), metric-title,
│                                 metric-value (+ stale), muted-label, status-label, action-button
├─ Styles/AdaptiveOps.css         .metric-card, .metric-card .metric-title, .metric-strip.strip-*,
│                                 .compact-badge(.priority-*), .progress-track / .progress-fill
├─ MainPage.Designer.cs           AppearanceKey / CssClass on the styled controls, no BackColor/ForeColor/Font on them
├─ MainPage.cs                    RefreshTickets() (stale state), UpdateSla() (the CssStyle), btnTheme_Click
├─ Models/TicketRepository.cs     tickets + StaleAfterDays, CountStaleOverdue, SlaOnTimePercent
└─ docs/
   ├─ CssDecisions.md             each visual change → mechanism → why; the one CssStyle
   ├─ RuntimeThemeNotes.md        startup vs session vs shared theme; the switch; two-session evidence
   └─ LabNotes.md                 layer ownership table, the CssStyle reason, the AI-assistant question