# @scalar/themes > the default CSS variables for all Scalar packages Latest version **0.18.0** (published 2026-09-16) · MIT license · 0 weekly downloads ## Install ```sh npm install @scalar/themes pnpm add @scalar/themes yarn add @scalar/themes bun add @scalar/themes ``` ## Health **Score 75/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo. Warnings: low downloads; pre 1.0. ## Facts | | | |---|---| | Version | 0.18.0 | | Published | 2026-09-16 | | First published | 2023-09-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Node | >=22 | | Dependencies | 1 | | Unpacked size | 284.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 16153 | | Author | Scalar | | Maintainers | cameronrohani, marclave, scalar_geoff, hwkr, hanspagel, amritk, scalar-machine | | Keywords | css, css-variables, scalar | ## Links - npm: https://www.npmjs.com/package/@scalar/themes - Repository: https://github.com/scalar/scalar - Issues: https://github.com/scalar/scalar/issues/new/choose - npm.io page: https://npm.io/package/@scalar/themes ## Dependencies (1) - [nanoid](https://npm.io/package/nanoid.md) ^5.1.6 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 0.18.0 (latest) — 2026-09-16 - 0.17.4 — 2026-08-28 - 0.17.3 — 2026-08-20 - 0.17.2 — 2026-07-31 - 0.17.1 — 2026-07-16 - 0.17.0 — 2026-07-16 - 0.16.3 — 2026-07-15 - 0.16.2 — 2026-06-26 - 0.16.1 — 2026-06-22 - 0.16.0 — 2026-06-08 - 0.15.6 — 2026-06-02 - 0.15.5 — 2026-05-14 - 0.15.3 — 2026-04-11 - 0.15.2 — 2026-04-03 - 0.15.1 — 2026-03-18 - … 168 more at https://npm.io/package/@scalar/themes/versions ## README # Scalar Themes [![Version](https://img.shields.io/npm/v/%40scalar/themes)](https://www.npmjs.com/package/@scalar/themes) [![Downloads](https://img.shields.io/npm/dm/%40scalar/themes)](https://www.npmjs.com/package/@scalar/themes) [![License](https://img.shields.io/npm/l/%40scalar%2Fthemes)](https://www.npmjs.com/package/@scalar/themes) [![Discord](https://img.shields.io/discord/1135330207960678410?style=flat&color=5865F2)](https://discord.gg/scalar) Scalar Themes provides a library of themes for all Scalar products and components. It also contains the base set of Scalar CSS variables and an associated [Tailwind](https://tailwindcss.com) preset which leverages those variables. --- Scalar is an open-source API platform for teams who want beautiful developer interfaces without vendor lock-in. - **[API References](https://scalar.com/products/api-references/getting-started)** — Interactive API documentation from OpenAPI and AsyncAPI specs. - **[Developer Docs](https://scalar.com/products/docs/getting-started)** — Write in Markdown/MDX, generate API references, sync with two-way Git. - **[SDK Generator](https://scalar.com/products/sdk-generator/getting-started)** — Type-safe SDKs and CLIs in TypeScript, Python, Go, PHP, Java, and Ruby. - **[API Client](https://scalar.com/products/api-client/getting-started)** — Open-source, offline-first Postman alternative built on OpenAPI. 20M+ monthly npm installs · 15,500+ GitHub stars · MIT licensed · [scalar.com](https://scalar.com) --- To see a list of available themes, see the [`presets`](./src/index.ts#L65) export. ## CSS Layers The themes package uses two [CSS Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to apply the theme styles - `scalar-base`: A copy of the core Scalar CSS variables and default theme - `scalar-theme`: Optionally overrides `scalar-base` with theme styles Any styles added outside of these layers will override all the styles in the layers which allows you to extend or customize a theme. ## Scoping Because many Scalar applications are embedded into other websites the reset is scoped to the `scalar-app` class. This means you need to add this class to the root element of your application where you want the theme to apply. If you are using the themes in a standalone application, you can just add this class to the `body` element. ```html ``` ## Installation ```bash pnpm i @scalar/themes ``` ### Usage via CSS Import (Basic) To import the basic theme styles into your project, you can just import `style.css` which imports the reset, scrollbars, and a copy of the base [Scalar CSS variables](./src/base/variables.css) and [default theme](./src/presets/default.css). ```ts import '@scalar/themes/styles.css' ``` To add a theme, you can import the theme from the presets directory. ```ts import '@scalar/themes/presets/alternate.css' ``` ### Usage via JavaScript To use the themes package via JavaScript, you can use the [`getThemeStyles`](./src/index.ts#L123) function from the package. The function will generate CSS style string which you can then add to the head of your document. ```ts import { getThemeStyles } from '@scalar/themes' const styles = getThemeStyles('alternate', { layer: 'scalar-theme' }) document.head.insertAdjacentHTML('beforeend', ``) ``` The function allows you to pass in a theme ID and an optional options object to configure the layer (default: `scalar-theme`) and whether to include the default fonts (default: `true`). ### Usage via Tailwind To use the themes package with Tailwind, you first need to import the base styles either via CSS or JavaScript (see above). Then you can use the [tailwind config](https://tailwindcss.com/docs/theme#sharing-across-projects) in your Tailwind CSS to expose the [theme colors and variables](./src/tailwind/theme.css). The Scalar Tailwind config already contains a [preflight](https://tailwindcss.com/docs/preflight) and copy of the base [Tailwind theme](https://tailwindcss.com/docs/theme#extending-the-default-theme) so all you need to import from Tailwind is `tailwindcss/utilities.css`. ```css @import "@scalar/themes/style.css"; /* Theme Base Styles and Reset */ @import "@scalar/themes/tailwind.css"; /* Tailwind Theme + Config */ @import "tailwindcss/utilities.css"; /* Generate the Tailwind classes */ ``` --- _Source: https://npm.io/package/@scalar/themes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._