Package Exports

@ultraviolet/themes
@ultraviolet/themes/console/dark/__generated__
@ultraviolet/themes/console/darker/__generated__
@ultraviolet/themes/console/light/__generated__
@ultraviolet/themes/dark.css
@ultraviolet/themes/darker.css
@ultraviolet/themes/light.css

Readme

Ultraviolet Themes

Ultraviolet Themes is a set of themes for the Ultraviolet UI library.

Note

@ultraviolet/ui is using @ultraviolet/theme under the hood, therefore you don't need to install it if you want to use the default theme (consoleLightTheme and consoleDarkTheme are the default themes).

Get Started

Using npm:

$ pnpm add @ultraviolet/ui @ultraviolet/themes @emotion/react @emotion/styled

Directly importing the CSS theme in your HTML file:

<link rel="stylesheet" href="https://assets.scaleway.com/themes/light.css"> 
// OR
<link rel="stylesheet" href="https://assets.scaleway.com/themes/dark.css"> 
// OR 
<link rel="stylesheet" href="https://assets.scaleway.com/themes/darker.css">

Usage

import { normalize, Button } from '@ultraviolet/ui'
import { consoleDarkTheme } from '@ultraviolet/themes' // Here we import the theme we want to use
// import { consoleLightTheme } from "@ultraviolet/themes/console/light" // Alternatively you can directly import the light theme if your bundler doesn't have tree-shaking capabilities
import { Global, css, ThemeProvider } from '@emotion/react'

const App = () => (
  <ThemeProvider theme={consoleDarkTheme}>
    <Global
      styles={css`
        ${normalize()}
      `}
    />
    <Button variant="primary" onClick={() => console.log('clicked')}>
      Click Me
    </Button>
  </ThemeProvider>
)

Documentation

Checkout our documentation website.