qwertyasdfgh
/
imageboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Joonas 2023-01-16 14:53:07 +02:00
parent 0fc54da81a
commit d2ba02b3f6
2 changed files with 43 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/root.jsx
View File

@ -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 (
<html className="dark" lang="en">
<html className={`${darkMode ? "dark" : ""}`} lang="en">
<head>
<Meta />
<Links />
</head>
<body className="dark:ctp-mocha dark:bg-ctp-base">
<button className="sticky top-0" onClick={() => setDarkMode(!darkMode)}>
{darkMode ? (
<svg
className="w-8 h-8 md:w-10 md:h-10"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="white"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
) : (
<svg
className="w-8 h-8 md:w-10 md:h-10"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="black"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
/>
</svg>
)}
</button>
<Outlet />
<Scripts />
<LiveReload />

14
tailwind.config.js
View File

@ -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",
}),
],
}
};