Support Scoped Theme Activation via data-theme for Non-Root HTML Elements #3984
Description
Describe the feature in detail (code, mocks, or screenshots encouraged)
Currently, Skeleton documentation instructs users to activate a theme by adding data-theme to the root HTML tag:
<html data-theme="cerberus">...</html>In Skeleton v2, theme activation worked within any scope — for example, setting data-theme on a <div> correctly applied the theme inside that element’s subtree:
<div data-theme="cerberus">...</div>However, in Skeleton v4, this no longer works. It appears that the CSS selectors for theme variables are defined as:
[data-theme='catppuccin'] { ... }instead of being scoped to the root with:
:root [data-theme='catppuccin'] { ... }Because of that, many theme variables do not propagate to the root, and the default values are still used — making the theme ineffective in scoped or nested contexts.
This limitation prevents using Skeleton in environments without direct control of the root HTML (for example, when building Figma plugins with frameworks like Plugma). In such cases, developers must rely on scoped theming rather than modifying the <html> tag, which isn’t possible.
A change in how Skeleton applies its theme CSS would restore flexible theme scoping and expand usability for plugin and embedded app contexts.
Proposed change:
Enable scoped theme activation by restoring selector behavior similar to Skeleton v2 — allowing theme variables to apply within any container where data-theme is defined, without requiring access to the root HTML.
Example improvement:
:root [data-theme='catppuccin'],
[data-theme='catppuccin'] {
/* Theme variables */
}This approach would let both root and scoped theme usage coexist.
What type of pull request would this be?
Enhancement
Provide relevant links or additional information.
- Development context: building a Figma plugin with Plugma, where root HTML isn’t accessible
- Expected result: scoped
data-themecorrectly activates the theme local to that container