Theme Playground
Customise the design tokens to create your own theme. Changes persist across all pages.
Generated CSS
:root {
--mdst-color-fg: #000000;
--mdst-color-bg: #ffffff;
--mdst-color-border: #000000;
--mdst-color-muted: #666666;
--mdst-color-subtle: #f5f5f5;
--mdst-color-focus: #000000;
--mdst-color-error: #dc2626;
--mdst-color-success: #16a34a;
--mdst-button-hover-bg: #000000;
--mdst-button-hover-color: #ffffff;
--mdst-button-hover-border: #000000;
--mdst-radius: 0;
--mdst-border-width: 1;
}
Presets
Colors
Border
0px
1px
Preview
Components
Details element
This is the expandable content inside the details element.
Default
Solid
Subtle
Active
Outage
Meta
Dismiss
Card Title
Body content with header and footer.
Interactive card — hover to preview.
Status
All systems operational