✨ Add support for cursor text color customization and update documentation

Author: GuiEpi

src/index.tsx

@@ -37,6 +37,10 @@ const Cursor: React.FC<CursorProps> = ({
     return customDefaultColor || fallbackColor;
   }, [customDefaultColor]);
 
+  const defaultTextColor = useMemo(() => {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'hsl(240 10% 3.9%)' : 'hsl(0 0% 98%)';
+  }, []);
+
   const defaultVariants: Record<CursorType, CursorVariant> = {
     default: {
       style: {
@@ -206,7 +210,7 @@ const Cursor: React.FC<CursorProps> = ({
           ref={contentRef}
           className={`react-dot-cursor-content ${currentVariantData.content.className || ''}`}
           style={{
-            color: 'white',
+            color: `var(--cursor-text-color, ${defaultTextColor})`,
             fontSize: '16px',
             ...currentVariantData.content.style,
           }}

website/src/index.css

@@ -48,6 +48,7 @@
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
     --cursor-color: hsl(349, 80%, 59%);
+    --cursor-text-color: white;
   }
   .dark {
     --background: 240 10% 3.9%;
@@ -75,6 +76,7 @@
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
     --cursor-color: hsl(349, 80%, 59%);
+    --cursor-text-color: white;
   }
 }
 

website/src/pages/docs/styling.mdx

@@ -4,15 +4,12 @@
 
 ### <a name="using-css-variables"></a>Using CSS Variables
 
-You can style the cursor by setting the `--cursor-color` CSS variable using any **valid CSS color format**.
+You can style the cursor by setting the `--cursor-color` and `--cursor-text-color` CSS variable using any **valid CSS color format**.
 
 ```css
 :root {
-  --cursor-color: hsl(349 80% 59%); /* HSL */
-  --cursor-color: #ff4081; /* Hex */
-  --cursor-color: rgb(255 64 129); /* RGB */
-  --cursor-color: oklch(0.7 0.15 330); /* OKLCH */
-  --cursor-color: hotpink; /* Named color */
+  --cursor-color: hsl(349 80% 59%);
+  --cursor-text-color: white;
 }
 ```
 
@@ -24,12 +21,14 @@ The cursor automatically detects system dark mode preferences and adjusts its co
 /* Light mode */
 :root {
   --cursor-color: hsl(240 10% 3.9%);
+  --cursor-text-color: hsl(0 0% 98%);
 }
 
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
   :root {
     --cursor-color: hsl(0 0% 98%);
+    --cursor-text-color: hsl(240 10% 3.9%);
   }
 }
 ```