New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

@scalar/themes

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@scalar/themes

the default CSS variables for all Scalar packages

0.9.63
Source
npm

Version published: last week

Weekly downloads: 50K; decreased by-9.86%

Maintainers: 8

Weekly downloads

Created: last year

Source

Scalar Themes

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 preset which leverages those variables.

To see a list of available themes, see the presets export.

CSS Layers

The themes package uses two CSS Layers 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.

<body class="scalar-app">
  <!-- Your application content -->
</body>

Installation

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 and default theme.

import '@scalar/themes/styles.css'

To add a theme, you can import the theme from the presets directory.

import '@scalar/themes/presets/alternate.css'

Usage via JavaScript

To use the themes package via JavaScript, you can use the getThemeStyles function from the package. The function will generate CSS style string which you can then add to the head of your document.

import { getThemeStyles } from '@scalar/themes'

const styles = getThemeStyles('alternate', { layer: 'scalar-theme' })
document.head.insertAdjacentHTML('beforeend', `<style>${styles}</style>`)

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 inject the import the styles either via CSS or JavaScript (see above). You can also import them alongside your global Tailwind styles.

@import '@scalar/themes/style.css';
@tailwind components;
@tailwind utilities;
@tailwind variants;

Then you can use the tailwind preset in your tailwind.config.js to expose the theme colors and variables.

import scalarPreset from '@scalar/themes/tailwind'
import { type Config } from 'tailwindcss'

export default {
  presets: [scalarPreset],
  // Your tailwind config
  theme: {
    extend: {
      // Extend the preset
    },
    // Override the preset
  },
} satisfies Config

Keywords

FAQs

What is @scalar/themes?

Is @scalar/themes popular?

Is @scalar/themes well maintained?

Package last updated on 30 Jan 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install