Doodle Press

# UI Theming

Theming defines the visual identity of your application. A consistent theme ensures brand alignment, accessibility, and a professional look across the product.

# General Principles

  • Define design tokens (colors, typography, spacing, shadows) in a central place.
  • Support light and dark modes via CSS variables.
  • Use semantic naming for tokens (--color-primary, --color-success) instead of raw color names.
  • Keep themes scalable so new brand guidelines can be applied easily.

# Folder Structure

src/
  styles/
    tokens.scss      # design tokens
    theme-light.scss # light mode
    theme-dark.scss  # dark mode
1
2
3
4
5

Design Tokens

:root {
  --color-primary: #042b6c;
  --color-secondary: #ff9800;
  --color-success: #4caf50;
  --font-family-base: 'Inter', sans-serif;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}
1
2
3
4
5
6
7
8
9

Light/Dark Mode Support

:root.theme-light {
  --color-bg: #ffffff;
  --color-text: #000000;
}

:root.theme-dark {
  --color-bg: #121212;
  --color-text: #ffffff;
}
1
2
3
4
5
6
7
8
9

Component-Level Theming

<template>
  <button class="btn">{{ label }}</button>
</template>

<style scoped>
.btn {
  background-color: var(--color-primary);
  color: var(--color-text);
  padding: var(--spacing-md);
}
</style>
1
2
3
4
5
6
7
8
9
10
11

← Final Checklist →