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.

Global variables

Mimeeq Embed is built with CSS variables for easy customization of the application.

While most of our global theme is static, some, like accent colors, are generated based on customer theme settings. By default, it comes with a light theme.

You can see a list of default colors below.

caution

Global CSS variables are meant for adjusting the general theme of the application. For information on modifying the UI or layout of the embed, check the configurator customization page instead.

:root {
  --mmq-common-white: #fff;
  --mmq-common-black: #000;

  --mmq-primary-light: rgb(234, 234, 236);
  --mmq-primary-main: #2e3341;
  --mmq-primary-dark: rgb(25, 28, 35);
  --mmq-primary-contrast-text: #fff; // color of text on elements with main color as background

  // Accent color
  --mmq-accent-main: #1762d4;
  --mmq-accent-contrast-text: #fff; // color of text on elements with main color as background
  --mmq-accent-light: rgb(238, 238, 237);
  --mmq-accent-dark: rgb(47, 46, 45);

  // success colors
  --mmq-success-light: #ecf8ee;
  --mmq-success-main: #49bf5a;
  --mmq-success-dark: #22805f;
  --mmq-success-contrast-text: #fff;

  --mmq-warning: #faac25;
  --mmq-color-blue: #1762d4;

  // error colors
  --mmq-error-light: rgba(231, 76, 60, 0.2);
  --mmq-error-main: #e74c3c;
  --mmq-error-dark: #cc292e;
  --mmq-error-contrast-text: #fff;

  // greys
  --mmq-grey-50: #f4f4f4;
  --mmq-grey-100: #ebebec;
  --mmq-grey-200: #d5d6d9;
  --mmq-grey-300: #c1c2c6;
  --mmq-grey-400: #abadb3;
  --mmq-grey-500: #96989f;
  --mmq-grey-600: #82858d;
  --mmq-grey-700: #6d717a;
  --mmq-grey-800: #585c67;
  --mmq-grey-900: #434854;
  --mmq-grey-1000: #2e3341;

  // typography colors
  --mmq-typography-primary: #2e3341; // main text color
  --mmq-typography-secondary: rgba(46, 51, 65, 0.7);
  --mmq-typography-header: #001136;
  --mmq-typography-table: rgba(46, 51, 65, 0.8);
  --mmq-typography-icon: rgba(46, 51, 65, 0.6);
  --mmq-typography-hint: rgba(46, 51, 65, 0.5);
  --mmq-typography-dark: #96989f;
  --mmq-typography-grey: #8f9198;

  // Background colors used through app
  --mmq-background-primary: #ffffff; // background used primarily for main component/body
  --mmq-background-white: #fff; // most commonly used background color
  --mmq-background-overlay: rgba(
    46,
    51,
    65,
    0.6
  ); // backdrop color for some modals, toasts and overlays
  --mmq-background-foreground: rgba(46, 51, 65, 0.3); // backdrop color for most modals
  --mmq-background-light: #f2f2f7;
  --mmq-background-grey: #f6f6f6;
  --mmq-background-dark: #96989f;
  --mmq-background-tooltip: #f9f9f9; // light background for tooltips. Most tooltips are dark and use primary color

  // colors used by scrollbar
  --mmq-scrollbar-primary: rgba(46, 51, 65, 0.2); // scrollbar thumb color
  --mmq-scrollbar-secondary: rgba(46, 51, 65, 0.1); // scrollbar track color
  --mmq-scrollbar-shadow: rgba(0, 0, 0, 0.3);

  // default colors for box-shadow
  --mmq-box-shadow-primary: rgba(46, 51, 65, 0.08);
  --mmq-box-shadow-secondary: rgba(46, 51, 65, 0.16);

  // common border colors
  --mmq-border-lighter: rgba(46, 51, 65, 0.04);
  --mmq-border-light: rgba(46, 51, 65, 0.1); // This border color is being used by most elements
  --mmq-border-medium: rgba(46, 51, 65, 0.2);
  --mmq-border-dark: #ededee;
  --mmq-border-focus: rgba(46, 51, 65);
  --mmq-border-table: rgba(199, 199, 209, 0.2);
  --mmq-border-separator: rgba(255, 255, 255, 0.08);

  // option sets groups header hover and active background
  --mmq-group-active-color: rgb(86, 85, 83);
  --mmq-group-hover-color: rgb(86, 85, 83);

  // common font weights
  --mmq-font-weight-light: 300;
  --mmq-font-weight-regular: 400;
  --mmq-font-weight-medium: 500;
  --mmq-font-weight-bold: 700;

  // font sizes
  --mmq-font-size-base: 16px;
  --mmq-font-size-regular: 14px; // default font size for most elements
  --mmq-font-size-small: 12px;
  --mmq-font-size-header: 10px;
}

Setting Values

Setting values using CSS variables provides flexible control over the appearance of elements in your application. You can define CSS variables globally or locally to customize various aspects of your application's design, such as colors, fonts, and spacing.

Global variables

Global CSS variables are defined within the :root selector and apply to the entire document. They establish a centralized source of values that can be accessed and utilized across different components and stylesheets. Global variables are ideal for setting values that are consistent throughout your application.

// Define global variables for the entire application
:root {
  // Set the primary background color for the entire app
  --mmq-background-primary: #666;

  // Set the primary background color for the entire app
  --mmq-font-family: -apple-system, BlinkMacSystemFont, Inter;
}

// Adjust variables for specific viewport sizes
@media (max-width: 839px) {
  :root {
    // Increase the font size for mobile devices
    --mmq-font-size-regular: 16px;
  }
}

Component Variables

In addition to global variables, you can set CSS variables specific to individual components. By targeting the selector of a particular component, you can customize its appearance independently from other elements. This approach allows for fine-grained control over the styling of individual components within your application.

// Customize the background color for all tabs
.mmq-tabs {
  --mmq-background-white: #666;
}

// Modify the accent color for buttons using a custom accent color
.mmq-button {
  --mimeeq-accent-color: #e74c3c;
}

Setting variables in JavaScript

CSS variables can also be dynamically modified using JavaScript, providing further flexibility in adjusting styles based on user interactions or runtime conditions. The setProperty method allows you to programmatically update the value of a CSS variable associated with a specific element.

// Access a button element
const button = document.querySelector('.mmq-button');

// Set a new value for the accent color variable
button.style.setProperty('--mmq-accent-color', '#e74c3c');

Getting Values

Retrieving values from CSS variables enables dynamic manipulation of styles and facilitates interactions with user interface elements. CSS variables can be accessed both in CSS stylesheets and JavaScript code, offering versatility in implementing customized behavior based on defined variables.

Using in CSS

To utilize CSS variables in your stylesheets, you can employ the var CSS function, which retrieves the value of a specified CSS variable. This allows you to seamlessly integrate variables into your CSS declarations, enabling consistent theming and design across your application.

.custom-button {
  // Set the background color using the accent color variable
  background: var(--mmq-accent-main, #1762d4);
  // Define the text color using the common black color variable
  color: var(--mmq-common-black, #000);
}

Using in JavaScript

In JavaScript, you can access the value of CSS variables associated with DOM elements using the getPropertyValue method. This enables dynamic manipulation of styles and facilitates responsive behavior based on the values of CSS variables.

// Access a DOM element representing a custom button
const buttonElement = document.querySelector('.custom-button');

// Retrieve the value of the button's text color CSS variable
const textColor = window.getComputedStyle(buttonElement).getPropertyValue('--mmq-button-color');

By leveraging CSS variables, you can enhance the flexibility and maintainability of your codebase, enabling seamless customization and responsive design in your web applications.

You can learn more about CSS variables here.