Revert colors

Author: handotdev

snippets/color-generator.mdx

@@ -25,20 +25,20 @@ export const ColorGenerator = () => {
   }
 
   return (
-    <div className="p-4 border dark:border-zinc-950/80 rounded-xl bg-white dark:bg-zinc-950/80 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="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="space-y-4">
         <div className="space-y-2">
-          <label className="block text-sm text-zinc-950/70 dark:text-white/70">
+          <label className="block text-sm text-gray-700 dark:text-gray-300">
             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-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
+              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 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-zinc-950/70 dark:text-white/70">
+          <label className="block text-sm text-gray-700 dark:text-gray-300">
             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-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
+              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 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-zinc-950/70 dark:text-white/70">
+          <label className="block text-sm text-gray-700 dark:text-gray-300">
             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-zinc-950/20 rounded-lg appearance-none cursor-pointer dark:bg-white/20 mt-1"
+              className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700 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-zinc-950/70 dark:text-white/70">
+        <div className="text-sm font-mono text-gray-700 dark:text-gray-300">
           <p>
             Base color: hsl({hue}, {saturation}%, {lightness}%)
           </p>

snippets/counter.mdx

@@ -6,22 +6,22 @@ export const Counter = () => {
 
   return (
   <div className="flex items-center justify-center">
-      <div className="flex items-center rounded-lg overflow-hidden border border-zinc-950/20 dark:border-zinc-950/80 shadow-sm">
+      <div className="flex items-center rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm">
         <button
           onClick={decrement}
-          className="flex items-center justify-center h-8 w-8 bg-white hover:bg-zinc-950/10 text-zinc-950 dark:bg-zinc-950/80 dark:hover:bg-zinc-950/70 dark:text-zinc-100 border-r border-zinc-950/20 dark:border-zinc-950/80"
+          className="flex items-center justify-center h-8 w-8 bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800 dark:text-gray-200 border-r border-gray-200 dark:border-gray-700"
           aria-label="Decrease"
         >
           -
         </button>
 
-        <div className="flex text-sm items-center justify-center h-8 px-6 bg-white dark:bg-zinc-950/80 text-zinc-950 dark:text-zinc-100 font-medium min-w-[4rem] text-center">
+        <div className="flex text-sm items-center justify-center h-8 px-6 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-medium min-w-[4rem] text-center">
           {count}
         </div>
 
         <button
           onClick={increment}
-          className="flex items-center justify-center h-8 w-8 bg-white hover:bg-zinc-950/10 text-zinc-950 dark:bg-zinc-950/80 dark:hover:bg-zinc-950/70 dark:text-zinc-100 border-l border-zinc-950/20 dark:border-zinc-950/80"
+          className="flex items-center justify-center h-8 w-8 bg-white hover:bg-gray-100 text-gray-800 dark:bg-gray-900 dark:hover:bg-gray-800 dark:text-gray-200 border-l border-gray-200 dark:border-gray-700"
           aria-label="Increase"
         >
           +