3.0.12

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-best-gradient-color-picker",
-  "version": "3.0.11-beta.4",
+  "version": "3.0.12",
   "description": "An easy to use color/gradient picker for React.js",
   "type": "module",
   "sideEffects": [

src/components/Controls.tsx

@@ -185,7 +185,7 @@ const Controls = ({
     }
   } else {
     return (
-      <div style={{ paddingTop: 12, paddingBottom: 4 }}>
+      <div style={{ paddingBottom: 4 }}>
         <div
           style={{
             width: '100%',

src/components/Picker.tsx

@@ -13,13 +13,15 @@ const Picker = ({
   locales,
   presets,
   hideHue,
+  pickerId,
   hideInputs,
   hidePresets,
   hideOpacity,
   hideEyeDrop,
   hideControls,
   hideInputType,
   hideColorGuide,
+  hidePickerSquare,
   hideGradientType,
   hideGradientStop,
   hideGradientAngle,
@@ -30,8 +32,8 @@ const Picker = ({
   const { isGradient } = usePicker()
 
   return (
-    <div style={{ userSelect: 'none' }} id="rbgcp-wrapper">
-      <Square />
+    <div style={{ userSelect: 'none' }} id={pickerId ?? 'rbgcp-color-picker'}>
+      {!hidePickerSquare && <Square />}
       {!hideControls && (
         <Controls
           locales={locales}
@@ -74,4 +76,6 @@ type PickerProps = {
   hideGradientStop?: boolean
   hideGradientControls?: boolean
   locales?: LocalesProps
+  pickerId?: string
+  hidePickerSquare?: boolean
 }

src/components/Presets.tsx

@@ -5,7 +5,7 @@ import { usePicker } from '../context.js'
 import { fakePresets } from '../constants.js'
 
 const Presets = ({ presets = [] }: { presets?: string[] }) => {
-  const { value, onChange, handleChange, squareWidth } = usePicker()
+  const { value, onChange, handleChange, squareWidth, isDarkMode } = usePicker()
 
   const getPresets = () => {
     if (presets?.length > 0) {
@@ -23,6 +23,15 @@ const Presets = ({ presets = [] }: { presets?: string[] }) => {
     }
   }
 
+  const getBorder = (p: string) => {
+    if (!p || isDarkMode) return ''
+    const c = p?.replace(' ', '');
+    if (c === 'rgba(255,255,255,1)') {
+      return '1px solid #96959c'
+    }
+    return ''
+  }
+
   return (
     <div
       style={{
@@ -39,6 +48,7 @@ const Presets = ({ presets = [] }: { presets?: string[] }) => {
           background: value,
           borderRadius: 6,
           flexShrink: 0,
+          border: getBorder(value),
         }}
         // className="rbgcp-preset-color-preview"
       />
@@ -60,7 +70,7 @@ const Presets = ({ presets = [] }: { presets?: string[] }) => {
               borderRadius: 4,
               background: p,
               marginBottom: 2,
-              border: p === 'rgba(255,255,255,1)' ? '1px solid #96959c' : '',
+              border: getBorder(p),
             }}
             // className="rbgcp-preset-color"
             onClick={() => handlePresetClick(p)}

src/components/Square.tsx

@@ -88,7 +88,7 @@ const Square = () => {
   }, [])
 
   return (
-    <div style={{ position: 'relative' }}>
+    <div style={{ position: 'relative', marginBottom: 12 }}>
       <div
         onMouseUp={stopDragging}
         onTouchEnd={stopDragging}

src/components/index.tsx

@@ -8,6 +8,7 @@ import { objectToString } from '../utils/utils.js'
 import { getStyles } from '../styles/styles.js'
 
 export function ColorPicker({
+  id,
   value = 'rgba(175, 51, 242, 1)',
   onChange,
   hideControls = false,
@@ -32,10 +33,25 @@ export function ColorPicker({
   className,
   disableDarkMode = false,
   disableLightMode = false,
+  hidePickerSquare = false,
 }: ColorPickerProps) {
   const safeValue = objectToString(value)
+    const isDarkMode =
+      typeof window === 'undefined' || disableDarkMode
+        ? false
+        : window.matchMedia('(prefers-color-scheme: dark)').matches ||
+            disableLightMode
+          ? true
+          : false
   // const contRef = useRef<HTMLDivElement>(null)
-  const defaultStyles = getStyles(disableDarkMode, disableLightMode)
+  const defaultStyles = getStyles(isDarkMode)
+  const pickerId = id
+    ? id
+    : !disableDarkMode && !disableLightMode
+      ? 'rbgcp-color-picker'
+      : disableDarkMode
+        ? 'rbgcp-color-picker-light'
+        : 'rbgcp-color-picker-dark'
 
   return (
     <div
@@ -48,10 +64,12 @@ export function ColorPicker({
         onChange={onChange}
         squareWidth={width}
         squareHeight={height}
+        isDarkMode={isDarkMode}
         hideOpacity={hideOpacity}
         defaultStyles={defaultStyles}
       >
         <Picker
+          pickerId={pickerId}
           hideControls={hideControls}
           hideInputs={hideInputs}
           hidePresets={hidePresets}
@@ -67,6 +85,7 @@ export function ColorPicker({
           hideGradientAngle={hideGradientAngle}
           hideGradientStop={hideGradientStop}
           hideGradientControls={hideGradientControls}
+          hidePickerSquare={hidePickerSquare}
           locales={locales}
         />
       </PickerContextWrapper>

src/context.tsx

@@ -16,6 +16,7 @@ export default function PickerContextWrapper({
   value,
   children,
   onChange,
+  isDarkMode,
   squareWidth,
   hideOpacity,
   squareHeight,
@@ -91,6 +92,7 @@ export default function PickerContextWrapper({
     previous,
     inputType,
     tinyColor,
+    isDarkMode,
     isGradient,
     squareWidth,
     hideOpacity,
@@ -132,6 +134,7 @@ type PCWProps = {
   hideOpacity: boolean
   onChange: (arg0: string) => void
   defaultStyles: Styles
+  isDarkMode: boolean
 }
 
 export type PickerContextProps = {
@@ -161,4 +164,5 @@ export type PickerContextProps = {
     color?: string
     gradient?: string
   }
+  isDarkMode: boolean
 }

src/shared/types.ts

@@ -1,4 +1,5 @@
 export type ColorPickerProps = {
+  id?: string
   value?: string
   onChange: (value: string) => void
   hideControls?: boolean
@@ -23,6 +24,7 @@ export type ColorPickerProps = {
   locales?: LocalesProps
   disableDarkMode?: boolean
   disableLightMode?: boolean
+  hidePickerSquare?: boolean
 }
 
 export type ColorsProps = {

src/styles/styles.ts

@@ -179,23 +179,24 @@ const styles: Styles = {
   }
 };
 
-export const getStyles = (disableDarkMode: boolean, disableLightMode: boolean) => {
-  if (typeof window === 'undefined' || disableDarkMode) return styles;
-  if (window.matchMedia("(prefers-color-scheme: dark)").matches || disableLightMode) {
+export const getStyles = (isDarkMode: boolean) => {
+  if (isDarkMode) {
     const mergedStyles = { ...styles }
     for (const key in darkStyles) {
       if (Object.prototype.hasOwnProperty.call(darkStyles, key)) {
-        (mergedStyles as Record<string, any>)[key] = {
-          ...(Object.prototype.hasOwnProperty.call(mergedStyles, key) ? (mergedStyles as Record<string, any>)[key] : {}),
+        ;(mergedStyles as Record<string, any>)[key] = {
+          ...(Object.prototype.hasOwnProperty.call(mergedStyles, key)
+            ? (mergedStyles as Record<string, any>)[key]
+            : {}),
           ...(darkStyles as Record<string, any>)[key],
-        };
+        }
       }
     }
 
-    return mergedStyles;
-  } 
-  return styles;
-};
+    return mergedStyles
+  }
+  return styles
+}
 
 export const colorTypeBtnStyles = (selected: boolean, styles: Styles): React.CSSProperties => {
   if (selected) {