Socket
Socket
Sign inDemoInstall

@devtools-ds/themes

Package Overview
Dependencies
15
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@devtools-ds/themes

Each of the UI components in this project contains themes for multiple browsers. These themes are built using the [postcss-themed](https://github.com/intuit/postcss-themed) package, which allows us to specify themes for multiple browsers in light and dark


Version published
Maintainers
1
Weekly downloads
403,268
decreased by-9.26%

Weekly downloads

Readme

Source

@devtools-ds/themes

Each of the UI components in this project contains themes for multiple browsers. These themes are built using the postcss-themed package, which allows us to specify themes for multiple browsers in light and dark mode.

This package contains colors, types, and React utilities for using browser themes.

Installation

npm i @devtools-ds/themes
# or with yarn
yarn add @devtools-ds/themes

Examples

ThemeProvider

You can use the ThemeProvider component to set the theme for all @devtools-ds components underneath it.

import { ThemeProvider } from "@devtools-ds/themes";

<ThemeProvider theme={"chrome"} colorScheme={"light"}>
  <YourApp />
</ThemeProvider>;

AutoThemeProvider

We also provide an AutoThemeProvider, which will automatically set the theme and color scheme of @devtools-ds components based on the users browser and preferred color scheme.

<AutoThemeProvider>
  <div id="my-app">
    <ObjectInspector />
  </div>
</AutoThemeProvider>

You can always override the AutoThemeProvider like a normal ThemeProvider.

<AutoThemeProvider theme="firefox">
  <div id="my-app">
    <ObjectInspector />
  </div>
</AutoThemeProvider>

You can also have the AutoThemeProvider automatically change the background color and text color to match the current browser and color scheme. In dark mode, this means the background color will be the browser's dark background and light text.

<AutoThemeProvider autoStyle>
  <div id="my-app">
    <ObjectInspector />
  </div>
</AutoThemeProvider>

useTheme

If you want to build your own component that leverages the ThemeProvider, we have a hook that allows you to get the current theme.

import { useTheme } from "@devtools-ds/themes";

const { currentTheme, currentColorScheme } = useTheme(
  { theme, colorScheme },
  styles
);

Variables

We have created a number of theme variables that have the common colors for different browsers. These are stored as JS objects. You can view the available variables in the Browser Themes story in Storybook.

import { chrome, firefox } from "@devtools-ds/themes";

chrome.light.gray01;
firefox.dark.blue02;

FAQs

Last updated on 27 Dec 2022

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

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc