The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A themeable component ignores its theme for one of five reasons: its styles never read the value, the override never reaches the element that actually renders, the theming mechanism does not run in the environment where the component renders, a shadow boundary blocks the override, or the final CSS value is invalid or overridden by a later rule. You can separate these cases quickly by working through the checks below in order, starting with one property you can see is wrong.
Start with one property that is visibly wrong
Do not debug the whole theme at once. Choose one property on one element, such as the background color of a button or the text color of a heading, and set the theme value to something obviously different from the default so a change is easy to spot.
- Open the page in Chrome or Edge, right-click the element, and choose Inspect. In Firefox, the equivalent is Inspect Accessibility Properties or Inspect from the same menu.
- In the Elements panel, open the Styles pane and find the rule that sets the property. Note the selector and the file or component that declares it.
- Check the value in that rule. If it is a hard-coded color such as
#1a1a1a, the theme never reaches this property, and the fix belongs in the component’s styles, not in the theme. If it is a reference such asvar(--button-background), the component is reading a custom property, and you move to the next check. - Confirm that the name in the rule matches the name your theme defines. A misspelled or differently prefixed token produces the same symptom as a missing one.
A value that is defined but never consumed cannot change the property. React Strict DOM’s theming documentation describes defining variables and then referencing them from component styles, and SAP’s Writing Themeable CSS guide uses the same pattern with var(--sapButton_Background). If your component does not contain a reference like this, the theme has no path to the output.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesCheck the value and its scope at the rendered element
Custom properties inherit from ancestors, which means an override only applies to elements inside the element that declares it. An override placed on a sibling, on a wrapper that is not an ancestor of the component, or on a parent that a later rule resets will not reach the component.
#1 Best Overall
- CRISP CLARITY: This 23.8″ Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
- WORK SEAMLESSLY: This sleek monitor is virtually bezel-free on three sides, so the screen looks even bigger for the viewer. This minimalistic design also allows for seamless multi-monitor setups that enhance your workflow and boost productivity
- A BETTER READING EXPERIENCE: For busy office workers, EasyRead mode provides a more paper-like experience for when viewing lengthy documents
In the Styles pane, use the Computed tab and filter for -- to see the custom-property values that are in effect at that exact element. If the value there is still the default, the override is not arriving. Work upward through the DOM to find where the override is declared and confirm it is an ancestor of the rendered element.
The Raspberry Pi Foundation Design System’s theming guide declares its properties on :root and :host, so an override placed above the component applies to it by inheritance. React Strict DOM’s theming documentation similarly applies theme values to an element and makes them available to its descendants. If your override is set on a different element from the one you are inspecting, this is the most likely gap.
Rank #2
- CRISP CLARITY: This 22 inch class (21.5″ viewable) Philips V line monitor delivers crisp Full HD 1920x1080 visuals. Enjoy movies, shows and videos with remarkable detail
- 100HZ FAST REFRESH RATE: 100Hz brings your favorite movies and video games to life. Stream, binge, and play effortlessly
- SMOOTH ACTION WITH ADAPTIVE-SYNC: Adaptive-Sync technology ensures fluid action sequences and rapid response time. Every frame will be rendered smoothly with crystal clarity and without stutter
- INCREDIBLE CONTRAST: The VA panel produces brighter whites and deeper blacks. You get true-to-life images and more gradients with 16.7 million colors
- THE PERFECT VIEW: The 178/178 degree extra wide viewing angle prevents the shifting of colors when viewed from an offset angle, so you always get consistent colors
Confirm the theming mechanism runs in your render mode
Some theming mechanisms are not active in every rendering environment. styled-components’ Theming documentation says ThemeProvider passes the theme through React context to its descendants. It also states that the provider has no effect in React Server Components, because React context is not available there, and recommends CSS custom properties for that environment.
This applies only if your project uses styled-components and renders the component as a Server Component. Check how the component is rendered before you assume the provider is at fault. If the component is server-rendered, a provider-based theme will not reach it, and the value must be delivered through CSS custom properties that the component’s styles consume.
Rank #3
- Clear visuals. Fluid motion: A 144Hz refresh rate and 1ms MPRT deliver smooth, tear‑free motion across work, gaming, and streaming for clearer, more fluid viewing.
- Eye comfort: TÜV Rheinland 3‑star* certification reduces harmful blue light while preserving stunning color quality without compromise. *TÜV Rheinland 3-star eye comfort certification.
- Wide viewing angle: Get consistent views across a wide 178° /178° viewing angle.
- In-Plane Switching (IPS): See excellent color accuracy and consistency across wide viewing angles with In-plane Switching (IPS) technology.
- Ultra-thin bezels: Maximize your viewing experience with thin bezels.
Check Shadow DOM boundaries
If the component renders into a shadow root, the Elements panel shows the root as #shadow-root above the component’s children. Global selectors and document-level custom properties behave differently inside that boundary, so you need to find out which overrides the component is designed to accept.
- Material UI. The Shadow DOM guide describes setting the CSS-variable root selection to
:hostand placing the color-scheme node on the shadow-root element. If your theme variables are generated for the document root and never reach the shadow root, this configuration is the first thing to check. - Lightning Web Components. Salesforce’s styling hooks guide says inherited properties can cross the shadow boundary and that consumers can set custom properties above the component. The supported route is therefore a documented styling hook, not a selector that reaches into the shadow tree.
Do not expect arbitrary selectors from outside the component to style elements inside its shadow tree. If a component does not document a hook for the property you need, the override cannot be made stable without changing the component.
Rank #4
- CURVED FOR ENHANCED ENGAGEMENT: An immersive viewing experience with a curved monitor that wraps more closely around your field of vision; It creates a wider view, enhancing depth perception and minimizing peripheral distraction
- SMOOTH PERFORMANCE FOR SEAMLESS CONTENT: Stay in the action when playing games, watching videos, or working on creative projects; The 100Hz refresh rate reduces lag and motion blur so you don't miss a thing in fast-paced moments¹
- MORE GAMING POWER: Gain the edge with optimizable game settings; Color and image contrast can be adjusted to see scenes more vividly and spot enemies hiding in the dark; Game Mode adjusts any game to fill the screen so you can view every detail²
- KEEP IT EASY ON THE EYES: Care for your eyes and stay comfortable, even during long sessions; Advanced eye comfort technology certified by TÜV reduces eye strain by minimizing blue light and reducing irritating screen flicker²
- INCREASED VERSATILITY: Connect to more; Plug devices straight into your monitor for increased flexibility, making your computing environment even more convenient
Rule out invalid values and overriding rules
If the variable is present and the property still does not change, inspect the final declaration in the Styles pane. Two problems are common.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute- Invalid CSS from a computed token. In styled-components, a theme token can be a CSS variable string. The Theme tokens reference explains that such tokens are variable-reference strings, so JavaScript arithmetic on them can produce an invalid CSS value. For example, a token set to
var(--space-md)multiplied by 2 in JavaScript yieldsNaN, not a valid length. The browser drops an invalid declaration, so the property silently keeps its inherited or default value. Use CSScalc(var(--space-md) * 2)when the calculation belongs in CSS, or raw numeric values when the calculation truly belongs in JavaScript. An invalid declaration appears struck through in the Styles pane. - A later or more specific rule. A rule with higher specificity, or a later stylesheet, can redeclare the same property. In the Styles pane, look for a declaration that is listed above yours and is not struck through; that is the one winning the cascade.
Compare the theming approaches
The three approaches below propagate values differently, and the documentation cited above does not state the same things about each. The table reports only what the cited pages say.
Best Value
- 【INTEGRATED SPEAKERS】Whether you're at work or in the midst of an intense gaming session, our built-in speakers provide rich and seamless audio, all while keeping your desk clutter-free.
- 【EASY ON THE EYES】 Protect your eyes and enhance your comfort with Blue-Light Shift technology. This feature reduces harmful blue light emissions from your screen, helping to alleviate eye strain during long hours of use and promoting healthier viewing habits.
- 【WIDEN YOUR PERSPECTIVE】Our sleek minimal bezel design ensures undivided attention. The nearly bezel-free display seamlessly connects in a dual monitor arrangement, delivering an unobstructed view that lets you focus on more at once, completely distraction-free.
| Approach | How the value reaches the component | Shadow DOM | React Server Components |
|---|---|---|---|
Inherited CSS custom properties declared on :root or :host |
CSS inheritance from an ancestor | Salesforce states that inherited properties can cross the shadow boundary (LWC styling hooks guide) | styled-components recommends CSS custom properties for React Server Components (Theming docs) |
Framework provider, such as styled-components ThemeProvider |
React context passed to descendants | Not stated in the cited styled-components documentation | Described as having no effect, because React context is unavailable there (Theming docs) |
| Documented styling hooks, such as Salesforce LWC custom properties set by consumers | Custom properties set above the component by its consumer | Designed for shadow boundaries: consumers set the properties above the component | Not stated in the cited Salesforce documentation |
Override the public interface, not the internals
The Raspberry Pi Foundation Design System’s theming documentation makes a point that applies to every approach above:
“Override the properties rather than the component’s styles directly, and your customisations keep working across releases: the property names are a stable contract, the selectors and declarations behind them are not.”
This is the reason to prefer documented custom properties over overriding selectors. A theme that targets internal selectors will break when the component’s styles change, and it will look as though the theme stopped working when the real cause is a changed implementation detail.
What these checks can and cannot establish
The documentation above describes how these libraries are meant to behave. It cannot tell you which component, browser version, stylesheet order, or build output is involved in your case, so none of these checks proves a specific cause on its own. The sequence is designed to eliminate causes one at a time.
To make the diagnosis reliable, capture a minimal reproduction: one component, one property, one override, and one render mode. Record the framework and its version, the browser, the computed value of the property on the rendered element, and the rule that declares it. If the computed value still does not match the theme after the earlier checks pass, the problem is in the component or the build, and the minimal reproduction is the artifact to compare against the documentation for your framework.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
