From d2ba02b3f6db6a5a08842b42f2e93c52979273e2 Mon Sep 17 00:00:00 2001 From: Joonas Date: Mon, 16 Jan 2023 14:53:07 +0200 Subject: [PATCH] added a dark theme toggle? i'm not sure if it's ok to render something inside the root component but it works so whatever lol --- app/root.jsx | 38 +++++++++++++++++++++++++++++++++++++- tailwind.config.js | 14 ++++++-------- 2 files changed, 43 insertions(+), 9 deletions(-) diff --git a/app/root.jsx b/app/root.jsx index 1808fe7..167ee17 100644 --- a/app/root.jsx +++ b/app/root.jsx @@ -6,6 +6,7 @@ import { Scripts, ScrollRestoration, } from "@remix-run/react"; +import { useState } from "react"; import styles from "./styles/app.css"; @@ -20,13 +21,48 @@ export const meta = () => ({ }); export default function App() { + const [darkMode, setDarkMode] = useState(); + return ( - + + diff --git a/tailwind.config.js b/tailwind.config.js index e995c75..64f63d1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,16 +1,14 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: [ - "./app/**/*.{js,ts,jsx,tsx}", - ], - darkMode: 'class', + content: ["./app/**/*.{js,ts,jsx,tsx}"], + darkMode: "class", theme: { extend: {}, }, plugins: [ require("@catppuccin/tailwindcss")({ - prefix: "ctp", - defaultFlavour: "latte", - }), + prefix: "ctp", + defaultFlavour: "latte", + }), ], -} +};