1.3 KiB
Design
Overview
Theme accessories are implemented as generated SVG data URLs stored in palette variables. Shared CSS primitives consume the variables so cards, panels, tables, drawers, dialogs, plugin groups, operation history, and active sidebar entries gain theme-specific corner ornaments without page-level decoration.
Theme Assets
The new variables are:
--frame-accessory-top--frame-accessory-bottom--frame-accessory-opacity--frame-accessory-size
mecha-black uses compact SVG motifs for spacecraft, robot/vehicle silhouettes, radar rings, and planet-like targeting circles.
magical-girl uses compact SVG motifs for winged hearts, stars, wands, ribbons, and magic-circle rings.
CSS Application
Shared ::after layers compose:
- Top accessory.
- Bottom accessory.
- Existing shine/jelly material.
Table wrappers, plugin groups, and operation items get matching ::after layers so dense operational surfaces still inherit the theme identity. The layers remain pointer-events disabled and non-interactive.
Constraints
- Keep all ornaments in shared theme CSS/tokens.
- Preserve 8px-or-less frame radii for repeated surfaces.
- Avoid external iconfont dependency unless generated assets become insufficient.
- Keep operational text readable by using transparent SVG backgrounds and controlled opacity.