Repository navigation
feat(grids): add theming article in xplat - #929
Merged
Merged
Conversation
This was referenced Oct 9, 2026
…e playground sample
simeonoff
reviewed
Oct 22, 2026
Member
There was a problem hiding this comment.
@adrianptrv The content is accurate, but the page leads with what doesn't work ("Explicitly set properties"). Until derived tokens ship by default, I'd like the topic to steer people toward generating themes. Suggestions:
Structure
- Intro → example → Create a theme → Apply it → Primary tokens → How derivation works → Going deeper → Structure → Fine-tune individual properties → Try it.
- Intro: promise the 3-color theme with its condition stated, e.g. "Build a theme from a background, foreground and accent color and every other color is derived from them. You don't write the derived colors yourself; generate them with
grid-theme(), the Theming MCP or the playground."
Create a theme (new section, replaces the Sass section and the "snapshot" warning)
- Sass:
grid-theme(). Add thenpm i igniteui-themingstep, which is currently missing. - Theming MCP: link
ai/theming-mcp.mdxwith a sample prompt (CSS output, no Sass toolchain). This should be the recommended route for Blazor. - Playground: link to the one at the bottom.
- State "regenerate when you upgrade" as a normal workflow step rather than a warning.
Fine-tune individual properties (move "Explicitly set properties" here and reframe it)
- Present independent properties as a feature: a single override changes only that part.
- Then say that
--ig-grid-background/--ig-grid-accent-coloralone won't carry into the rest of the grid, and link back to Create a theme.
Other
- Don't say "three tokens restyle the whole grid" without the "in a generated theme" condition.
grids/grid/theming-grid.mdx(old, unprefixed vars) is still linked from about 10 shared topics. Redirect it to this page or retire it.- Frontmatter lacks the
mentionedTypesandnamespacefields that sibling shared topics have. The JP toc isn't updated.
… old topic - State that igniteui-theming must be upgraded on its own - Scope the gray-100 header fallback example to the Material theme - Restore the grid-theme() API link for Web Components and React - Remove the EN theming-grid topic and redirect it to the new theming topic (JP keeps its page until the new topic is translated)
simeonoff
approved these changes
Oct 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #897
The article is available in React, Web Components, and Blazor.
Should be merged together with the following samples:
IgniteUI/igniteui-wc-examples#1298
IgniteUI/igniteui-react-examples#1121
IgniteUI/igniteui-blazor-examples#1326