w Docs

Matching the switcher to your theme with CSS

1 min readUpdated November 9, 2026

The settings write CSS variables on :root. You can override them in your theme’s CSS or in Appearance โ†’ Customize โ†’ Additional CSS (or the Site Editor’s Styles โ†’ Additional CSS):

/* On body, so it wins over the plugin's own :root values whatever the load order. */
body {
    --cls-accent: #0f766e;        /* Main color */
    --cls-active-bg: #f0fdfa;     /* Current language background */
    --cls-active-border: #0f766e; /* Current language border */
    --cls-flag-size: 28px;        /* Flag size in the window and grid */
    --cls-nav-flag: 22px;         /* Flag size in the button */
}

Useful class names:

Class Element
.cls-trigger Every switcher button. Plus .cls-trigger--pill, --minimal, --classic, --card or --icon_only
.cls-nav-item The menu item that holds the button
.cls-modal, .cls-modal__panel The language window and its box
.cls-item, .cls-item--active A language card, and the current language’s card
.cls-grid The Language Grid
.cls-dropdown, .cls-dropdown__item The dropdown and its items
#cls-geo-banner The suggestion banner
/* Example: a square, borderless Minimal button in a dark header */
.site-header .cls-trigger--minimal {
    border: 0;
    border-radius: 0;
    color: #fff;
}