Theme Reference

The depositOS widget uses CSS custom properties internally for all visual styling. These variables are set automatically when you provide a depositOSTheme configuration object, but they can also be overridden directly in CSS for advanced use cases.

CSS Variables

Core Variables

| CSS Variable | Theme Property | Default (Dark) | |---|---|---| | --depositos-bg | colors.background | #0B0B0F | | --depositos-bg-secondary | colors.backgroundSecondary | #111116 | | --depositos-text-primary | colors.textPrimary | #FFFFFF | | --depositos-text-secondary | colors.textSecondary | rgba(255,255,255,0.5) | | --depositos-border | colors.border | rgba(255,255,255,0.06) | | --depositos-accent | colors.accent | #3B82F6 | | --depositos-accent-text | colors.accentText | #FFFFFF | | --depositos-card | colors.card | #0F0F14 | | --depositos-surface | colors.surface | rgba(255,255,255,0.05) | | --depositos-backdrop | colors.backdrop | rgba(0,0,0,0.6) |

Alert & Status Variables

| CSS Variable | Theme Property | Default (Dark) | |---|---|---| | --depositos-alert-bg | colors.alertBackground | rgba(59,130,246,0.1) | | --depositos-alert-accent | colors.alertAccent | #3B82F6 | | --depositos-warning-bg | colors.warningBackground | rgba(234,179,8,0.1) | | --depositos-warning-accent | colors.warningAccent | #EAB308 | | --depositos-error-bg | colors.errorBackground | rgba(239,68,68,0.1) | | --depositos-error-accent | colors.errorAccent | #EF4444 | | --depositos-success-bg | colors.successBackground | rgba(34,197,94,0.1) | | --depositos-success-accent | colors.successAccent | #22C55E |

Layout Variables

| CSS Variable | Theme Property | Default | |---|---|---| | --depositos-font-family | fontFamily | system-ui, sans-serif | | --depositos-radius | borderRadius | 1.25rem | | --depositos-border-width | borderWidth | 1px | | --depositos-logo-height | logoHeight | 2rem |

Button Variables

Primary button styles:

| CSS Variable | Theme Property | Default (Dark) | |---|---|---| | --depositos-btn-primary-bg | primaryButton.background | #3B82F6 | | --depositos-btn-primary-text | primaryButton.textColor | #FFFFFF | | --depositos-btn-primary-border | primaryButton.borderColor | transparent | | --depositos-btn-primary-radius | primaryButton.borderRadius | 0.75rem | | --depositos-btn-primary-padding | primaryButton.padding | 0.75rem 1.5rem |

Secondary button styles:

| CSS Variable | Theme Property | Default (Dark) | |---|---|---| | --depositos-btn-secondary-bg | secondaryButton.background | rgba(255,255,255,0.05) | | --depositos-btn-secondary-text | secondaryButton.textColor | #FFFFFF | | --depositos-btn-secondary-border | secondaryButton.borderColor | rgba(255,255,255,0.1) | | --depositos-btn-secondary-radius | secondaryButton.borderRadius | 0.75rem | | --depositos-btn-secondary-padding | secondaryButton.padding | 0.75rem 1.5rem |

Overriding via CSS

While the recommended approach is to use the depositOSTheme config object, you can also override variables directly in CSS. This is useful for quick tweaks or when integrating with an existing CSS framework:

.depositos-widget {
  --depositos-bg: #1a1a2e;
  --depositos-accent: #e94560;
  --depositos-radius: 0.5rem;
  --depositos-font-family: "JetBrains Mono", monospace;
}

CSS overrides take effect after the theme object has been applied, so they will win over depositOSTheme values for the same property.

Light Mode Defaults

When mode is set to "light", the default values change:

| CSS Variable | Default (Light) | |---|---| | --depositos-bg | #FFFFFF | | --depositos-bg-secondary | #F8F9FA | | --depositos-text-primary | #111827 | | --depositos-text-secondary | rgba(17,24,39,0.5) | | --depositos-border | rgba(0,0,0,0.08) | | --depositos-accent | #2563EB | | --depositos-accent-text | #FFFFFF | | --depositos-card | #FFFFFF | | --depositos-surface | rgba(0,0,0,0.03) | | --depositos-backdrop | rgba(0,0,0,0.4) |

All alert, warning, error, and success variables adjust their opacity for better contrast on light backgrounds.

Relationship to Config Properties

The theme system has three levels of specificity, from lowest to highest:

  1. theme ("light" or "dark") — Sets the base palette with default colors.
  2. depositOSTheme — Overrides individual properties from the base palette.
  3. CSS custom properties — Overrides the computed values after both config layers have been applied.

For most integrations, the depositOSTheme config object provides sufficient control. Use CSS overrides only when you need to integrate with dynamic CSS systems or apply styles that depend on external state.

Previous← ThemingNextCustom Labels →