![require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages](https://cdn.sanity.io/images/cgdhsj6q/production/be8ab80c8efa5907bc341c6fefe9aa20d239d890-1600x1097.png?w=400&fit=max&auto=format)
Security News
require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
@laurabeatris/chakra-ui-flashless
Advanced tools
Tools to implement flashless color modes in Chakra UI
This library contains all the tools necessary to implement Chakra UI color modes on statically rendered websites without the flash.
Note: This technique sets Chakra's colors based on the system color mode and doesn't currently support toggling the color mode within the site.
The approach is based on a blog post by @joshwcomeau. It goes something like this:
<body>
that checks the system color mode.This library simplifies the creation of these light-sensitive color variables, and makes it easy to update your Chakra UI theme to use them.
Before using this library, you should have installed Chakra UI and its dependencies.
npm install chakra-ui-flashless
First, wrap your theme overrides in the flashless
function. If you use the default theme with no overrides, simply pass flashless()
to extendTheme
.
import {extendTheme} from '@chakra-ui/react';
import {flashless} from 'chakra-ui-flashless';
// without overrides
const theme = extendTheme(flashless());
// with overrides
const theme = extendTheme(
flashless({
styles: {
global: {
'pre, :not(pre) > code': {
fontSize: 'calc(1em / 1.125)',
borderRadius: 'sm'
}
}
}
})
);
export default theme;
Next append the FlashlessScript
component to the top of the HTML <body>
and pass your Chakra theme as a prop. This looks slightly different depending on your static site generator.
import theme from './theme';
<FlashlessScript theme={theme} />
In gatsby-ssr.js
, set a FlashlessScript
as a pre-body component using the onRenderBody
API.
// gatsby-ssr.js
import React from 'react';
import theme from './src/theme';
import {ChakraProvider} from '@chakra-ui/react';
import {FlashlessScript} from 'chakra-ui-flashless';
export const onRenderBody = ({setPreBodyComponents}) => {
setPreBodyComponents([
<FlashlessScript key="chakra-ui-flashless" theme={theme} />
]);
};
export const wrapRootElement = ({element}) => (
<ChakraProvider theme={theme}>{element}</ChakraProvider>
);
You should also use wrapRootElement
to wrap your app in a ChakraProvider
and pass your theme there as well. You could use @chakra-ui/gatsby-plugin
to do this, but it also injects ColorModeScript
from Chakra UI, which you won't need anymore if you're using this method.
Export it from gatsby-ssr.js
and gatsby-browser.js
.
// gatsby-browser.js
export {wrapRootElement} from './gatsby-ssr';
In Next.js, simply append the FlashlessScript
to the <body>
using a custom Document
.
// pages/_document.js
import Document, {Head, Html, Main, NextScript} from 'next/document';
import React from 'react';
import theme from './theme';
import {FlashlessScript} from 'chakra-ui-flashless';
export default class MyDocument extends Document {
render() {
return (
<Html>
<body>
<FlashlessScript theme={theme} />
<Main />
<NextScript />
</body>
</Html>
);
}
}
You can create additional color variables to use in your UI with the customVariables
prop. It accepts an object that maps CSS variable names to their light and dark variants using an array with two values.
To represent semitransparent colors, you can define a single variant as yet another array with two values: the color, and its opacity.
{
'--variable-name': [lightVariant, [darkVariant, 0.5]]
}
You can pass any named color that is defined in your Chakra theme, and easily manipulate their transparency.
<FlashlessScript
theme={theme}
customVariables={{
// define custom color variables
'--inline-code-bg': ['indigo.50', 'gray.900'],
'--inline-code-text': [
'indigo.800',
['indigo.200', 0.5] // supply an array for semitransparent colors
]
}}
/>
FAQs
Tools to implement flashless color modes in Chakra UI
The npm package @laurabeatris/chakra-ui-flashless receives a total of 3 weekly downloads. As such, @laurabeatris/chakra-ui-flashless popularity was classified as not popular.
We found that @laurabeatris/chakra-ui-flashless 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
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.