Theme and dark mode

Use semantic colors

Blocks use names such as background, foreground, primary, muted, border, and destructive. Set those values once in your global stylesheet instead of recoloring each block.

:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --primary: 252 54% 52%;
  --primary-foreground: 0 0% 100%;
}

.dark {
  --background: 222 47% 7%;
  --foreground: 210 40% 98%;
  --primary: 252 72% 68%;
  --primary-foreground: 222 47% 11%;
}

Keep the full token set created by shadcn. The short example only shows the pattern.

Add dark mode

CoBlick blocks follow the dark class on a parent element. Use the theme switcher already used by your app, or add one at the application shell.

• Define every semantic color in both the default and .dark scopes.
• Apply the class before the first paint to avoid a theme flash.
• Test charts, images, overlays, and disabled controls in both themes.

Set typography

Set the app font on the application root and let blocks inherit it. Change type size or weight through your shared Tailwind theme when the whole app needs the change.

Avoid editing every heading class inside a block. That creates small differences between screens and makes later updates harder to review.

Right-to-left layouts

Set dir="rtl" on the application root or the part of the app using a right-to-left language. Use logical spacing and alignment so the layout can change direction without a second stylesheet.

• Reading order, labels, inputs, and menus follow the selected language.
• Directional arrows and progress indicators point the right way.
• Numbers, codes, email addresses, and mixed-language text remain readable.

Check your theme

• Text and icons remain readable on every background.
• Focus rings remain visible in light and dark mode.
• Error, warning, success, and disabled states do not rely on color alone.
• Long labels still fit at mobile width and 200% zoom.