[BUG] Option labels in black in Dark Theme

[SalahAdDin]

Hello,

Thank you very much for this plugin, it is pretty cool for showing it to clients.

But we have a problem with it:

As you can see, in the dark theme, we can see the options, cause they are still in black.

How can we solve it?

Thank you!

[ShahriarKh]

The label's should have a color based on the current theme:

strapi-plugin-entity-relationship-chart/admin/src/pages/HomePage/index.js

Lines 142 to 153 in 337686e

	<label>
	<input type="checkbox" checked={relations} onChange={(e) => setRelations(e.target.checked)} /> relations
	<Legend />
	</label>
	<label>
	<input type="checkbox" checked={components} onChange={(e) => setComponents(e.target.checked)} /> components
	<Legend color="#ffc800"/>
	</label>
	<label>
	<input type="checkbox" checked={dynamiczones} onChange={(e) => setDynamiczones(e.target.checked)} /> dynamiczones
	<Legend color="#ff6400" />
	</label>

[SalahAdDin]

The label's should have a color based on the current theme:

strapi-plugin-entity-relationship-chart/admin/src/pages/HomePage/index.js

Lines 142 to 153 in 337686e

	<label>
	<input type="checkbox" checked={relations} onChange={(e) => setRelations(e.target.checked)} /> relations
	<Legend />
	</label>
	<label>
	<input type="checkbox" checked={components} onChange={(e) => setComponents(e.target.checked)} /> components
	<Legend color="#ffc800"/>
	</label>
	<label>
	<input type="checkbox" checked={dynamiczones} onChange={(e) => setDynamiczones(e.target.checked)} /> dynamiczones
	<Legend color="#ff6400" />
	</label>

It should, but it is not working, it seems this feature was not fully implemented.

[ShahriarKh]

Yeah I know. I meant that the label needs a dynamic color value; something like <label style="color: var(--color-based-on-current-theme)" >. However, I can't seem to find a way to get the current theme, and Strapi itself doesn't use css variables for this.

[ShahriarKh]

I checked other plugins sources, and they were using Strapi design system (https://design-system.strapi.io/) for components, so the colors and design matched the admin area perfectly.

[SalahAdDin]

It seems this plugin requires full refactoring.

[ShahriarKh]

I checked other plugins sources, and they were using Strapi design system (https://design-system.strapi.io/) for components, so the colors and design matched the admin area perfectly.

https://design-system-git-main-strapijs.vercel.app/?path=/story/design-system-components-checkbox--base

import { Checkbox } from "@strapi/design-system";

<Checkbox
    checked={relations}
    onValueChange={(e) => setRelations(e.target.checked)}
>
    relations
    <Legend color="#ff6400" /> 
</Checkbox>

[SalahAdDin]

I checked other plugin sources, and they were using the Strapi design system (https://design-system.strapi.io/) for components, so the colors and design matched the admin area perfectly.

https://design-system-git-main-strapijs.vercel.app/?path=/story/design-system-components-checkbox--base

import { Checkbox } from "@strapi/design-system";

<Checkbox
    checked={relations}
    onValueChange={(e) => setRelations(e.target.checked)}
>
    relations
    <Legend color="#ff6400" /> 
</Checkbox>

Could you make a pull request?