diff --git a/package.json b/package.json
index bc1db51..f621380 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.10",
+  "version": "3.0.11-beta.4",
   "description": "An easy to use color/gradient picker for React.js",
   "type": "module",
   "sideEffects": [
diff --git a/src/components/AdvancedControls.tsx b/src/components/AdvancedControls.tsx
index 064301b..168a2e8 100644
--- a/src/components/AdvancedControls.tsx
+++ b/src/components/AdvancedControls.tsx
@@ -66,10 +66,12 @@ const AdvBar = ({
     <div style={{ width: '100%', padding: '3px 0px 3px 0px' }}>
       <div
         onMouseMove={(e) => handleMove(e)}
+        // className="rbgcp-advanced-bar-wrap"
         style={{ cursor: 'resize', position: 'relative' }}
       >
         <div
           style={{ left, top: handleTop, ...defaultStyles.rbgcpHandle }}
+          // className="rbgcp-advanced-bar-handle"
           onMouseDown={handleDown}
           role="button"
           tabIndex={0}
@@ -88,6 +90,7 @@ const AdvBar = ({
             zIndex: 10,
             textShadow: '1px 1px 1px rgba(0,0,0,.6)',
           }}
+          // className="rbgcp-advanced-bar-label"
           onMouseMove={(e) => handleMove(e)}
           onClick={(e) => handleClick(e)}
           tabIndex={0}
@@ -103,6 +106,7 @@ const AdvBar = ({
           height="14px"
           width={`${squareWidth}px`}
           onClick={(e) => handleClick(e)}
+          // className="rbgcp-advanced-bar-canvas"
           style={{ position: 'relative', borderRadius: 14 }}
         />
       </div>
@@ -147,6 +151,7 @@ const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => {
         width: '100%',
         transition: 'all 120ms linear',
       }}
+      // className="rbgcp-advanced-controls-wrap"
     >
       <div
         style={{
@@ -158,6 +163,7 @@ const AdvancedControls = ({ openAdvanced }: { openAdvanced: boolean }) => {
           overflow: 'hidden',
           transition: 'height 100ms linear',
         }}
+        // className="rbgcp-advanced-controls-inner"
       >
         <AdvBar
           value={s}
diff --git a/src/components/ComparibleColors.tsx b/src/components/ComparibleColors.tsx
index ae17743..85dabdc 100644
--- a/src/components/ComparibleColors.tsx
+++ b/src/components/ComparibleColors.tsx
@@ -25,6 +25,7 @@ const ComparibleColors = ({
         width: '100%',
         transition: 'all 120ms linear',
       }}
+      // className="rbgcp-comparible-colors-wrap"
     >
       <div
         style={{
@@ -32,6 +33,7 @@ const ComparibleColors = ({
           display: openComparibles ? '' : 'none',
           position: 'relative',
         }}
+        // className="rbgcp-comparible-colors-inner"
       >
         <div
           style={{
@@ -43,6 +45,7 @@ const ComparibleColors = ({
             left: 2,
             ...defaultStyles.rbgcpComparibleLabel,
           }}
+          // className="rbgcp-comparible-colors-label"
         >
           Color Guide
         </div>
@@ -54,6 +57,7 @@ const ComparibleColors = ({
             marginTop: 3,
             ...defaultStyles.rbgcpComparibleLabel,
           }}
+          // className="rbgcp-comparible-colors-label"
         >
           Analogous
         </div>
@@ -74,6 +78,7 @@ const ComparibleColors = ({
             marginTop: 3,
             ...defaultStyles.rbgcpComparibleLabel,
           }}
+          // className="rbgcp-comparible-colors-label"
         >
           Monochromatic
         </div>
@@ -84,10 +89,12 @@ const ComparibleColors = ({
             display: 'flex',
             justifyContent: 'flex-end',
           }}
+          // className="rbgcp-comparible-colors-colors"
         >
           {monochromatic?.map((c: any, key: number) => (
             <div
               key={key}
+              // className="rbgcp-comparible-colors-color"
               style={{ width: '20%', height: 30, background: c.toHexString() }}
               onClick={() => handleClick(c)}
             />
@@ -101,6 +108,7 @@ const ComparibleColors = ({
             marginTop: 3,
             ...defaultStyles.rbgcpComparibleLabel,
           }}
+          // className="rbgcp-comparible-colors-label"
         >
           Triad
         </div>
@@ -111,10 +119,12 @@ const ComparibleColors = ({
             display: 'flex',
             justifyContent: 'flex-end',
           }}
+          // className="rbgcp-comparible-colors-colors"
         >
           {triad?.map((c: any, key: number) => (
             <div
               key={key}
+              // className="rbgcp-comparible-colors-color"
               style={{
                 width: 'calc(100% / 3)',
                 height: 28,
@@ -132,6 +142,7 @@ const ComparibleColors = ({
             marginTop: 3,
             ...defaultStyles.rbgcpComparibleLabel,
           }}
+          // className="rbgcp-comparible-colors-label"
         >
           Tetrad
         </div>
@@ -142,10 +153,12 @@ const ComparibleColors = ({
             display: 'flex',
             justifyContent: 'flex-end',
           }}
+          // className="rbgcp-comparible-colors-colors"
         >
           {tetrad?.map((c: any, key: number) => (
             <div
               key={key}
+              // className="rbgcp-comparible-colors-color"
               style={{ width: '25%', height: 28, background: c.toHexString() }}
               onClick={() => handleClick(c)}
             />
diff --git a/src/components/Controls.tsx b/src/components/Controls.tsx
index beff4cf..dbc9f0e 100644
--- a/src/components/Controls.tsx
+++ b/src/components/Controls.tsx
@@ -42,13 +42,15 @@ const ColorTypeBtns = ({
           onClick={setSolid}
           id="rbgcp-solid-btn"
           style={colorTypeBtnStyles(!isGradient, defaultStyles)}
+          // className="rbgcp-control-btn rbgcp-solid-btn"
         >
           {locales?.CONTROLS?.SOLID}
         </div>
         <div
           onClick={setGradient}
           id="rbgcp-gradient-btn"
-          style={colorTypeBtnStyles(isGradient || false, defaultStyles)}
+          style={colorTypeBtnStyles(isGradient ?? false, defaultStyles)}
+          // className="rbgcp-control-btn rbgcp-gradient-btn"
         >
           {locales?.CONTROLS?.GRADIENT}
         </div>
@@ -85,6 +87,7 @@ const InputTypeDropdown = ({
 
   return (
     <div
+      // className="rbgcp-color-model-dropdown"
       style={{
         visibility: openInputType ? 'visible' : 'hidden',
         zIndex: openInputType ? '' : -100,
@@ -153,8 +156,8 @@ const Controls = ({
   const noTools =
     hideEyeDrop && hideAdvancedSliders && hideColorGuide && hideInputType
 
-  const solidColor = previous?.color || defaultColor
-  const gradientColor = previous?.gradient || defaultGradient
+  const solidColor = previous?.color ?? defaultColor
+  const gradientColor = previous?.gradient ?? defaultGradient
 
   const setSolid = () => {
     onChange(solidColor)
@@ -190,6 +193,7 @@ const Controls = ({
             alignItems: 'center',
             justifyContent: 'space-between',
           }}
+          // className="rbgcp-controls-wrapper"
         >
           <ColorTypeBtns
             hideColorTypeBtns={hideColorTypeBtns}
@@ -205,42 +209,43 @@ const Controls = ({
                 display: noTools ? 'none' : '',
                 ...defaultStyles.rbgcpControlBtnWrapper,
               }}
+              // className="rbgcp-control-btn-wrapper"
             >
               {!hideEyeDrop && <EyeDropper onSelect={handleChange} />}
-              <div
-                id="rbgcp-advanced-btn"
-                onClick={() => setOpenAdvanced(!openAdvanced)}
-                style={{
-                  display: hideAdvancedSliders ? 'none' : 'flex',
-                  ...controlBtnStyles(openAdvanced, defaultStyles),
-                }}
-              >
-                <SlidersIcon color={openAdvanced ? '#568CF5' : ''} />
-              </div>
-              <div
-                id="rbgcp-comparibles-btn"
-                style={{
-                  display: hideColorGuide ? 'none' : 'flex',
-                  ...controlBtnStyles(openComparibles, defaultStyles),
-                }}
-                onClick={() => setOpenComparibles(!openComparibles)}
-              >
-                <PaletteIcon color={openComparibles ? '#568CF5' : ''} />
-              </div>
-              <div
-                id="rbgcp-color-model-btn"
-                onClick={() => setOpenInputType(!openInputType)}
-                style={{
-                  display: hideInputType ? 'none' : 'flex',
-                  ...controlBtnStyles(openInputType, defaultStyles),
-                }}
-              >
-                <InputsIcon color={openInputType ? '#568CF5' : ''} />
-                <InputTypeDropdown
-                  openInputType={openInputType}
-                  setOpenInputType={setOpenInputType}
-                />
-              </div>
+              {!hideAdvancedSliders && (
+                <div
+                  id="rbgcp-advanced-btn"
+                  onClick={() => setOpenAdvanced(!openAdvanced)}
+                  // className="rbgcp-control-btn rbgcp-advanced-btn"
+                  style={controlBtnStyles(openAdvanced, defaultStyles)}
+                >
+                  <SlidersIcon color={openAdvanced ? '#568CF5' : ''} />
+                </div>
+              )}
+              {!hideColorGuide && (
+                <div
+                  style={controlBtnStyles(openComparibles, defaultStyles)}
+                  onClick={() => setOpenComparibles(!openComparibles)}
+                  // className="rbgcp-control-btn rbgcp-comparibles-btn"
+                  id="rbgcp-comparibles-btn"
+                >
+                  <PaletteIcon color={openComparibles ? '#568CF5' : ''} />
+                </div>
+              )}
+              {!hideInputType && (
+                <div
+                  id="rbgcp-color-model-btn"
+                  onClick={() => setOpenInputType(!openInputType)}
+                  // className="rbgcp-control-btn rbgcp-color-model-btn"
+                  style={controlBtnStyles(openInputType, defaultStyles)}
+                >
+                  <InputsIcon color={openInputType ? '#568CF5' : ''} />
+                  <InputTypeDropdown
+                    openInputType={openInputType}
+                    setOpenInputType={setOpenInputType}
+                  />
+                </div>
+              )}
             </div>
           )}
         </div>
diff --git a/src/components/EyeDropper.tsx b/src/components/EyeDropper.tsx
index b2bd11f..40b09e7 100644
--- a/src/components/EyeDropper.tsx
+++ b/src/components/EyeDropper.tsx
@@ -9,7 +9,7 @@ import { usePicker } from '../context.js'
 
 const DropperIcon = ({ color }: { color: string }) => {
   const { defaultStyles } = usePicker()
-  const col = color || ''
+  const col = color ?? ''
   return (
     <svg
       id="Layer_1"
diff --git a/src/components/GradientBar.tsx b/src/components/GradientBar.tsx
index 8e1f474..70d7b4e 100644
--- a/src/components/GradientBar.tsx
+++ b/src/components/GradientBar.tsx
@@ -56,12 +56,14 @@ export const Handle = ({
       // onFocus={handleFocus}
       id={`gradient-handle-${i}`}
       onMouseDown={(e) => handleDown(e)}
+      // className="rbgcp-gradient-handle-wrap"
       style={{
         ...defaultStyles.rbgcpGradientHandleWrap,
-        left: (left || 0) * leftMultiplyer,
+        left: (left ?? 0) * leftMultiplyer,
       }}
     >
       <div
+        // className="rbgcp-gradient-handle"
         style={{
           ...defaultStyles.rbgcpGradientHandle,
           ...(isSelected ? { boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)', border: '2px solid white' } : {}),
@@ -75,6 +77,7 @@ export const Handle = ({
               borderRadius: '50%',
               background: 'white',
             }}
+            // className="rbgcp-gradient-handle-selected-dot"
           />
         )}
       </div>
@@ -164,6 +167,7 @@ const GradientBar = () => {
         position: 'relative',
       }}
       id="gradient-bar"
+      // className="rbgcp-gradient-bar"
     >
       <div
         style={{
@@ -174,6 +178,7 @@ const GradientBar = () => {
         }}
         onMouseDown={(e) => handleDown(e)}
         onMouseMove={(e) => handleMove(e)}
+        // className="rbgcp-gradient-bar-canvas"
       />
       {colors?.map((c: any, i) => (
         <Handle
diff --git a/src/components/GradientControls.tsx b/src/components/GradientControls.tsx
index b0a32d1..25a4504 100644
--- a/src/components/GradientControls.tsx
+++ b/src/components/GradientControls.tsx
@@ -29,7 +29,11 @@ const GradientType = () => {
       <div
         onClick={handleLinear}
         id="rbgcp-linear-btn"
-        style={{ ...defaultStyles.rbgcpControlBtn, ...(isLinear && defaultStyles.rbgcpControlBtnSelected) }}
+        // className="rbgcp-control-icon-btn rbgcp-linear-btn"
+        style={{
+          ...defaultStyles.rbgcpControlBtn,
+          ...(isLinear && defaultStyles.rbgcpControlBtnSelected),
+        }}
         tabIndex={0}
         role="button"
         onKeyDown={() => {
@@ -41,7 +45,11 @@ const GradientType = () => {
       <div
         onClick={handleRadial}
         id="rbgcp-radial-btn"
-        style={{ ...defaultStyles.rbgcpControlBtn, ...(isRadial && defaultStyles.rbgcpControlBtnSelected) }}
+        // className="rbgcp-control-icon-btn rbgcp-radial-btn"
+        style={{
+          ...defaultStyles.rbgcpControlBtn,
+          ...(isRadial && defaultStyles.rbgcpControlBtnSelected),
+        }}
         tabIndex={0}
         role="button"
         onKeyDown={() => {
@@ -63,6 +71,7 @@ const StopPicker = () => {
 
   return (
     <div
+      // className="rbgcp-stop-input-wrap"
       style={{
         ...defaultStyles.rbgcpControlBtnWrapper,
         ...defaultStyles.rbgcpControlInputWrap,
@@ -75,7 +84,11 @@ const StopPicker = () => {
         value={currentLeft}
         id="rbgcp-stop-input"
         onChange={(e) => handleMove(e.target.value)}
-        style={{ ...defaultStyles.rbgcpControlInput, ...defaultStyles.rbgcpStopInput }}
+        style={{
+          ...defaultStyles.rbgcpControlInput,
+          ...defaultStyles.rbgcpStopInput,
+        }}
+        // className="rbgcp-control-input rbgcp-stop-input"
       />
     </div>
   )
@@ -87,11 +100,12 @@ const DegreePicker = () => {
   const handleDegrees = (e: any) => {
     const newValue = formatInputValues(e.target.value, 0, 360)
     const remaining = value.split(/,(.+)/)[1]
-    onChange(`linear-gradient(${newValue || 0}deg, ${remaining}`)
+    onChange(`linear-gradient(${newValue ?? 0}deg, ${remaining}`)
   }
 
   return (
     <div
+      // className="rbgcp-degree-input-wrap"
       style={{
         ...defaultStyles.rbgcpControlBtnWrapper,
         ...defaultStyles.rbgcpControlInputWrap,
@@ -103,12 +117,14 @@ const DegreePicker = () => {
         value={degrees}
         id="rbgcp-degree-input"
         onChange={(e) => handleDegrees(e)}
+        // className="rbgcp-control-input rbgcp-degree-input"
         style={{
           ...defaultStyles.rbgcpControlInput,
           ...defaultStyles.rbgcpDegreeInput,
         }}
       />
       <div
+        // className="rbgcp-degree-circle-icon"
         style={{
           ...defaultStyles.rbgcpDegreeIcon,
           position: 'absolute',
@@ -145,6 +161,7 @@ const DeleteBtn = () => {
       onClick={deletePoint}
       style={{ ...controlBtnStyles(false, defaultStyles), width: 28 }}
       id="rbgcp-point-delete-btn"
+      // className="rbgcp-control-btn rbgcp-point-delete-btn"
       tabIndex={0}
       role="button"
       onKeyDown={() => {
@@ -176,6 +193,7 @@ const GradientControls = ({
         paddingLeft: hideGradientType ? 4 : 0,
       }}
       id="rbgcp-gradient-controls-wrap"
+      // className="rbgcp-gradient-controls-wrap"
     >
       {!hideGradientType && <GradientType />}
       <div style={{ width: 53 }}>
diff --git a/src/components/Hue.tsx b/src/components/Hue.tsx
index 6569f67..c0c5176 100644
--- a/src/components/Hue.tsx
+++ b/src/components/Hue.tsx
@@ -60,10 +60,12 @@ const Hue = () => {
         position: 'relative',
       }}
       onMouseMove={(e) => handleMove(e)}
+      // className="rbgcp-hue-wrap"
     >
       <div
         tabIndex={0}
         role="button"
+        // className="rbgcp-handle rbgcp-handle-hue"
         style={{
           border: '2px solid white',
           borderRadius: '50%',
@@ -83,6 +85,7 @@ const Hue = () => {
       <canvas
         ref={barRef}
         height="14px"
+        // className="rbgcp-hue-bar"
         width={`${squareWidth}px`}
         onClick={(e) => handleClick(e)}
         style={{ position: 'relative', borderRadius: 14, verticalAlign: 'top' }}
diff --git a/src/components/Inputs.tsx b/src/components/Inputs.tsx
index c92c815..cd0e94a 100644
--- a/src/components/Inputs.tsx
+++ b/src/components/Inputs.tsx
@@ -36,6 +36,7 @@ const Input = ({
         id="rbgcp-input"
         onChange={(e) => onChange(e)}
         style={{ ...defaultStyles.rbgcpInput }}
+        // className="rbgcp-input"
       />
       <div style={{ ...defaultStyles.rbgcpInputLabel }}>{label}</div>
     </div>
diff --git a/src/components/Opacity.tsx b/src/components/Opacity.tsx
index d27b110..559584f 100644
--- a/src/components/Opacity.tsx
+++ b/src/components/Opacity.tsx
@@ -60,15 +60,19 @@ const Opacity = () => {
         cursor: 'ew-resize',
         position: 'relative',
       }}
+      // className="rbgcp-opacity-wrap"
     >
       <div
+        // className="rbgcp-opacity-checkered"
         style={{ ...defaultStyles.rbgcpCheckered, width: '100%', height: 14 }}
       />
       <div
+        // className="rbgcp-handle rbgcp-handle-opacity"
         style={{ ...defaultStyles.rbgcpHandle, left: left * hc?.a, top: -2 }}
       />
       <div
         style={{ ...defaultStyles.rbgcpOpacityOverlay, background: bg }}
+        // className="rbgcp-opacity-overlay"
         onClick={(e) => handleClick(e)}
         
       />
diff --git a/src/components/Picker.tsx b/src/components/Picker.tsx
index 2ec65da..1f572b9 100644
--- a/src/components/Picker.tsx
+++ b/src/components/Picker.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-
 import Hue from './Hue.js'
 import Inputs from './Inputs.js'
 import Square from './Square.js'
diff --git a/src/components/Portal.tsx b/src/components/Portal.tsx
index 41158ca..81483ec 100644
--- a/src/components/Portal.tsx
+++ b/src/components/Portal.tsx
@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom'
 const Portal = ({ children }: { children: ReactNode }) => {
   const id = 'id' + Math.random().toString(16).slice(2)
   const el = useRef(
-    document.getElementById(id) || document.createElement('div')
+    document.getElementById(id) ?? document.createElement('div')
   )
   const [dynamic] = useState(!el.current.parentElement)
 
diff --git a/src/components/Presets.tsx b/src/components/Presets.tsx
index b149e12..2c772e8 100644
--- a/src/components/Presets.tsx
+++ b/src/components/Presets.tsx
@@ -30,6 +30,7 @@ const Presets = ({ presets = [] }: { presets?: string[] }) => {
         marginTop: 14,
         justifyContent: 'space-between',
       }}
+      // className="rbgcp-presets-wrap"
     >
       <div
         style={{
@@ -39,6 +40,7 @@ const Presets = ({ presets = [] }: { presets?: string[] }) => {
           borderRadius: 6,
           flexShrink: 0,
         }}
+        // className="rbgcp-preset-color-preview"
       />
       <div
         style={{
@@ -47,6 +49,7 @@ const Presets = ({ presets = [] }: { presets?: string[] }) => {
           width: squareWidth - 66,
           justifyContent: 'space-between',
         }}
+        // className="rbgcp-presets-list"
       >
         {getPresets().map((p: any, key: number) => (
           <div
@@ -59,6 +62,7 @@ const Presets = ({ presets = [] }: { presets?: string[] }) => {
               marginBottom: 2,
               border: p === 'rgba(255,255,255, 1)' ? '1px solid #96959c' : '',
             }}
+            // className="rbgcp-preset-color"
             onClick={() => handlePresetClick(p)}
           />
         ))}
diff --git a/src/components/Square.tsx b/src/components/Square.tsx
index 5b365b6..4d7f464 100644
--- a/src/components/Square.tsx
+++ b/src/components/Square.tsx
@@ -96,22 +96,26 @@ const Square = () => {
         onTouchStart={handleCanvasDown}
         onMouseMove={(e) => handleMove(e)}
         style={{ position: 'relative', cursor: 'ew-cross' }}
+        // className="rbgcp-square-wrap"
       >
         <div
           style={{
             ...defaultStyles.rbgcpHandle,
-            transform: `translate(${dragPos?.x || 0}px, ${dragPos?.y || 0}px)`,
-            ...(dragging ? { transition: "" } : {}),
+            transform: `translate(${dragPos?.x ?? 0}px, ${dragPos?.y ?? 0}px)`,
+            ...(dragging ? { transition: '' } : {}),
           }}
           onMouseDown={handleMouseDown}
+          // className="rbgcp-handle rbgcp-handle-square"
         />
         <div
           style={{ ...defaultStyles.rbgcpCanvasWrapper, height: squareHeight }}
+          // className="rbgcp-canvas-wrapper"
           onClick={(e) => handleClick(e)}
         >
           <canvas
             ref={canvas}
             id="paintSquare"
+            // className="rbgcp-canvas"
             width={`${squareWidth}px`}
             height={`${squareHeight}px`}
           />
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
index 016fc11..b206948 100644
--- a/src/components/icon.tsx
+++ b/src/components/icon.tsx
@@ -35,7 +35,7 @@ export default TrashIcon
 export const LinearIcon = ({ color }: ColorProps) => {
   const { defaultStyles } = usePicker()
 
-  const col = color || ''
+  const col = color ?? ''
   const styles = {
     fill: 'none',
     strokeWidth: '1.8px',
@@ -65,7 +65,7 @@ export const LinearIcon = ({ color }: ColorProps) => {
 export const RadialIcon = ({ color }: ColorProps) => {
   const { defaultStyles } = usePicker()
 
-  const col = color || ''
+  const col = color ?? ''
   const styles = {
     fill: 'none',
     strokeMiterlimit: 10,
@@ -106,7 +106,7 @@ export const RadialIcon = ({ color }: ColorProps) => {
 export const SlidersIcon = ({ color }: ColorProps) => {
   const { defaultStyles } = usePicker()
 
-  const col = color || ''
+  const col = color ?? ''
   const style1 = {
     fill: 'none',
     strokeWidth: '1.8px',
@@ -202,7 +202,7 @@ export const SlidersIcon = ({ color }: ColorProps) => {
 export const InputsIcon = ({ color }: ColorProps) => {
   const { defaultStyles } = usePicker()
 
-  const col = color || ''
+  const col = color ?? ''
   const style1 = {
     fill: 'none',
     strokeWidth: '1.8px',
@@ -252,7 +252,7 @@ export const InputsIcon = ({ color }: ColorProps) => {
 export const PaletteIcon = ({ color }: ColorProps) => {
   const { defaultStyles } = usePicker()
 
-  const col = color || ''
+  const col = color ?? ''
   const style2 = {
     strokeMiterlimit: 10,
     strokeWidth: '0.5px',
@@ -317,7 +317,7 @@ export const PaletteIcon = ({ color }: ColorProps) => {
 export const DegreesIcon = ({ color }: { color?: string }) => {
   const { defaultStyles } = usePicker()
 
-  const col = color || ''
+  const col = color ?? ''
   const style2 = {
     fill: 'none',
     strokeMiterlimit: 10,
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 5304ab0..f2b62cd 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React, { useRef } from 'react'
+import React from 'react'
 import PickerContextWrapper from '../context.js'
 import Picker from './Picker.js'
 import { ColorPickerProps } from '../shared/types.js'
@@ -31,14 +31,15 @@ export function ColorPicker({
   style = {},
   className,
   disableDarkMode = false,
+  disableLightMode = false,
 }: ColorPickerProps) {
   const safeValue = objectToString(value)
-  const contRef = useRef<HTMLDivElement>(null)
-  const defaultStyles = getStyles(disableDarkMode)
+  // const contRef = useRef<HTMLDivElement>(null)
+  const defaultStyles = getStyles(disableDarkMode, disableLightMode)
 
   return (
     <div
-      ref={contRef}
+      // ref={contRef}
       className={className}
       style={{ ...defaultStyles.body, ...style, width: width }}
     >
diff --git a/src/hooks/useColorPicker.ts b/src/hooks/useColorPicker.ts
index 8255dd8..dc99816 100644
--- a/src/hooks/useColorPicker.ts
+++ b/src/hooks/useColorPicker.ts
@@ -85,12 +85,12 @@ export const useColorPicker = (
   }
 
   const setSolid = (startingColor: string) => {
-    const newValue = startingColor || defaultColor
+    const newValue = startingColor ?? defaultColor
     onChange(newValue)
   }
 
   const setGradient = (startingGradiant: string) => {
-    const newValue = startingGradiant || defaultGradient
+    const newValue = startingGradiant ?? defaultGradient
     onChange(newValue)
   }
 
@@ -107,7 +107,7 @@ export const useColorPicker = (
   const handleGradient = (newColor: string, left?: number) => {
     const remaining = colors?.filter((c: ColorsProps) => !isUpperCase(c.value))
     const newColors = [
-      { value: newColor.toUpperCase(), left: left || currentLeft },
+      { value: newColor.toUpperCase(), left: left ?? currentLeft },
       ...remaining,
     ]
     createGradientStr(newColors)
@@ -214,7 +214,7 @@ export const useColorPicker = (
 
   const deletePoint = (index: number) => {
     if (colors?.length > 2) {
-      const pointToDelete = index || selectedColor
+      const pointToDelete = index ?? selectedColor
       const remaining = colors?.filter(
         (rc: ColorsProps, i: number) => i !== pointToDelete
       )
diff --git a/src/shared/types.ts b/src/shared/types.ts
index 40a850c..ed444a1 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -22,6 +22,7 @@ export type ColorPickerProps = {
   className?: any
   locales?: LocalesProps
   disableDarkMode?: boolean
+  disableLightMode?: boolean
 }
 
 export type ColorsProps = {
diff --git a/src/styles/styles.ts b/src/styles/styles.ts
index 916dd0c..9db90f0 100644
--- a/src/styles/styles.ts
+++ b/src/styles/styles.ts
@@ -92,6 +92,7 @@ const styles: Styles = {
     color: 'black',
     fontWeight: 400,
     textAlign: 'center',
+    background: 'transparent'
   },
   rbgcpHandle: {
     position: 'absolute',
@@ -178,9 +179,9 @@ const styles: Styles = {
   }
 };
 
-export const getStyles = (disableDarkMode: boolean) => {
+export const getStyles = (disableDarkMode: boolean, disableLightMode: boolean) => {
   if (typeof window === 'undefined' || disableDarkMode) return styles;
-  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches || disableLightMode) {
     for (const key in darkStyles) {
       if (Object.prototype.hasOwnProperty.call(darkStyles, key)) {
         (styles as Record<string, any>)[key] = {