@bsthun/tailwindcss-instant-dark-mode 1.0.0 → 1.0.2

package/README.md

@@ -12,12 +12,11 @@ Adding new color class to tailwindcss, topup from original class with `-dark` pr
 | `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:
+#### Supported colors properties
 - backgroundColor / `bg-`
 - borderColor / `border-`
 - color / `text-`
-- ringColor / `border-`
-- divideColor / `ring-`
+- ringColor / `ring-`
 - divideColor / `divide-`
 - placeholderColor / `placeholder-`
 

package/index.ts

@@ -1,83 +1,4 @@
-import plugin from 'tailwindcss/plugin'
+import { initDarkMode, toggleDarkMode } from './util/toggledark'
+import { tailwindcssInstantDarkMode } from './util/instant'
 
-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)
-	})
-}
+export { initDarkMode, toggleDarkMode, tailwindcssInstantDarkMode }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bsthun/tailwindcss-instant-dark-mode",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"description": "A tailwind plugin that make a class to instant apply both light and dark variants of a color automatically.",
 	"repository": {
 		"type": "git",

package/util/instant.ts

@@ -0,0 +1,81 @@
+import plugin from 'tailwindcss/plugin'
+
+export type tailwindInstantDarkModeConfig = {
+	colorMap: Record<string, string> | null
+}
+
+export const tailwindcssInstantDarkMode = (config?: tailwindInstantDarkModeConfig) => {
+	const getDarkEquivalent = (color: string) => {
+		if (!config)
+			config = {
+				colorMap: null,
+			}
+
+		if (!config.colorMap) {
+			config.colorMap = {
+				'50': '950',
+				'100': '900',
+				'200': '800',
+				'300': '700',
+				'400': '600',
+				'500': '500',
+				'600': '400',
+				'700': '300',
+				'800': '200',
+				'900': '100',
+				'950': '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 }) {
+		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/util/toggledark.ts

@@ -0,0 +1,40 @@
+const apply = (isDark: boolean) => {
+	const root = document.documentElement
+	if (isDark) {
+		root.classList.add('dark')
+	} else {
+		root.classList.remove('dark')
+	}
+}
+
+const initDarkMode = () => {
+	const userPref = localStorage.getItem('theme')
+	const systemPref = window.matchMedia('(prefers-color-scheme: dark)').matches
+
+	if (userPref === 'dark') {
+		apply(true)
+	} else if (userPref === 'light') {
+		apply(false)
+	} else {
+		apply(systemPref)
+	}
+
+	const systemPrefListener = window.matchMedia('(prefers-color-scheme: dark)')
+	systemPrefListener.addEventListener('change', (event) => {
+		apply(event.matches)
+		localStorage.setItem('theme', event.matches ? 'dark' : 'light')
+	})
+}
+
+const toggleDarkMode = () => {
+	const root = document.documentElement
+	if (root.classList.contains('dark')) {
+		root.classList.remove('dark')
+		localStorage.setItem('theme', 'light')
+	} else {
+		root.classList.add('dark')
+		localStorage.setItem('theme', 'dark')
+	}
+}
+
+export { initDarkMode, toggleDarkMode }