@bsthun/tailwindcss-instant-dark-mode 1.0.0

package/.prettierrc

@@ -0,0 +1,11 @@
+{
+	"trailingComma": "es5",
+	"tabWidth": 4,
+	"semi": false,
+	"singleQuote": true,
+	"printWidth": 120,
+	"quoteProps": "as-needed",
+	"jsxSingleQuote": false,
+	"useTabs": true,
+	"bracketSpacing": true
+}

package/LICENSE

@@ -0,0 +1,19 @@
+MIT License
+
+Copyright (c) 2025 Thun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,52 @@
+# tailwindcss-instant-dark-mode
+
+A tailwindcss plugin that make a class to instant apply both light and dark variants of a color automatically.
+
+## Features
+
+Adding new color class to tailwindcss, topup from original class with `-dark` prefix that will automatically apply both light and dark variants of a color.
+
+| Original tailwindcss variant | Instant dark mode |
+|----------|------------------------|
+| `bg-blue-100 dark:bg-blue-900` | `bg-blue-100-dark` |
+| `text-kmutt-800 dark:text-kmutt-200` | `text-kmutt-800-dark` |
+| `hover:border-blue-300 dark:hover:border-blue-700` | `hover:border-blue-300-dark` |
+
+Supported colors properties:
+- backgroundColor / `bg-`
+- borderColor / `border-`
+- color / `text-`
+- ringColor / `border-`
+- divideColor / `ring-`
+- divideColor / `divide-`
+- placeholderColor / `placeholder-`
+
+#### Additional features
+- Support for custom color classes
+- Works with `hover:` and other variants
+- Support tailwindcss language server for auto-completion
+![Auto-completion](./doc/feature-language-server-autocompletion.png)
+
+#### Limitations
+- Only works with colors that defined in number format (e.g. `bg-blue-500`), not with color name (e.g. `bg-blue`)
+- Only map directly between 2 color pair, with more customizations, may need to fallback to original tailwindcss syntax.
+
+## Installation
+
+```bash
+npm install @bsthun/tailwindcss-instant-dark-mode
+```
+
+## Usage
+
+```js
+// tailwind.config.js
+import { tailwindcssInstantDarkMode } from '@bsthun/tailwindcss-instant-dark-mode';
+
+const config: Config = {
+	darkMode: ['class'],
+	plugins: [tailwindcssInstantDarkMode()],
+};
+
+export default config;
+```

package/index.ts

@@ -0,0 +1,83 @@
+import plugin from 'tailwindcss/plugin'
+
+export type tailwindInstantDarkModeConfig = {
+	colorMap: Record<string, string> | null
+}
+
+export const tailwindcssInstantDarkMode = (config?: tailwindInstantDarkModeConfig) => {
+	// Helper to get the dark mode equivalent of a color
+	const getDarkEquivalent = (color: string) => {
+		// Map light colors to their dark equivalents
+		if (!config)
+			config = {
+				colorMap: null,
+			}
+
+		if (!config.colorMap) {
+			config.colorMap = {
+				'50': '900',
+				'100': '800',
+				'200': '700',
+				'300': '600',
+				'400': '500',
+				'500': '400',
+				'600': '300',
+				'700': '200',
+				'800': '100',
+				'900': '50',
+			}
+		}
+
+		// Extract color base and shade
+		const match = color.match(/^(.+)-(\d+)$/)
+		if (!match) return color
+
+		const [_, base, shade] = match
+		const darkShade = config.colorMap[shade]
+
+		return darkShade ? `${base}-${darkShade}` : color
+	}
+
+	return plugin(function ({ addComponents, theme }) {
+		// Get all color utilities from theme
+		const utilities = Object.entries(theme('colors') as Record<string, any>).reduce(
+			(acc: Record<string, any>, [colorName, colorValues]) => {
+				if (typeof colorValues === 'object') {
+					Object.entries(colorValues).forEach(([shade, colorValue]) => {
+						const properties = [
+							['backgroundColor', 'bg'],
+							['borderColor', 'border'],
+							['color', 'text'],
+							['ringColor', 'ring'],
+							['divideColor', 'divide'],
+							['placeholderColor', 'placeholder'],
+						] as const
+
+						properties.forEach(([prop, prefix]) => {
+							const className = `${prefix}-${colorName}-${shade}-dark`
+
+							const darkShadeKey = getDarkEquivalent(`${colorName}-${shade}`)
+							const [darkColorName, darkShade] = darkShadeKey.split('-')
+
+							const darkValue = theme('colors')?.[darkColorName]?.[darkShade]
+
+							if (colorValue && darkValue) {
+								acc[`.${className}`] = {
+									[prop]: colorValue,
+									'.dark &': {
+										[prop]: darkValue,
+									},
+									transition: 'color 0.2s, background-color 0.2s, border-color 0.2s',
+								}
+							}
+						})
+					})
+				}
+				return acc
+			},
+			{}
+		)
+
+		addComponents(utilities)
+	})
+}

package/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "@bsthun/tailwindcss-instant-dark-mode",
+	"version": "1.0.0",
+	"description": "A tailwind plugin that make a class to instant apply both light and dark variants of a color automatically.",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/BSthun/tailwindcss-instant-dark-mode.git"
+	},
+	"scripts": {
+		"format": "prettier --write ."
+	},
+	"keywords": [
+		"tailwind",
+		"dark-mode"
+	],
+	"author": "BSthun <bsthun@gmail.com>",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/BSthun/tailwindcss-instant-dark-mode/issues"
+	},
+	"homepage": "https://github.com/BSthun/tailwindcss-instant-dark-mode#readme",
+	"devDependencies": {
+		"@types/tailwindcss": "^3.0.11",
+		"prettier": "^3.4.2",
+		"tailwindcss": "^2.0.0"
+	}
+}