diff --git a/README.md b/README.md
index aac10b5..f518964 100644
--- a/README.md
+++ b/README.md
@@ -114,7 +114,7 @@ You can also extend Nightwind to other classes and variants:
 
 Nightwind switches between opposite color weights when switching to dark mode. So a -50 color gets switched with a -900 color, -100 with -800 and so forth.
 
-> Note: Except for the -50 and -900 weights, the sum of opposite weights is always 900.
+> Note: Except for the -50 and -900 weights, the sum of opposite weights is always 900. To customise how Nightwind invert colors by default, see [how to set up a custom color scale](#custom-color-scale)
 
 If you add your custom colors in tailwind.config.js using number notation, Nightwind will treat them the same way as Tailwind's colors when switching into dark mode.
 
@@ -139,6 +139,32 @@ module.exports = {
 
 You can also use [**color mappings**](#color-mappings) to further customise your dark theme.
 
+### Variants
+
+Variants and other color classes can be enabled for Nightwind like so:
+
+```js
+// tailwind.config.js
+module.exports = {
+  // ...
+  variants: {
+    nightwind: {
+      variants: ["focus"], // Add any Tailwind variant
+      colorClasses: [
+        "gradient",
+        "ring",
+        "ring-offset",
+        "divide",
+        "placeholder",
+      ],
+    },
+  },
+  // ...
+}
+```
+
+The 'gradient' color class enables Nightwind for the 'from', 'via' and 'to' classes, allowing **automatic dark gradients**.
+
 ### The 'nightwind-prevent' class
 
 Sometimes you want an element to remain exactly the same in both light and dark modes. You can achieve this in Nightwind by adding a 'nightwind-prevent' class to the element.
@@ -194,31 +220,68 @@ module.exports = {
 }
 ```
 
-### Variants
+### Custom color scale
 
-Variants and other color classes can be enabled for Nightwind like so:
+This configuration allows you to define how one or more color weights convert in dark-mode. Note that these **affects all color classes**.
+
+For example, you could make all -100 colors convert into -900 colors like so.
 
 ```js
 // tailwind.config.js
 module.exports = {
-  // ...
-  variants: {
+  theme: {
     nightwind: {
-      variants: ["focus"], // Add any Tailwind variant
-      colorClasses: [
-        "gradient",
-        "ring",
-        "ring-offset",
-        "divide",
-        "placeholder",
-      ],
+      colorScale: {
+        100: 900, // default 800
+      },
     },
   },
-  // ...
 }
 ```
 
-The 'gradient' color class enables Nightwind for the 'from', 'via' and 'to' classes, allowing **automatic dark gradients**.
+> Note: These settings can still be overridden for specific colors using [color mappings](#color-mappings), or in specific elements with [overrides](#overrides)
+
+#### Reduced preset
+
+This preset simulates how Nightwind would behave without the -50 color classes. Any -50 color will essentially appear the same as -100 colors (both becomes -900)
+
+This behaviour may be desirable for two main reasons:
+
+- Makes the reversed -800 and -900 colors darker and more different between themselves.
+- -500 colors remain the same in both dark and light mode
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    nightwind: {
+      colorScale: {
+        preset: "reduced",
+      },
+    },
+  },
+}
+```
+
+This is the corresponding scale:
+
+```js
+// tailwind.config.js
+colorScale: {
+  50: 900,
+  100: 900,
+  200: 800,
+  300: 700,
+  400: 600,
+  500: 500,
+  600: 400,
+  700: 300,
+  800: 200,
+  900: 100,
+},
+```
+
+> Note: When using a preset, specific weights will be ignored.
 
 ### Custom classes
 
diff --git a/package.json b/package.json
index 7888d81..b6ca0f5 100644
--- a/package.json
+++ b/package.json
@@ -1,29 +1,29 @@
 {
-	"name": "nightwind",
-	"version": "1.0.9",
-	"description": "An automatic, overridable, customisable Tailwind dark mode plugin",
-	"main": "src/index.js",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/jjranalli/nightwind.git"
-	},
-	"keywords": [
-		"tailwind",
-		"tailwindcss",
-		"tailwindcss-plugin",
-		"dark-mode",
-		"dark-theme",
-		"postcss",
-		"css",
-		"javascript"
-	],
-	"dependencies": {
-		"tailwindcss": "^2.0.0"
-	},
-	"author": "Jacopo Ranalli",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/jjranalli/nightwind/issues"
-	},
-	"homepage": "https://nightwindcss.com"
+  "name": "nightwind",
+  "version": "1.1.0",
+  "description": "An automatic, overridable, customisable Tailwind dark mode plugin",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jjranalli/nightwind.git"
+  },
+  "keywords": [
+    "tailwind",
+    "tailwindcss",
+    "tailwindcss-plugin",
+    "dark-mode",
+    "dark-theme",
+    "postcss",
+    "css",
+    "javascript"
+  ],
+  "dependencies": {
+    "tailwindcss": "^2.0.0"
+  },
+  "author": "Jacopo Ranalli",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/jjranalli/nightwind/issues"
+  },
+  "homepage": "https://nightwindcss.com"
 }
diff --git a/src/index.js b/src/index.js
index e690d97..e6735ba 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,347 +1,332 @@
 const plugin = require("tailwindcss/plugin")
 
 const nightwind = plugin(
-	function ({ addComponents, theme, variants }) {
-		const darkSelector = "dark"
-		const fixedClass = theme("nightwind.fixedClass", "nightwind-prevent")
+  function ({ addComponents, theme, variants }) {
+    const darkSelector = "dark"
+    const fixedClass = theme("nightwind.fixedClass", "nightwind-prevent")
 
-		const colorClasses = []
-		const transitionClasses = []
-		const colors = theme("colors")
-		const colorVariants = ["hover"]
-		const prefixes = ["text", "bg", "border"]
-		const weights = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+    const colorClasses = []
+    const transitionClasses = []
+    const colors = theme("colors")
+    const colorVariants = ["hover"]
+    const prefixes = ["text", "bg", "border"]
+    const weights = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
 
-		if (variants("nightwind.variants")) {
-			colorVariants.push(...variants("nightwind.variants"))
-		}
+    if (variants("nightwind.variants")) {
+      colorVariants.push(...variants("nightwind.variants"))
+    }
 
-		if (variants("nightwind.colorClasses")) {
-			prefixes.push(...variants("nightwind.colorClasses"))
-			if (variants("nightwind.colorClasses").includes("gradient")) {
-				prefixes.push(...["from", "via", "to"])
-			}
-		}
+    if (variants("nightwind.colorClasses")) {
+      prefixes.push(...variants("nightwind.colorClasses"))
+      if (variants("nightwind.colorClasses").includes("gradient")) {
+        prefixes.push(...["from", "via", "to"])
+      }
+    }
 
-		function hexToRGB(h, alpha) {
-			if (h.length == 4) {
-				let rh = h[1] + h[1]
-				let gh = h[2] + h[2]
-				let bh = h[3] + h[3]
-				var r = parseInt(rh, 16),
-					g = parseInt(gh, 16),
-					b = parseInt(bh, 16)
-			}
-			if (h.length == 7) {
-				var r = parseInt(h.slice(1, 3), 16),
-					g = parseInt(h.slice(3, 5), 16),
-					b = parseInt(h.slice(5, 7), 16)
-			}
+    function hexToRGB(h, alpha) {
+      if (h.length == 4) {
+        let rh = h[1] + h[1]
+        let gh = h[2] + h[2]
+        let bh = h[3] + h[3]
+        var r = parseInt(rh, 16),
+          g = parseInt(gh, 16),
+          b = parseInt(bh, 16)
+      }
+      if (h.length == 7) {
+        var r = parseInt(h.slice(1, 3), 16),
+          g = parseInt(h.slice(3, 5), 16),
+          b = parseInt(h.slice(5, 7), 16)
+      }
 
-			if (alpha) {
-				return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"
-			} else {
-				return "rgb(" + r + ", " + g + ", " + b + ")"
-			}
-		}
+      if (alpha) {
+        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")"
+      } else {
+        return "rgb(" + r + ", " + g + ", " + b + ")"
+      }
+    }
 
-		Object.keys(colors).forEach((color) => {
-			prefixes.forEach((prefix) => {
-				if (color == "white" || color == "black") {
-					let base = prefix + "-" + color
-					colorClasses.push(base)
+    Object.keys(colors).forEach((color) => {
+      prefixes.forEach((prefix) => {
+        if (color == "white" || color == "black") {
+          let base = prefix + "-" + color
+          colorClasses.push(base)
 
-					colorVariants.forEach((variant) => {
-						let baseVar = variant + "\\:" + prefix + "-" + color
-						colorClasses.push(baseVar)
-					})
-				} else {
-					return false
-				}
-			})
-		})
+          colorVariants.forEach((variant) => {
+            let baseVar = variant + "\\:" + prefix + "-" + color
+            colorClasses.push(baseVar)
+          })
+        } else {
+          return false
+        }
+      })
+    })
 
-		Object.keys(colors).forEach((color) => {
-			if (
-				color == "transparent" ||
-				color == "current" ||
-				color == "white" ||
-				color == "black"
-			) {
-				return false
-			} else {
-				prefixes.forEach((prefix) => {
-					weights.forEach((weight) => {
-						let base = prefix + "-" + color + "-" + weight
-						colorClasses.push(base)
-						colorVariants.forEach((variant) => {
-							let baseVar =
-								variant +
-								"\\:" +
-								prefix +
-								"-" +
-								color +
-								"-" +
-								weight
-							colorClasses.push(baseVar)
-						})
-					})
-				})
-			}
-		})
+    Object.keys(colors).forEach((color) => {
+      if (
+        color == "transparent" ||
+        color == "current" ||
+        color == "white" ||
+        color == "black"
+      ) {
+        return false
+      } else {
+        prefixes.forEach((prefix) => {
+          weights.forEach((weight) => {
+            let base = prefix + "-" + color + "-" + weight
+            colorClasses.push(base)
+            colorVariants.forEach((variant) => {
+              let baseVar =
+                variant + "\\:" + prefix + "-" + color + "-" + weight
+              colorClasses.push(baseVar)
+            })
+          })
+        })
+      }
+    })
 
-		if (theme("transitionDuration.nightwind") !== false) {
-			Object.keys(colors).forEach((color) => {
-				prefixes.forEach((prefix) => {
-					if (
-						color == "transparent" ||
-						color == "current" ||
-						color == "white" ||
-						color == "black"
-					) {
-						const transitionClass = {
-							[`.nightwind .${prefix}-${color}`]: {
-								transitionDuration: theme(
-									"transitionDuration.nightwind"
-								),
-								transitionProperty: theme(
-									"transitionProperty.colors"
-								),
-							},
-							[`.nightwind .dark\\:${prefix}-${color}`]: {
-								transitionDuration: theme(
-									"transitionDuration.nightwind"
-								),
-								transitionProperty: theme(
-									"transitionProperty.colors"
-								),
-							},
-						}
-						transitionClasses.push(transitionClass)
-					} else {
-						weights.forEach((weight) => {
-							const transitionClass = {
-								[`.nightwind .${prefix}-${color}-${weight}`]: {
-									transitionDuration: theme(
-										"transitionDuration.nightwind"
-									),
-									transitionProperty: theme(
-										"transitionProperty.colors"
-									),
-								},
-								[`.nightwind .dark\\:${prefix}-${color}-${weight}`]: {
-									transitionDuration: theme(
-										"transitionDuration.nightwind"
-									),
-									transitionProperty: theme(
-										"transitionProperty.colors"
-									),
-								},
-							}
-							transitionClasses.push(transitionClass)
-						})
-					}
-				})
-			})
-		}
+    if (theme("transitionDuration.nightwind") !== false) {
+      Object.keys(colors).forEach((color) => {
+        prefixes.forEach((prefix) => {
+          if (
+            color == "transparent" ||
+            color == "current" ||
+            color == "white" ||
+            color == "black"
+          ) {
+            const transitionClass = {
+              [`.nightwind .${prefix}-${color}`]: {
+                transitionDuration: theme("transitionDuration.nightwind"),
+                transitionProperty: theme("transitionProperty.colors"),
+              },
+              [`.nightwind .dark\\:${prefix}-${color}`]: {
+                transitionDuration: theme("transitionDuration.nightwind"),
+                transitionProperty: theme("transitionProperty.colors"),
+              },
+            }
+            transitionClasses.push(transitionClass)
+          } else {
+            weights.forEach((weight) => {
+              const transitionClass = {
+                [`.nightwind .${prefix}-${color}-${weight}`]: {
+                  transitionDuration: theme("transitionDuration.nightwind"),
+                  transitionProperty: theme("transitionProperty.colors"),
+                },
+                [`.nightwind .dark\\:${prefix}-${color}-${weight}`]: {
+                  transitionDuration: theme("transitionDuration.nightwind"),
+                  transitionProperty: theme("transitionProperty.colors"),
+                },
+              }
+              transitionClasses.push(transitionClass)
+            })
+          }
+        })
+      })
+    }
 
-		let whiteSelector = "#000"
-		let blackSelector = "#fff"
-		if (theme(`nightwind.colors.white`)) {
-			const colorMap = theme(`nightwind.colors.white`)
-			whiteSelector = theme(`colors.${colorMap}`)
-				? theme(`colors.${colorMap}`)
-				: colorMap
-		}
-		if (theme(`nightwind.colors.black`)) {
-			const colorMap = theme(`nightwind.colors.black`)
-			blackSelector = theme(`colors.${colorMap}`)
-				? theme(`colors.${colorMap}`)
-				: colorMap
-		}
+    let whiteSelector = "#000"
+    let blackSelector = "#fff"
+    if (theme(`nightwind.colors.white`)) {
+      const colorMap = theme(`nightwind.colors.white`)
+      whiteSelector = theme(`colors.${colorMap}`)
+        ? theme(`colors.${colorMap}`)
+        : colorMap
+    }
+    if (theme(`nightwind.colors.black`)) {
+      const colorMap = theme(`nightwind.colors.black`)
+      blackSelector = theme(`colors.${colorMap}`)
+        ? theme(`colors.${colorMap}`)
+        : colorMap
+    }
 
-		const nightwindClasses = colorClasses.map((colorClass) => {
-			let pseudoVariant = ""
+    const nightwindClasses = colorClasses.map((colorClass) => {
+      let pseudoVariant = ""
 
-			colorVariants.forEach((variant) => {
-				if (colorClass.includes(variant)) {
-					if (variant == "last" || variant == "first") {
-						pseudoVariant = variant + "-child"
-					} else if (variant == "odd") {
-						pseudoVariant = "nth-child(odd)"
-					} else if (variant == "even") {
-						pseudoVariant = "nth-child(2n)"
-					} else {
-						pseudoVariant = variant
-					}
-				}
-			})
+      colorVariants.forEach((variant) => {
+        if (colorClass.includes(variant)) {
+          if (variant == "last" || variant == "first") {
+            pseudoVariant = variant + "-child"
+          } else if (variant == "odd") {
+            pseudoVariant = "nth-child(odd)"
+          } else if (variant == "even") {
+            pseudoVariant = "nth-child(2n)"
+          } else {
+            pseudoVariant = variant
+          }
+        }
+      })
 
-			let colorValue = ""
-			let defaultColorValue = ""
-			if (colorClass.includes("white") || colorClass.includes("black")) {
-				colorValue = colorClass.includes("white")
-					? whiteSelector
-					: blackSelector
+      let colorValue = ""
+      let defaultColorValue = ""
+      if (colorClass.includes("white") || colorClass.includes("black")) {
+        colorValue = colorClass.includes("white")
+          ? whiteSelector
+          : blackSelector
 
-				defaultColorValue = colorClass.includes("white")
-					? theme("colors.white")
-					: theme("colors.black")
-			} else {
-				const colorValues = colorClass.split("-")
-				const weight = colorValues.pop()
-				const color = colorValues.pop()
+        defaultColorValue = colorClass.includes("white")
+          ? theme("colors.white")
+          : theme("colors.black")
+      } else {
+        const colorValues = colorClass.split("-")
+        const weight = colorValues.pop()
+        const color = colorValues.pop()
 
-				defaultColorValue = theme(`colors.${color}.${weight}`)
-				const invertWeightIndex = 9 - weights.indexOf(Number(weight))
-				const invertWeight = String(weights[invertWeightIndex])
+        defaultColorValue = theme(`colors.${color}.${weight}`)
+        let invertWeightIndex = 9 - weights.indexOf(Number(weight))
+        let invertWeight = String(weights[invertWeightIndex])
 
-				if (theme(`nightwind.colors.${color}.${weight}`)) {
-					const colorMap = theme(
-						`nightwind.colors.${color}.${weight}`
-					)
-					colorValue = theme(`colors.${colorMap}`)
-						? theme(`colors.${colorMap}`)
-						: colorMap
-				} else if (
-					theme(`nightwind.colors.${color}`) &&
-					typeof theme(`nightwind.colors.${color}`) === "string"
-				) {
-					const colorMap = theme(`nightwind.colors.${color}`)
-					if (theme(`colors.${colorMap}.${invertWeight}`)) {
-						colorValue = theme(`colors.${colorMap}.${invertWeight}`)
-					} else if (colorMap.split(".").length === 2) {
-						colorValue = theme(`colors.${colorMap}`)
-					} else if (
-						theme(`colors.${colorMap}`) &&
-						theme(`colors.${color}.${invertWeight}`)
-					) {
-						colorValue = theme(`colors.${color}.${invertWeight}`)
-					} else {
-						colorValue = colorMap
-					}
-				} else if (theme(`nightwind.colors.${color}.default`)) {
-					const colorMap = theme(`nightwind.colors.${color}.default`)
-					colorValue = theme(`colors.${colorMap}.${invertWeight}`)
-				} else {
-					colorValue = theme(`colors.${color}.${invertWeight}`)
-				}
-			}
+        if (theme("nightwind.colorScale.preset")) {
+          switch (theme("nightwind.colorScale.preset")) {
+            case "reduced":
+              let reducedInvertWeightIndex =
+                10 - weights.indexOf(Number(weight))
+              reducedInvertWeightIndex > 9
+                ? (reducedInvertWeightIndex = 9)
+                : reducedInvertWeightIndex
+              invertWeight = String(weights[reducedInvertWeightIndex])
+              break
+          }
+        } else if (theme("nightwind.colorScale")) {
+          if (theme(`nightwind.colorScale.${weight}`)) {
+            invertWeight = String(theme(`nightwind.colorScale.${weight}`))
+          }
+        }
 
-			const generateClass = (
-				prefix,
-				property,
-				additional = "",
-				variant = pseudoVariant
-			) => {
-				return {
-					[`.${darkSelector} .${colorClass}${variant}${additional}`]: {
-						[`${property}`]: colorValue,
-						[`${property}`]: hexToRGB(
-							`${colorValue}`,
-							`var(--tw-${prefix})`
-						),
-					},
-					[`.${darkSelector} .${fixedClass}.${colorClass}${variant}${additional}`]: {
-						[`${property}`]: defaultColorValue,
-						[`${property}`]: hexToRGB(
-							`${defaultColorValue}`,
-							`var(--tw-${prefix})`
-						),
-					},
-				}
-			}
+        if (theme(`nightwind.colors.${color}.${weight}`)) {
+          const colorMap = theme(`nightwind.colors.${color}.${weight}`)
+          colorValue = theme(`colors.${colorMap}`)
+            ? theme(`colors.${colorMap}`)
+            : colorMap
+        } else if (
+          theme(`nightwind.colors.${color}`) &&
+          typeof theme(`nightwind.colors.${color}`) === "string"
+        ) {
+          const colorMap = theme(`nightwind.colors.${color}`)
+          if (theme(`colors.${colorMap}.${invertWeight}`)) {
+            colorValue = theme(`colors.${colorMap}.${invertWeight}`)
+          } else if (colorMap.split(".").length === 2) {
+            colorValue = theme(`colors.${colorMap}`)
+          } else if (
+            theme(`colors.${colorMap}`) &&
+            theme(`colors.${color}.${invertWeight}`)
+          ) {
+            colorValue = theme(`colors.${color}.${invertWeight}`)
+          } else {
+            colorValue = colorMap
+          }
+        } else if (theme(`nightwind.colors.${color}.default`)) {
+          const colorMap = theme(`nightwind.colors.${color}.default`)
+          colorValue = theme(`colors.${colorMap}.${invertWeight}`)
+        } else {
+          colorValue = theme(`colors.${color}.${invertWeight}`)
+        }
+      }
 
-			if (colorClass.includes("text-")) {
-				return generateClass("text-opacity", "color")
-			} else if (colorClass.includes("bg-")) {
-				return generateClass("bg-opacity", "backgroundColor")
-			} else if (colorClass.includes("border-")) {
-				return generateClass("border-opacity", "borderColor")
-			} else if (colorClass.includes("divide-")) {
-				return generateClass(
-					"divide-opacity",
-					"borderColor",
-					" > :not([hidden]) ~ :not([hidden])"
-				)
-			} else if (colorClass.includes("placeholder-")) {
-				return generateClass(
-					"text-opacity",
-					"color",
-					"::placeholder",
-					""
-				)
-			} else if (colorClass.includes("ring-")) {
-				return generateClass("ring-opacity", "--tw-ring-color")
-			} else if (colorClass.includes("ring-offset-")) {
-				return {
-					[`.${darkSelector} .${colorClass}${pseudoVariant}`]: {
-						"--tw-ring-offset-color": `${colorValue}`,
-					},
-					[`.${darkSelector} .${fixedClass}.${colorClass}${pseudoVariant}`]: {
-						"--tw-ring-offset-color": `${defaultColorValue}`,
-					},
-				}
-			} else if (colorClass.includes("from-")) {
-				return {
-					[`.${darkSelector} .${colorClass}${pseudoVariant}`]: {
-						"--tw-gradient-from": colorValue,
-						"--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
-							`${colorValue}`,
-							"0"
-						)})`,
-					},
-					[`.${darkSelector} .${fixedClass}.${colorClass}${pseudoVariant}`]: {
-						"--tw-gradient-from": defaultColorValue,
-						"--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
-							`${defaultColorValue}`,
-							"0"
-						)})`,
-					},
-				}
-			} else if (colorClass.includes("via-")) {
-				return {
-					[`.${darkSelector} .${colorClass}${pseudoVariant}`]: {
-						"--tw-gradient-stops": `var(--tw-gradient-from), ${colorValue}, var(--tw-gradient-to, ${hexToRGB(
-							`${colorValue}`,
-							"0"
-						)})`,
-					},
-					[`.${darkSelector} .${fixedClass}.${colorClass}${pseudoVariant}`]: {
-						"--tw-gradient-stops": `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
-							`${defaultColorValue}`,
-							"0"
-						)})`,
-					},
-				}
-			} else if (colorClass.includes("to-")) {
-				return {
-					[`.${darkSelector} .${colorClass}${pseudoVariant}`]: {
-						"--tw-gradient-to": `${colorValue}`,
-					},
-					[`.${darkSelector} .${fixedClass}.${colorClass}${pseudoVariant}`]: {
-						"--tw-gradient-to": `${defaultColorValue}`,
-					},
-				}
-			}
-		})
+      const generateClass = (
+        prefix,
+        property,
+        additional = "",
+        variant = pseudoVariant
+      ) => {
+        return {
+          [`.${darkSelector} .${colorClass}${variant}${additional}`]: {
+            [`${property}`]: colorValue,
+            [`${property}`]: hexToRGB(`${colorValue}`, `var(--tw-${prefix})`),
+          },
+          [`.${darkSelector} .${fixedClass}.${colorClass}${variant}${additional}`]: {
+            [`${property}`]: defaultColorValue,
+            [`${property}`]: hexToRGB(
+              `${defaultColorValue}`,
+              `var(--tw-${prefix})`
+            ),
+          },
+        }
+      }
 
-		addComponents(nightwindClasses, { variants: ["responsive"] })
-		addComponents(transitionClasses, { variants: ["responsive"] })
-	},
-	{
-		theme: {
-			extend: {
-				transitionDuration: {
-					0: "0ms",
-					nightwind: "300ms",
-				},
-			},
-		},
-	},
-	{
-		purge: ["./node_modules/nightwind/**/*.js"],
-	}
+      if (colorClass.includes("text-")) {
+        return generateClass("text-opacity", "color")
+      } else if (colorClass.includes("bg-")) {
+        return generateClass("bg-opacity", "backgroundColor")
+      } else if (colorClass.includes("border-")) {
+        return generateClass("border-opacity", "borderColor")
+      } else if (colorClass.includes("divide-")) {
+        return generateClass(
+          "divide-opacity",
+          "borderColor",
+          " > :not([hidden]) ~ :not([hidden])"
+        )
+      } else if (colorClass.includes("placeholder-")) {
+        return generateClass("text-opacity", "color", "::placeholder", "")
+      } else if (colorClass.includes("ring-")) {
+        return generateClass("ring-opacity", "--tw-ring-color")
+      } else if (colorClass.includes("ring-offset-")) {
+        return {
+          [`.${darkSelector} .${colorClass}${pseudoVariant}`]: {
+            "--tw-ring-offset-color": `${colorValue}`,
+          },
+          [`.${darkSelector} .${fixedClass}.${colorClass}${pseudoVariant}`]: {
+            "--tw-ring-offset-color": `${defaultColorValue}`,
+          },
+        }
+      } else if (colorClass.includes("from-")) {
+        return {
+          [`.${darkSelector} .${colorClass}${pseudoVariant}`]: {
+            "--tw-gradient-from": colorValue,
+            "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
+              `${colorValue}`,
+              "0"
+            )})`,
+          },
+          [`.${darkSelector} .${fixedClass}.${colorClass}${pseudoVariant}`]: {
+            "--tw-gradient-from": defaultColorValue,
+            "--tw-gradient-stops": `var(--tw-gradient-from), var(--tw-gradient-to, ${hexToRGB(
+              `${defaultColorValue}`,
+              "0"
+            )})`,
+          },
+        }
+      } else if (colorClass.includes("via-")) {
+        return {
+          [`.${darkSelector} .${colorClass}${pseudoVariant}`]: {
+            "--tw-gradient-stops": `var(--tw-gradient-from), ${colorValue}, var(--tw-gradient-to, ${hexToRGB(
+              `${colorValue}`,
+              "0"
+            )})`,
+          },
+          [`.${darkSelector} .${fixedClass}.${colorClass}${pseudoVariant}`]: {
+            "--tw-gradient-stops": `var(--tw-gradient-from), ${defaultColorValue}, var(--tw-gradient-to, ${hexToRGB(
+              `${defaultColorValue}`,
+              "0"
+            )})`,
+          },
+        }
+      } else if (colorClass.includes("to-")) {
+        return {
+          [`.${darkSelector} .${colorClass}${pseudoVariant}`]: {
+            "--tw-gradient-to": `${colorValue}`,
+          },
+          [`.${darkSelector} .${fixedClass}.${colorClass}${pseudoVariant}`]: {
+            "--tw-gradient-to": `${defaultColorValue}`,
+          },
+        }
+      }
+    })
+
+    addComponents(nightwindClasses, { variants: ["responsive"] })
+    addComponents(transitionClasses, { variants: ["responsive"] })
+  },
+  {
+    theme: {
+      extend: {
+        transitionDuration: {
+          0: "0ms",
+          nightwind: "300ms",
+        },
+      },
+    },
+  },
+  {
+    purge: ["./node_modules/nightwind/**/*.js"],
+  }
 )
 
 module.exports = nightwind