mirror of
https://github.com/cupcakearmy/memoir.git
synced 2024-12-24 09:06:29 +00:00
Compare commits
No commits in common. "eb63b57ad49e48fcd01c4ec4b6b18a4238e419d1" and "0a977a0b3db0c20f9c32f1dd629356657b095414" have entirely different histories.
eb63b57ad4
...
0a977a0b3d
10
package.json
10
package.json
@ -3,13 +3,13 @@
|
|||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"packageManager": "pnpm@8.6.12",
|
"packageManager": "pnpm@8.6.12",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "NEXT_TELEMETRY_DISABLED=1 next dev",
|
"dev": "next dev",
|
||||||
"build": "NEXT_TELEMETRY_DISABLED=1 next build && NEXT_TELEMETRY_DISABLED=1 next export"
|
"build": "next build && next export"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"next": "^13.5.4",
|
"next": "^13.4.19",
|
||||||
"nextra": "^2.13.2",
|
"nextra": "^2.11.1",
|
||||||
"nextra-theme-docs": "^2.13.2",
|
"nextra-theme-docs": "^2.11.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0"
|
"react-dom": "^18.2.0"
|
||||||
}
|
}
|
||||||
|
@ -3,6 +3,5 @@
|
|||||||
"cli": "CLI",
|
"cli": "CLI",
|
||||||
"git": "Git",
|
"git": "Git",
|
||||||
"dev_ops": "Dev Ops",
|
"dev_ops": "Dev Ops",
|
||||||
"latex": "LaTeX",
|
"latex": "LaTeX"
|
||||||
"web_dev": "Web Development"
|
|
||||||
}
|
}
|
||||||
|
@ -1,82 +0,0 @@
|
|||||||
---
|
|
||||||
tags:
|
|
||||||
- tailwind
|
|
||||||
- theme
|
|
||||||
- css variables
|
|
||||||
- dark mode
|
|
||||||
---
|
|
||||||
|
|
||||||
# Tailwind themes with CSS Variables
|
|
||||||
|
|
||||||
There are many tailwind theme plugins, tried few and landed on`tailwindcss-themer`.
|
|
||||||
|
|
||||||
## Setup
|
|
||||||
|
|
||||||
Two files are required:
|
|
||||||
|
|
||||||
1. `pnpm i -D tailwindcss-themer`
|
|
||||||
1. `tailwind.config.js`
|
|
||||||
1. `app.postcss`
|
|
||||||
|
|
||||||
> Technically, we don't need to use CSS variables, but I like to, as I can export them automatically from Figma, or whatever design tool. Without CSS Variables, you could just define the colors in `tailwind.config.js` without touching css files.
|
|
||||||
|
|
||||||
```js
|
|
||||||
// tailwind.config.js
|
|
||||||
|
|
||||||
const themer = require('tailwindcss-themer')
|
|
||||||
|
|
||||||
/** @type {import('tailwindcss').Config}*/
|
|
||||||
const config = {
|
|
||||||
theme: {
|
|
||||||
// ...
|
|
||||||
},
|
|
||||||
|
|
||||||
plugins: [
|
|
||||||
themer({
|
|
||||||
defaultTheme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
primary: 'var(--colors-cyan-500)',
|
|
||||||
secondary: 'var(--colors-yellow-500)',
|
|
||||||
surface: 'var(--colors-gray-100)',
|
|
||||||
text: 'var(--colors-gray-900)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
themes: [
|
|
||||||
{
|
|
||||||
name: 'darker',
|
|
||||||
mediaQuery: '@media (prefers-color-scheme: dark)',
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
primary: 'var(--colors-cyan-700)',
|
|
||||||
secondary: 'var(--colors-yellow-500)',
|
|
||||||
surface: 'var(--colors-gray-900)',
|
|
||||||
text: 'var(--colors-gray-100)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = config
|
|
||||||
```
|
|
||||||
|
|
||||||
```css
|
|
||||||
/* app.postcss */
|
|
||||||
|
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
:root {
|
|
||||||
/* colors */
|
|
||||||
--colors-cyan-500: rgb(164, 189, 245);
|
|
||||||
--colors-cyan-700: #0d398c;
|
|
||||||
--colors-gray-100: rgb(255, 255, 255);
|
|
||||||
--colors-gray-900: rgb(1, 1, 1);
|
|
||||||
--colors-yellow-500: rgb(233, 246, 82);
|
|
||||||
}
|
|
||||||
```
|
|
725
pnpm-lock.yaml
generated
725
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user