Toggle dark mode stylex facebook #511
-
|
Sure, here's how you can create a button to toggle between dark mode and the default theme using the example below: export const colors = stylex.defineVars({
primaryText: {default: 'black', [DARK]: 'white'},
secondaryText: {default: '#333', [DARK]: '#ccc'},
accent: {default: 'blue', [DARK]: 'lightblue'},
background: {default: 'white', [DARK]: 'black'},
lineColor: {default: 'gray', [DARK]: 'lightgray'},
});I wanted to make something like that button.
Sorry, I've been trying all day already, I'm new to using StyleX and new to the frontend. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 12 replies
-
|
You'd need two themes as well. import {color} from './globalTheme.stylex'
export const light = stylex.createTheme(color, {
primaryText: 'black',
secondaryText: '#333',
accent: 'blue',
background: 'white',
lineColor: 'gray',
});
export const dark = stylex.defineVars({
primaryText: 'white',
secondaryText: '#ccc',
accent: 'lightblue',
background: 'black',
lineColor: 'lightgray',
});Now, somewhere near the root of your app you can conditionally wrap everything with one of the two themes. import {light, dark} from './themes'
function Root({children}) {
const [theme, setTheme] = useState('auto');
return (
<div {...stylex.props(
theme === 'light' && light,
theme === 'dark' && dark,
)}>
{children}
</div>
)
} |
Beta Was this translation helpful? Give feedback.
-
|
There isn't really any way to avoid a flash of light-mode with this approach doing SSR and persisting the user choice in local storage cause checking for the stored value would have to be done in If we could somehow have dark and light mode based on a selector instead of a media query, and inline script in the It should be pretty easy to detect if the condition is an at-rule or a selector, and emit a ruleset with or without the enclosed |
Beta Was this translation helpful? Give feedback.
-
|
The new A single theme can be created with |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, light-dark is really nice, and would definitely solve this specific problem, but support is a little to new still... Only 65.84% global support according to caniuse. |
Beta Was this translation helpful? Give feedback.
-
|
If you're not using multiple layers of variables, LightningCSS can polyfill |
Beta Was this translation helpful? Give feedback.
-
|
ENTENDI I understood! In my case, const Colors is the default color, and the themes are as I put them in the body import * as stylex from "@stylexjs/stylex";
export const colors = stylex.defineVars({
"gray-900": "#0C0C0D",
"gray-800": "#131313",
"gray-700": "#272727",
"gray-400": "#6F6F6F",
"gray-300": "#C8C8C8",
"green-500": "#5FB9B0",
"purple-300": "#B292FF",
white: "#FFFFFF",
});
export const dark = stylex.createTheme(colors, {
"gray-900": "#0C0C0D",
"gray-800": "#131313",
"gray-700": "#272727",
"gray-400": "#6F6F6F",
"gray-300": "#C8C8C8",
"green-500": "#5FB9B0",
"purple-300": "#B292FF",
white: "#FFFFFF",
});
export const light = stylex.createTheme(colors, {
"gray-900": "red",
"gray-800": "red",
"gray-700": "red",
"gray-400": "red",
"gray-300": "red",
"green-500": "red",
"purple-300": "red",
white: "red",
});APPLICATION import type { Metadata } from "next";
import * as stylex from "@stylexjs/stylex";
import "./globals.css";
import { light, dark } from "@/modules/theme/tokens.stylex";
export const metadata: Metadata = {
title: "Portfolio - Felipe Pereira",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="pt-br">
<head></head>
<body {...stylex.props(dark)}>{children}</body>
</html>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
@felpereira I suggest using camelCase for your themes as these are names used in JS source only. i.e. Also, |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, yes I will do it this way, I will also test @predaytor suggestion |
Beta Was this translation helpful? Give feedback.
-
|
You can choose not to use themes at all if you only want browser's light/dark default. There is a new CSS property light-dark() which allows you to avoid using For convenience, I like to separate light and dark tokens. You can also refer to them to get more meaningful token names (as with regular CSS variables, which they are). Don't worry about duplicate tokens (in the case of aliases like
import * as stylex from '@stylexjs/stylex';
const gray = {
gray1: 'oklch(99.1% 0.001 277.7)',
// ...
} as const;
// ...
const supportive = {
supportive1: gray.gray1,
// ...
};
export const light = stylex.defineVars({
...gray,
...supportive,
});
import * as stylex from '@stylexjs/stylex';
const gray = {
gray1: 'oklch(17.8% 0.004 277.7)',
// ...
} as const;
// ...
const supportive = {
supportive1: gray.gray1,
// ...
};
export const dark = stylex.defineVars({
...gray,
...supportive,
});Then merge them into a
import * as stylex from '@stylexjs/stylex';
import { dark } from '~/styles/colors/dark.stylex';
import { light } from '~/styles/colors/light.stylex';
export const colors = stylex.defineVars({
gray1: `light-dark(${light.gray1}, ${dark.gray1})`,
// ...
supportive1: `light-dark(${light.supportive1}, ${dark.supportive1})`,
} as const);Switch the color-scheme programmatically or let the browser decide: import * as stylex from '@stylexjs/stylex';
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html {...stylex.props(styles.html)}>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>{children}</body>
</html>
);
}
const styles = stylex.create({
html: {
// let the system decide which mode to use
colorScheme: 'light dark',
// or switch manually
colorScheme: 'light',
// colorScheme: 'dark',
},
}); |
Beta Was this translation helpful? Give feedback.
-
@nmn yeah, the idea was to be able to select individual colors (light or dark) to create a non-uniform light-dark() result, like so: export const colors = stylex.defineVars({
...gray,
canvas: `light-dark(#fff, ${dark.gray5})`,
});I tested your approach with solid light-dark variables in a single file and it gave the exact result with an even smaller bundle size (gzipped)! export const colors = stylex.defineVars({
...gray,
canvas: `light-dark(#fff, ${gray.gray5})`,
// ^? (property) canvas: "light-dark(#fff, light-dark( oklch(91% 0.008 277.7), oklch(31.4% 0.009 277.7) ))"
});I thought we couldn't nest |
Beta Was this translation helpful? Give feedback.
-
@nmn, is the feature included in the new StyleX 0.6.1 release? Very thanks. |
Beta Was this translation helpful? Give feedback.
-
|
It should work. I didn't test this specifically. |
Beta Was this translation helpful? Give feedback.
-
|
@nmn, can we make this small fix to the export type StyleX$DefineVars = <
const DefaultTokens extends TTokens,
ID extends symbol = symbol,
>(
tokens: DefaultTokens,
) => VarGroup<FlattenTokens<DefaultTokens>, ID>; |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
You'd need two themes as well.
Now, somewhere near the root of your app you can conditionally wrap everything with one of the two themes.