Styling the switcher

The shipped language switcher comes with a small default stylesheet — a bordered dropdown, not bare unstyled markup — so it looks reasonable the moment you add it, without forcing you to write CSS just to get something usable.

How it's loaded

The partial links to its own stylesheet directly:

<link rel="stylesheet" href="/css/weglot-language-switcher.css" />

This is a real static file shipped inside the package (not inlined <style> markup), specifically so you have two independent ways to change it.

Option 1 — turn it off

Set ViewData["WeglotExcludeDefaultStyles"] = true before rendering the partial (see Set up your front end) to skip the <link> tag entirely, then style the markup however you like from your own site's CSS.

Option 2 — override the CSS file itself

Static assets follow the same override-by-path rule as views: if your own site project has a file at the same served path as one from a referenced package, yours wins. Create wwwroot/css/weglot-language-switcher.css in your own site project, and it replaces the package's version outright — the <link> tag in the partial keeps pointing at the same URL, it just now resolves to your file.

Option 3 — override just a few values

The default stylesheet exposes its colors as CSS custom properties on .weglot-language-switcher, so you can restyle the important bits with a handful of rules instead of replacing the whole file:

.weglot-language-switcher {
  --weglot-switcher-border: #cccccc;
  --weglot-switcher-bg: #1a1a1a;
  --weglot-switcher-text: #ffffff;
  --weglot-switcher-hover-bg: #2a2a2a;
}

Add this after the default stylesheet loads (later in the cascade, or with higher specificity) and the switcher picks up your colors without you touching its markup or structure at all.

The class names

Every rule in the default stylesheet is scoped under .weglot-language-switcher, using BEM-style names, and never targets a bare tag selector (nav, ul, li, a) — so it can't leak onto unrelated navigation or list markup elsewhere on your site, and overriding one part is a single targeted rule rather than a specificity fight.

Class	Element	Purpose
.weglot-language-switcher	<nav>	The outer wrapper. Also carries --invert as a modifier (see below).
.weglot-language-switcher__toggle	<details>	The open/close container.
.weglot-language-switcher__current	<summary>	The always-visible current-language button.
.weglot-language-switcher__list	<ul>	The dropdown list, shown when <details> is open.
.weglot-language-switcher__item	<li>	One row in the list.
.weglot-language-switcher__link	<a>	The link inside a row.
.weglot-language-switcher--invert	<nav> (modifier)	Applied automatically when ViewData["WeglotOpenUpwards"] is true — flips the dropdown to open upward.

RTL

The stylesheet includes a rule for html[dir="rtl"] that right-aligns the switcher — if your site sets dir="rtl" on <html> for right-to-left languages, this applies automatically with no extra configuration.