Tool - Theme Variables

Generate scoped --vs-* overrides for the base template’s design system.

The base template is built around a set of CSS custom properties (variables) prefixed with --vs-.
This tool generates a scoped block of overrides so you can theme the base template without rewriting a ton of selectors.

Where to find it

Open Tools (Ctrl/Cmd+K) → search Theme Variables.

Use it

Confirm the Scope selector (default matches the preview template root):
- .profile-page.profile-custom-css
(Optional) Set Wrapper if you want to prepend a parent selector before the scope.
- Example: wrapper .theme-dark + default scope generates selectors like:

.theme-dark .profile-page.profile-custom-css { /* vars */ }

Choose a Preset as your starting palette.
Adjust variables in the accordion groups.
Click Insert into Custom CSS (or Copy).

Marked snippet (update-in-place)

When inserting, the tool wraps output so reinserting updates the existing block:

/* oshilab:begin block=theme-vars v=1 */
...
/* oshilab:end block=theme-vars */

Buttons

Reset to preset — discard edits and restore the preset values.
Shuffle palette — generates a cohesive palette and applies it to your inputs (great for exploring looks fast).
Auto-derive — generates a cohesive set of related colors based on your current choices.
Load from Custom CSS — attempts to read existing --vs-* overrides from your Custom CSS so you can continue editing them.

Output behavior

By default, the tool outputs only changed variables vs the selected preset.
Enable Output all variables if you want a complete block (useful for sharing).

Tips

Prefer variable overrides over “deep selector” CSS whenever possible — it’s easier to maintain and less brittle against MyOshi markup changes.
If you’re doing dark mode, put dark variables under a wrapper class (e.g. .theme-dark) and toggle that class in your HTML.