@scalar/themes
Advanced tools
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.
The themes package uses two CSS Layers to apply the theme styles
scalar-base: A copy of the core Scalar CSS variables and default themescalar-theme: Optionally overrides scalar-base with theme stylesAny styles added outside of these layers will override all the styles in the layers which allows you to extend or customize a theme.
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>
pnpm i @scalar/themes
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'
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).
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 in your Tailwind CSS to expose the theme colors and variables. The Scalar Tailwind config already contains a preflight and copy of the base Tailwind theme so all you need to import from Tailwind is tailwindcss/utilities.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 */
FAQs
the default CSS variables for all Scalar packages
We found that @scalar/themes demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 open source maintainers collaborating on the project.
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.
Research
Socket Threat Research maps a rare inside look at OtterCookie’s npm-Vercel-GitHub chain, adding 197 malicious packages and evidence of North Korean operators.
Research
Socket researchers identified a malicious Chrome extension that manipulates Raydium swaps to inject an undisclosed SOL transfer, quietly routing fees to an attacker wallet.
Research
/Security News
Another wave of Shai-Hulud campaign has hit npm with more than 500 packages and 700+ versions affected.