# Theme and Style Customization

# Theme and Style Customization

Customize the look and feel of your Curiosity Workspace to align with your organization's brand identity.

# Building Custom Themes

You can define custom themes by overriding default CSS variables:

• Primary Colors: Change the main brand color used for buttons, links, and highlights.
• Backgrounds: Customize background colors for light and dark modes.
• Typography: Set custom fonts and text sizes.

# Managing Light and Dark Modes

Curiosity Workspace supports both light and dark modes out-of-the-box. When customizing styles:

• Use CSS variables that automatically adapt to the user's selected mode.
• Test your custom components in both modes to ensure readability and contrast.

# Overriding Component Styles

For more granular control, you can override the styles of specific Tesserae components using custom CSS:

• Target component classes (e.g., myapp-button, myapp-card).
• Use your organization's style guide to ensure a cohesive user experience.

# Implementation Steps

1. Create a CSS File: Define your theme variables and overrides in a new .css file.
2. Register the Stylesheet: Add the CSS file to your workspace configuration under Custom Styling.
3. Validate: Open the Workspace UI and verify that the styles are applied correctly across different pages and components.

# Next Steps

• Learn more about Custom Styling
• Explore the Tesserae Component Library