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
27 lines
589 B
JSON
27 lines
589 B
JSON
{
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next",
|
|
"build": "next build",
|
|
"start": "next start"
|
|
},
|
|
"dependencies": {
|
|
"classnames": "^2.5.1",
|
|
"date-fns": "^3.6.0",
|
|
"gray-matter": "^4.0.3",
|
|
"next": "latest",
|
|
"react": "^18.3.1",
|
|
"react-dom": "^18.3.1",
|
|
"remark": "^15.0.1",
|
|
"remark-html": "^16.0.1"
|
|
},
|
|
"devDependencies": {
|
|
"@types/node": "^20.14.8",
|
|
"@types/react": "^18.3.3",
|
|
"@types/react-dom": "^18.3.0",
|
|
"autoprefixer": "^10.4.19",
|
|
"postcss": "^8.4.38",
|
|
"tailwindcss": "^3.4.4",
|
|
"typescript": "^5.5.2"
|
|
}
|
|
}
|