Update to use white text

Author: handotdev

snippets/color-generator.mdx

@@ -25,20 +25,20 @@ export const ColorGenerator = () => {
   }
 
   return (
-    <div className="p-4 border dark:border-zinc-800 rounded-xl bg-white dark:bg-gray-900/50 shadow-sm not-prose">
-      <p className="text-xl mb-4 font-semibold text-gray-800 dark:text-white">HSL Color Generator</p>
+    <div className="p-4 border dark:border-white/20 rounded-xl bg-white dark:bg-white/5 shadow-sm not-prose">
+      <p className="text-xl mb-4 font-semibold text-zinc-950/80 dark:text-white">HSL Color Generator</p>
 
       <div className="space-y-4">
         <div className="space-y-2">
-          <label className="block text-sm text-gray-700 dark:text-gray-300">
+          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
             Hue: {hue}°
             <input
               type="range"
               min="0"
               max="360"
               value={hue}
               onChange={(e) => setHue(Number.parseInt(e.target.value))}
-              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 mt-1"
+              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
               style={{
                 background: `linear-gradient(to right, 
                   hsl(0, ${saturation}%, ${lightness}%), 
@@ -52,15 +52,15 @@ export const ColorGenerator = () => {
             />
           </label>
 
-          <label className="block text-sm text-gray-700 dark:text-gray-300">
+          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
             Saturation: {saturation}%
             <input
               type="range"
               min="0"
               max="100"
               value={saturation}
               onChange={(e) => setSaturation(Number.parseInt(e.target.value))}
-              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 mt-1"
+              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
               style={{
                 background: `linear-gradient(to right, 
                   hsl(${hue}, 0%, ${lightness}%), 
@@ -70,15 +70,15 @@ export const ColorGenerator = () => {
             />
           </label>
 
-          <label className="block text-sm text-gray-700 dark:text-gray-300">
+          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
             Lightness: {lightness}%
             <input
               type="range"
               min="0"
               max="100"
               value={lightness}
               onChange={(e) => setLightness(Number.parseInt(e.target.value))}
-              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 mt-1"
+              className="w-full h-2 bg-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
               style={{
                 background: `linear-gradient(to right, 
                   hsl(${hue}, ${saturation}%, 0%), 
@@ -101,7 +101,7 @@ export const ColorGenerator = () => {
           ))}
         </div>
 
-        <div className="text-sm font-mono text-gray-700 dark:text-gray-300">
+        <div className="text-sm font-mono text-zinc-950/70 dark:text-white/70">
           <p>
             Base color: hsl({hue}, {saturation}%, {lightness}%)
           </p>