Withoutbytes / dynamic-theme-poc-site

POC para definição de tema dinâmico no Tailwind

Como funciona

Básicamente ele funciona fazendo uma requisição do servidor e definindo váriaveis de css dinâmicamente, na config do tailwind é utilizado de forma simples uma váriavel css.

Exemplo

Definindo a cor primária para amarelo no javascript

documentStyle.setProperty("--tw-color-primary", "#fff000");

Config tailwind

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {
            colors: {
                primary: "var(--tw-color-primary)",
            },
        },
    },
    plugins: [],
};

No react

const Home = () => {
 return (
    <div>
        <h1 className="text-2xl text-primary">Texto primário</h1>
    </div>
 );
};

export default Home;

Exemplo definindo cor para azul no react, com requisição no servidor

import { useEffect } from "react";

const Home = () => {
 useEffect(() => {
  fetch("/api/theme").then((res) => res.json()).then(theme => {
   documentStyle.setProperty("--tw-color-primary", theme.primary);      
  });
 }, []);

 return (
    <div>
        <h1 className="text-2xl text-primary">Texto primário</h1>
    </div>
 );
};

export default Home;

Resposta do servidor

{
    "primary": "#0000ff"
}

env

Adicione no seu ENV as seguintes variáveis

MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.p7qsa.mongodb.net/?retryWrites=true&w=majority