4e9b405c4c
What? Updated blog-starter example to support dark theme. Also added a button to switch modes (User preference). → User can opt for dark / light / system mode → Mode is persisted using localStorage → Mode is also synced across browsing contexts → No FOUC (Flash of Unstyled Content) → Full SSG → No additional dependency Why? Now that dark mode is a first-class feature of many operating systems, it’s becoming more and more common to design a dark version of your website to go along with the default design. How? - Used tailwind `dark:` modifier - Used localStorage for persisting user's preference - Used storage event to sync the mode across tabs/iframes - Injected script to avoid FOUC - Added appropriate comments in the code for clarity and readability
44 lines
1 KiB
TypeScript
44 lines
1 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const config: Config = {
|
|
darkMode: "class",
|
|
content: [
|
|
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
backgroundImage: {
|
|
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
|
|
"gradient-conic":
|
|
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
|
|
},
|
|
colors: {
|
|
"accent-1": "#FAFAFA",
|
|
"accent-2": "#EAEAEA",
|
|
"accent-7": "#333",
|
|
success: "#0070f3",
|
|
cyan: "#79FFE1",
|
|
},
|
|
spacing: {
|
|
28: "7rem",
|
|
},
|
|
letterSpacing: {
|
|
tighter: "-.04em",
|
|
},
|
|
fontSize: {
|
|
"5xl": "2.5rem",
|
|
"6xl": "2.75rem",
|
|
"7xl": "4.5rem",
|
|
"8xl": "6.25rem",
|
|
},
|
|
boxShadow: {
|
|
sm: "0 5px 10px rgba(0, 0, 0, 0.12)",
|
|
md: "0 8px 30px rgba(0, 0, 0, 0.12)",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
export default config;
|