Theme Customization

Introduction

Theme CSS variables are a powerful tool that significantly improves the developer experience related to theming and customization. They allow a value to be set in one place and then used in multiple places, making it possible to change CSS dynamically at runtime.

With CSS variables, you can inject your own theme and easily control the look of the application. Whether it's small tweaks to make it more consistent with your page styles or completely new themes.

Understanding the Color System

The Mimeeq color system is built around a consistent approach to color generation that enables powerful customization while maintaining visual harmony.

Color Structure

Each color in our system follows a consistent pattern:

Main Colors: Each color palette has a main color (usually at the 1000 position) that serves as the anchor for the entire palette.
Color Ranges: From each main color, a range of shades (50-1000) is automatically generated, where:
- 50 is the lightest shade
- 1000 is the darkest/main color
Legacy Keys: For backward compatibility, each color also has light and dark variants:
- light typically maps to shade 50
- dark is a darker variation of the main color

Color Generation

When you customize a main color like --mmq-accent-main, all related shades are automatically generated using color manipulation algorithms that:

Create lighter shades (50-900) by incrementally lightening the main color
Set specific variants like light and dark based on mathematical relationships to the main color
Generate appropriate contrast text colors based on accessibility standards

/* Example: Customizing accent color and seeing generated variations */
:root {
  --mmq-accent-main: #0056b3;
  
  /* These values are automatically generated: */
  /* --mmq-accent-50: rgb(229, 239, 247); */
  /* --mmq-accent-100: rgb(217, 232, 244); */
  /* --mmq-accent-light: rgb(229, 239, 247); */
  /* --mmq-accent-dark: rgb(0, 59, 120); */
  /* etc. */
}

Special Accent Color

The accent color is particularly important in the Mimeeq system:

It represents your brand identity throughout the application
It's used for interactive elements, highlights, and key UI components
It's the color most commonly customized by users

The accent color can be customized in several ways:

Customer Account: Set in the customer portal for all embeds
Embed Template: Specified in embed template settings
Inline: Set directly on specific mmq-embed elements (use sparingly)

When you customize the accent color, all related shades (50-1000, light, dark) are automatically generated to maintain a consistent color scheme.

Practical Example: Brand Customization

Here's how you might customize the accent color to match a brand's identity:

/* Apply brand colors to Mimeeq embed */
:root {
  /* Main brand color */
  --mmq-accent-main: #ff5722;
  
  /* Optional: Override text color on accent backgrounds */
  --mmq-accent-contrast-text: #ffffff;
  
  /* Optional: Adjust background to complement the brand */
  --mmq-background-primary: #fafafa;
  
  /* Optional: Customize hotspot colors */
  --mmq-hot-spots-color: rgba(255, 87, 34, 0.2);
  --mmq-hot-spots-border-color: rgba(255, 87, 34, 0.7);
}

Customizable Theme Elements

Mimeeq allows for theme customization at different levels. The following elements can be customized either through customer account settings or embed templates:

Primary Customization Options

Setting	Description	CSS Variable	Default Value
`accentColor`	The primary brand color	`--mmq-accent-main`	`#ac1015`
`accentTextColor`	Text color on accent backgrounds	`--mmq-accent-contrast-text`	`#fff` or `#000` based on contrast
`backgroundColor`	Main background color	`--mmq-background-primary`	`#fff`
`hotSpots.color`	Color of hotspots	`--mmq-hot-spots-color`	20% opacity of accent color
`hotSpots.borderColor`	Border color of hotspots	`--mmq-hot-spots-border-color`	70% opacity of accent color
`group.activeColor`	Background color for active groups	`--mmq-group-active-color`	`rgb(86, 85, 83)`
`group.hoverColor`	Background color for hovered groups	`--mmq-group-hover-color`	`rgb(86, 85, 83)`
`group.openedGroupTextColor`	Text color for opened groups	`--mmq-group-opened-group-text-color`	`BLACK`
`group.hoverGroupTextColor`	Text color for hovered groups	`--mmq-group-hover-group-text-color`	`BLACK`
`mesh.overlay`	Overlay color for mesh	Internal	Varies

Advanced Theme Customization

For more extensive customization, you can override any of the global CSS variables defined below. This can be useful when you need to:

Create a fully branded experience that matches your website
Implement a dark mode by overriding background and text colors
Improve accessibility by adjusting contrast ratios and focus states

/* Example of more advanced customization */
:root {
  /* Brand colors */
  --mmq-accent-main: #8e44ad;
  --mmq-accent-contrast-text: #ffffff;
  
  /* Dark mode */
  --mmq-background-primary: #121212;
  --mmq-background-white: #1e1e1e;
  --mmq-typography-primary: #e0e0e0;
  --mmq-typography-secondary: #bbbbbb;
  
  /* Borders and shadows */
  --mmq-border-light: rgba(255, 255, 255, 0.1);
  --mmq-box-shadow-primary: rgba(0, 0, 0, 0.3);
  
  /* Adjust scrollbars for dark theme */
  --mmq-scrollbar-primary: rgba(255, 255, 255, 0.2);
  --mmq-scrollbar-secondary: rgba(255, 255, 255, 0.05);
}

Global CSS Variables

Mimeeq Embed is built with CSS variables for easy customization of the application. Below is a comprehensive list of all available global variables organized by category.

Theme Colors

Accent Colors

These colors represent the primary branding color. The --mmq-accent-main is the most important variable as other shades are generated from it.

Variable	Description	Default Value
`--mmq-accent-main`	Main accent color	`#ac1015` (customizable)
`--mmq-accent-contrast-text`	Text on accent color	`#fff`
`--mmq-accent-light`	Light accent color	`rgb(246, 231, 231)`
`--mmq-accent-dark`	Dark accent color	`rgb(94, 8, 11)`
`--mmq-accent-50`	Lightest accent shade	`rgb(246, 231, 231)`
`--mmq-accent-100`	Accent shade 100	`rgb(242, 219, 220)`
`--mmq-accent-200`	Accent shade 200	`rgb(234, 197, 198)`
`--mmq-accent-300`	Accent shade 300	`rgb(227, 174, 176)`
`--mmq-accent-400`	Accent shade 400	`rgb(219, 151, 154)`
`--mmq-accent-500`	Accent shade 500	`rgb(211, 129, 131)`
`--mmq-accent-600`	Accent shade 600	`rgb(203, 106, 109)`
`--mmq-accent-700`	Accent shade 700	`rgb(195, 83, 87)`
`--mmq-accent-800`	Accent shade 800	`rgb(187, 61, 65)`
`--mmq-accent-900`	Accent shade 900	`rgb(179, 38, 43)`
`--mmq-accent-1000`	Darkest accent shade	`#ac1015`

Primary Colors

These colors define the UI foundation and are generally not meant to be customized.

Variable	Description	Default Value
`--mmq-primary-main`	Main primary color	`#2e3341`
`--mmq-primary-contrast-text`	Text on primary color	`#fff`
`--mmq-primary-light`	Light primary color	`rgb(234, 234, 236)`
`--mmq-primary-dark`	Dark primary color	`rgb(25, 28, 35)`
`--mmq-primary-50`	Lightest primary shade	`rgb(234, 234, 236)`
`--mmq-primary-100`	Primary shade 100	`rgb(224, 224, 227)`
`--mmq-primary-200`	Primary shade 200	`rgb(204, 205, 209)`
`--mmq-primary-300`	Primary shade 300	`rgb(184, 186, 191)`
`--mmq-primary-400`	Primary shade 400	`rgb(164, 166, 173)`
`--mmq-primary-500`	Primary shade 500	`rgb(145, 147, 155)`
`--mmq-primary-600`	Primary shade 600	`rgb(125, 128, 137)`
`--mmq-primary-700`	Primary shade 700	`rgb(105, 108, 119)`
`--mmq-primary-800`	Primary shade 800	`rgb(85, 89, 101)`
`--mmq-primary-900`	Primary shade 900	`rgb(65, 70, 83)`
`--mmq-primary-1000`	Darkest primary shade	`#2e3341`

Status Colors

Colors used for notifications, alerts, and status indicators.

Variable	Description	Default Value
`--mmq-success-main`	Main success color	`#49bf5a`
`--mmq-success-contrast-text`	Text on success color	`#fff`
`--mmq-success-light`	Light success color	`#ecf8ee`
`--mmq-success-dark`	Dark success color	`#22805f`
`--mmq-success-50` to `--mmq-success-1000`	Full success shade range	Various values
`--mmq-error-main`	Main error color	`#e74c3c`
`--mmq-error-contrast-text`	Text on error color	`#fff`
`--mmq-error-light`	Light error color	`rgba(231, 76, 60, 0.2)`
`--mmq-error-dark`	Dark error color	`#cc292e`
`--mmq-error-50` to `--mmq-error-1000`	Full error shade range	Various values
`--mmq-warning`	Warning color	`#faac25`
`--mmq-color-blue`	Blue accent color	`#1762d4`
`--mmq-status-active`	Status active indicator	`#22805f`
`--mmq-status-inactive`	Status inactive indicator	`#e74c3c`
`--mmq-status-open`	Status open indicator	`#82858d`

Common Colors

Variable	Description	Default Value
`--mmq-common-white`	White color	`#fff`
`--mmq-common-black`	Black color	`#000`
`--mmq-type`	Theme type (light/dark)	`light`
`--mmq-hot-spots-color`	Color for hotspots	`#ac101533`
`--mmq-hot-spots-border-color`	Border color for hotspots	`#ac1015B3`

Grayscale

The grayscale palette provides consistent neutral colors throughout the interface.

Variable	Description	Default Value
`--mmq-grey-50`	Lightest gray	`#f4f4f4`
`--mmq-grey-100`	Gray 100	`#ebebec`
`--mmq-grey-200`	Gray 200	`#d5d6d9`
`--mmq-grey-300`	Gray 300	`#c1c2c6`
`--mmq-grey-400`	Gray 400	`#abadb3`
`--mmq-grey-500`	Gray 500	`#96989f`
`--mmq-grey-600`	Gray 600	`#82858d`
`--mmq-grey-700`	Gray 700	`#6d717a`
`--mmq-grey-800`	Gray 800	`#585c67`
`--mmq-grey-900`	Gray 900	`#434854`
`--mmq-grey-1000`	Darkest gray	`#2e3341`

Typography Colors

These variables control text colors throughout the application.

Variable	Description	Default Value
`--mmq-typography-primary`	Main text color	`#2e3341`
`--mmq-typography-secondary`	Secondary text color	`#434854`
`--mmq-typography-tertiary`	Tertiary text color	`#6d717a`
`--mmq-typography-header`	Header text color	`#001136`
`--mmq-typography-table`	Table text color	`rgba(46, 51, 65, 0.8)`
`--mmq-typography-icon`	Icon color	`rgba(46, 51, 65, 0.6)`
`--mmq-typography-hint`	Hint text color	`rgba(46, 51, 65, 0.5)`
`--mmq-typography-dark`	Dark text color	`#96989f`
`--mmq-typography-grey`	Grey text color	`#8f9198`

Backgrounds

These variables control background colors for different UI elements.

Variable	Description	Default Value
`--mmq-background-primary`	Primary background	`#f4f4f4`
`--mmq-background-white`	White background	`#fff`
`--mmq-background-overlay`	Overlay backdrop	`rgba(46, 51, 65, 0.6)`
`--mmq-background-foreground`	Modal backdrop	`rgba(46, 51, 65, 0.3)`
`--mmq-background-light`	Light background	`#f2f2f7`
`--mmq-background-grey`	Grey background	`#f6f6f6`
`--mmq-background-dark`	Dark background	`#96989f`
`--mmq-background-tooltip`	Tooltip background	`#f9f9f9`
`--mmq-background-danger`	Danger alert background	`#fef6f5`

These variables control the application header appearance.

Variable	Description	Default Value
`--mmq-header-background`	Header background color	`#202532`
`--mmq-header-color`	Header text color	`#c1c2c6`
`--mmq-header-border`	Header border color	`#373b47`
`--mmq-header-focus`	Header focus state color	`#535764`

Interface Elements

These variables control common UI elements like scrollbars, shadows, and borders.

Variable	Description	Default Value
`--mmq-scrollbar-primary`	Scrollbar thumb	`rgba(46, 51, 65, 0.2)`
`--mmq-scrollbar-secondary`	Scrollbar track	`rgba(46, 51, 65, 0.1)`
`--mmq-scrollbar-shadow`	Scrollbar shadow	`rgba(0, 0, 0, 0.3)`
`--mmq-box-shadow-primary`	Primary shadow	`rgba(46, 51, 65, 0.08)`
`--mmq-box-shadow-secondary`	Secondary shadow	`rgba(46, 51, 65, 0.16)`
`--mmq-border-lighter`	Lightest border	`rgba(46, 51, 65, 0.04)`
`--mmq-border-light`	Light border	`#2e33411a`
`--mmq-border-medium`	Medium border	`rgba(46, 51, 65, 0.2)`
`--mmq-border-dark`	Dark border	`#ededee`
`--mmq-border-focus`	Focus border	`rgba(46, 51, 65)`
`--mmq-border-table`	Table border	`rgba(199, 199, 209, 0.2)`
`--mmq-group-active-color`	Active group background	`rgb(86, 85, 83)`
`--mmq-group-hover-color`	Hover group background	`rgb(86, 85, 83)`
`--mmq-group-opened-group-text-color`	Text color for opened group	`BLACK`
`--mmq-group-hover-group-text-color`	Text color for hovered group	`BLACK`

Typography Weights and Sizes

These variables define consistent font sizes and weights throughout the application.

Variable	Description	Default Value
`--mmq-font-weight-light`	Light font weight	`300`
`--mmq-font-weight-regular`	Regular font weight	`400`
`--mmq-font-weight-medium`	Medium font weight	`500`
`--mmq-font-weight-bold`	Bold font weight	`700`
`--mmq-font-size-base`	Base font size	`16px`
`--mmq-font-size-regular`	Regular font size	`14px`
`--mmq-font-size-small`	Small font size	`12px`
`--mmq-font-size-header`	Header font size	`10px`

Working with CSS Variables

Setting Variables

There are several ways to set CSS variables depending on your needs:

Global Setting

To apply changes across the entire application, set variables on the :root selector:

:root {
  --mmq-accent-main: #2196f3;
  --mmq-background-primary: #fafafa;
}

Component-Specific Setting

To customize a specific component without affecting others:

.mmq-button {
  --mmq-button-border-radius: 8px;
  --mmq-button-padding: 12px 24px;
}

.mmq-dialog {
  --mmq-dialog-max-width: 800px;
}

Media Query Adaptation

Adjust variables based on screen size:

/* Default mobile-first values */
:root {
  --mmq-sidepanel-width: 100%;
  --mmq-font-size-regular: 16px;
}

/* Adjust for larger screens */
@media (min-width: 840px) {
  :root {
    --mmq-sidepanel-width: 320px;
    --mmq-font-size-regular: 14px;
  }
}

@media (min-width: 1200px) {
  :root {
    --mmq-sidepanel-width: 379px;
  }
}

Dynamic Setting with JavaScript

For runtime customization:

// Access an element
const configurator = document.querySelector('mmq-variant-ui');

// Change its accent color dynamically
configurator.style.setProperty('--mmq-accent-main', userSelectedColor);

// Reset to default for all elements
document.documentElement.style.setProperty('--mmq-accent-main', '#ac1015');

Reading Variables

In CSS

Use the var() function to reference variables:

.custom-element {
  background-color: var(--mmq-accent-main);
  color: var(--mmq-typography-primary);
  border: 1px solid var(--mmq-border-light);
  box-shadow: 0 2px 8px var(--mmq-box-shadow-primary);
}

You can also provide fallback values:

.custom-element {
  background-color: var(--mmq-custom-color, var(--mmq-accent-main, #ac1015));
}

In JavaScript

Read variable values for dynamic operations:

// Get the current accent color
const accentColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--mmq-accent-main')
  .trim();

// Use it for calculations or dynamic changes
console.log(`Current accent color: ${accentColor}`);

// Check if we're using a dark background
const bgColor = getComputedStyle(document.querySelector('mmq-variant-ui'))
  .getPropertyValue('--mmq-background-primary')
  .trim();
const isDarkBg = getLuminance(bgColor) < 0.5;

Common Customization Examples

Basic Brand Customization

The most common customization is changing the accent color to match a brand:

:root {
  --mmq-accent-main: #e91e63; /* Brand primary color */
  --mmq-accent-contrast-text: #ffffff; /* Text color on brand color */
}

Dark Mode

Create a dark theme by adjusting background and text colors:

:root {
  /* Dark backgrounds */
  --mmq-background-primary: #121212;
  --mmq-background-white: #1e1e1e;
  --mmq-background-light: #2d2d2d;
  --mmq-background-grey: #2a2a2a;
  
  /* Light text */
  --mmq-typography-primary: #e0e0e0;
  --mmq-typography-secondary: #bbbbbb;
  --mmq-typography-tertiary: #999999;
  
  /* Adjusted borders and shadows */
  --mmq-border-light: rgba(255, 255, 255, 0.1);
  --mmq-box-shadow-primary: rgba(0, 0, 0, 0.5);
  
  /* Adjust scrollbars for dark theme */
  --mmq-scrollbar-primary: rgba(255, 255, 255, 0.2);
  --mmq-scrollbar-secondary: rgba(255, 255, 255, 0.05);
  
  /* Adjust common colors */
  --mmq-common-white: #1e1e1e; /* Override white for dark mode */
}

Custom Layout Dimensions

Adjust the layout dimensions for different device contexts:

:root {
  /* Configurator dimensions */
  --mmq-configurator-container-max-height: 800px;
  --mmq-configurator-container-min-height: 400px;
  --mmq-sidepanel-width: 350px;
  
  /* Mobile-specific adjustments */
  @media (max-width: 839px) {
    --mmq-canvas-height: 250px;
    --mmq-configurator-wrapper-mobile-vertical-padding: 0px;
    --mmq-mobile-tabs-min-height: 150px;
  }
}

Basket Customization

Customize the basket appearance and positioning:

:root {
  /* Basket button position */
  --mmq-basket-button-position-right: 20px;
  --mmq-basket-button-position-bottom: 20px;
  
  /* Basket styling */
  --mmq-basket-button-background: var(--mmq-accent-main);
  --mmq-basket-button-color: #ffffff;
  --mmq-basket-button-radius: 50%; /* Make it circular */
  
  /* Basket panel */
  --mmq-basket-panel-position-right: 0;
  --mmq-basket-header-content-flow: row-reverse;
}

Further Resources

Element Styling - Learn how to use CSS parts for component styling
Configurator Customization - See practical examples
MDN Web Docs: CSS Custom Properties - Learn more about CSS variables

Introduction​

Understanding the Color System​

Color Structure​

Color Generation​

Special Accent Color​

Practical Example: Brand Customization​

Customizable Theme Elements​

Primary Customization Options​

Advanced Theme Customization​

Global CSS Variables​

Theme Colors​

Accent Colors​

Primary Colors​

Status Colors​

Common Colors​

Grayscale​

Typography Colors​

Backgrounds​

Header​

Interface Elements​

Typography Weights and Sizes​

Working with CSS Variables​

Setting Variables​

Global Setting​

Component-Specific Setting​

Media Query Adaptation​

Dynamic Setting with JavaScript​

Reading Variables​

In CSS​

In JavaScript​

Common Customization Examples​

Basic Brand Customization​

Dark Mode​

Custom Layout Dimensions​

Basket Customization​

Further Resources​