Only dark mode

[benja]

Would be nice if we could force dark mode overriding user's prefers-color-scheme preference through a prop, similar to disableDarkMode, something like forceDarkMode? or just a theme prop where you pass the theme you want.

I found this in the source code and tried applying it through the style prop, but it's not being applied.

export const darkStyles: Record<string, Record<string, string | number>> = {
    body: {
      background: 'rgb(32, 32, 32)',
    },
    rbgcpInputLabel: {
      color: 'rgb(212, 212, 212)',
    },
    rbgcpControlBtnWrapper: {
      background: 'rgb(54, 54, 54)',
    },
    rbgcpInput: {
      border: 'none',
      color: 'white',
      background: 'rgb(54, 54, 54)',
    },
    rbgcpControlBtn: {
      color: 'rgb(212, 212, 212)',
    },
    rbgcpControlIcon: {
      stroke: 'rgb(212, 212, 212)',
    },
    rbgcpControlIcon2: {
      fill: 'rgb(212, 212, 212)',
    },
    rbgcpControlInput: {
      color: 'white',
    },
    rbgcpControlBtnSelected: {
      background: 'black',
      color: '#568cf5',
    },
    rbgcpDegreeIcon: {
      color: 'rgb(212, 212, 212)',
    },
    rbgcpColorModelDropdown: {
      background: 'rgb(32, 32, 32)',
    },
    rbgcpComparibleLabel: {
      color: 'rgb(212, 212, 212)',
    }
}

My component

<CustomColorPicker
  style={{
      body: {
          background: 'rgb(32, 32, 32)',
      },
      rbgcpInputLabel: {
          color: 'rgb(212, 212, 212)',
      },
      rbgcpControlBtnWrapper: {
          background: 'rgb(54, 54, 54)',
      },
      rbgcpInput: {
          border: 'none',
          color: 'white',
          background: 'rgb(54, 54, 54)',
      },
      rbgcpControlBtn: {
          color: 'rgb(212, 212, 212)',
      },
      rbgcpControlIcon: {
          stroke: 'rgb(212, 212, 212)',
      },
      rbgcpControlIcon2: {
          fill: 'rgb(212, 212, 212)',
      },
      rbgcpControlInput: {
          color: 'white',
      },
      rbgcpControlBtnSelected: {
          background: 'black',
          color: '#568cf5',
      },
      rbgcpDegreeIcon: {
          color: 'rgb(212, 212, 212)',
      },
      rbgcpColorModelDropdown: {
          background: 'rgb(32, 32, 32)',
      },
      rbgcpComparibleLabel: {
          color: 'rgb(212, 212, 212)',
      },
  }}
   ...
/>

[hxf31891]

@benja can probably make that happen for you.

[hxf31891]

@benja there is a new prop added in v3.0.11 called disabledLightMode. Its not in the docs yet but it should be working.