fix: darkmode on radio button and checkbox labels (#1518)

Fixed Radio Button and Checkbox Appearance in Dark Mode
This commit is contained in:
Doug Andrade
2024-12-12 23:55:40 -05:00
committed by GitHub
parent 7d201f05d9
commit d7de3b08c1
4 changed files with 7 additions and 4 deletions

View File

@ -33,12 +33,12 @@ export const CheckboxField = ({ field }: CheckboxFieldProps) => {
parsedFieldMeta.values.map((item: { value: string; checked: boolean }, index: number) => (
<div key={index} className="flex items-center gap-x-1.5">
<Checkbox
className="h-3 w-3"
className="dark:border-field-border h-3 w-3 bg-white"
checkClassName="text-white"
id={`checkbox-${index}`}
checked={item.checked}
/>
<Label htmlFor={`checkbox-${index}`} className="text-xs">
<Label htmlFor={`checkbox-${index}`} className="text-xs font-normal text-black">
{item.value}
</Label>
</div>

View File

@ -34,12 +34,12 @@ export const RadioField = ({ field }: RadioFieldProps) => {
{parsedFieldMeta.values?.map((item, index) => (
<div key={index} className="flex items-center gap-x-1.5">
<RadioGroupItem
className="pointer-events-none h-3 w-3"
className="dark:border-field-border pointer-events-none h-3 w-3"
value={item.value}
id={`option-${index}`}
checked={item.checked}
/>
<Label htmlFor={`option-${index}`} className="text-xs">
<Label htmlFor={`option-${index}`} className="text-xs font-normal text-black">
{item.value}
</Label>
</div>