9 articles tagged #theming on hackpile.dev.
- CSS Custom Properties
Master Svelte 5's --style-props for passing CSS variables to components — the cleanest way to build themeable, customizable UI without breaking encapsulation.
- class
Master Svelte 5's class attribute for dynamic CSS class management, from basic conditionals to advanced patterns with objects and arrays.
- Dynamic Theme Customization at Runtime
When JavaScript should set CSS custom properties at runtime: user color pickers, API-driven themes, computed palettes.
- Simple Theme Switching with the useTheme Hook Pattern
Build a lightweight, flicker-free theme system using module-level reactive state and a useTheme hook. The simplest approach to dark mode that works everywhere.
- Theme Systems with Context
Master theme management in Svelte 5 with light/dark modes, system detection, local overrides, SSR support, and CSS variables.
- How Scoped Styles Work
Understand how Svelte automatically scopes CSS to prevent style conflicts between components.
- Dynamic Classes
Apply CSS classes conditionally based on component state.
- Add Hover States
Create responsive, interactive hover effects that provide feedback and improve user experience.
- Global Styles
Set up app-wide typography, colors, and base styles that apply across all components.