![New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions](https://cdn.sanity.io/images/cgdhsj6q/production/86e6ebdea652d20da070ebbda20134b839972db7-1024x1024.webp?w=800&fit=max&auto=format)
Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
@devtools-ds/themes
Advanced tools
Changelog
v0.130.3 (Sun Jan 24 2021)
master
@devtools-ds/docs
, @devtools-ds/storybook-theme-addon
, @devtools-ds/storybook-utils
master
@devtools-ds/console
, @devtools-ds/dom-inspector
, @devtools-ds/diagnostic
, @devtools-ds/icon
, @devtools-ds/navigation
, @devtools-ds/node
, @devtools-ds/object-inspector
, @devtools-ds/table
, @devtools-ds/tree
, @devtools-ds/docs
, @devtools-ds/object-parser
, @devtools-ds/storybook-theme-addon
, @devtools-ds/storybook-utils
, @devtools-ds/themes
Readme
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.
npm i @devtools-ds/themes
# or with yarn
yarn add @devtools-ds/themes
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>;
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>
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
);
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
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
The npm package @devtools-ds/themes receives a total of 247,661 weekly downloads. As such, @devtools-ds/themes popularity was classified as popular.
We found that @devtools-ds/themes demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.