Description

Inside theme.json, I don't understand why palette entries are based on the key "color" and not "slug".
Declaring an identical "color" several times with a different name and slug poses a problem.
By changing the color, the selection is multiple when it should be unique.

The case in point is the declination of CSS variables for a dark mode that will be overwritten.
For example, if I want to be able to separate the colors that will be overwritten in dark mode from those that won't be.

For example :

• standard variables that will be fixed and not overwritten in dark mode :
  blue-400
green-400

• the variables that will be overwritten in dark mode with "light-mode-to-dark-mode" syntax :
  blue-400-to-green-400
green-400-to-blue-400

The default Gutenberg result is :

body {
    --wp--preset--color--blue-400: #5F8DFF;
    --wp--preset--color--green-400: #6add05;
    --wp--preset--color--blue-400-to-green-400: #5F8DFF;
    --wp--preset--color--green-400-to-blue-400: #6add05;
}

and what I'd like to do after :

body.dark-mode {
    --wp--preset--color--blue-400-to-green-400: var(--wp--preset--color--green-400);
    --wp--preset--color--green-400-to-blue-400: var(--wp--preset--color--blue-400:);
}

Currently, for a hybrid theme, creating a /styles folder and duplicating the theme.json file with dark.json seems complicated. The theme.json file is already very long if you have to maintain several files on top of it.
And switching files from the front with a light/dark mode button doesn't seem possible.

If we can't declare several colors with the same "color" attribute, how do we go about giving the person administering the content (who isn't a developer or integrator) the option of using native gutenberg blocks (without using ACF blocks or any other solution) to define colors (background,color) that are supported in style.css for a dark mode variation ?

Step-by-step reproduction instructions

1. In theme.json, add this declaration :

"palette": [    
    {
        "name": "Bleu 400",
        "slug": "blue-400",
        "color": "#1547c3"
    },
    {
        "name": "Bleu 400 to Green 400",
        "slug": "blue-400-to-green-400",
        "color": "#1547c3"
    },
    {
        "name": "Green 400",
        "slug": "green-400",
        "color": "#6add05"
    },
    {
        "name": "Green 400 to Blue 400",
        "slug": "green-400-to-blue-400",
        "color": "#6add05"
    }
],

2. Inside admin, select a color

Screenshots, screen recording, code snippet

Environment info

• WP 6.5.5
• Custom theme (Hybrid) with theme.json
• Windows 10

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes