Customize styles for a locale

You can apply styles to a specific locale by using a :root selector in the @themes/styles.css file. This can be useful if you want to customize how certain UI elements look or change the font for a certain locale.

Before you begin

Make sure you have the following:

• A Redocly project with a l10n folder containing your translated content organized into locales. See Set up folder structure and Add translated content for more information.
• A @theme/styles.css file in your project. See Add custom styles for more information.

Add custom styles for a locale

To add styles that would only apply to a specific locale, you can use the :root element selector combined with a lang attribute selector in the @theme/styles.css file. The lang attribute value should match the locale code from redocly.yaml.

For example, to add styles that would only apply to the Spanish locale, you can use the following:

l10n:
  defaultLocale: en-US
  locales:
    - code: en-US
      name: English
    - code: es-ES
      name: Spanish

:root[lang="es-ES"] {
  /* styles for the Spanish locale */
}

Resources

• Learn the steps to add localization to your project in Configure localization.
• Learn how to localize your content files in Add translated content.
• Learn more about how to add custom styles to your project in Add custom styles.