Skip to content

Instantly share code, notes, and snippets.

Last active February 15, 2022 08:23
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
import { useLayoutEffect } from 'react';
import './styles.scss'; // ->
// Usage
const theme = {
'button-padding': '16px',
'button-font-size': '14px',
'button-border-radius': '4px',
'button-border': 'none',
'button-color': '#FFF',
'button-background': '#6772e5',
'button-hover-border': 'none',
'button-hover-color': '#FFF'
function App() {
return (
<button className="button">Button</button>
// Hook
function useTheme(theme) {
() => {
// Iterate through each value in theme object
for (const key in theme) {
// Update css variables in document's root element`--${key}`, theme[key]);
[theme] // Only call again if theme object reference changes
Copy link

Codesanbox page demo is not working =))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment