Sometimes a design of a website contains sections which have a background that is always dark, regardless of the color scheme chosen by the user. The code section of the Diete website is one example for this.
If you put (for example) a button on it, the colors of the button component will follow the color scheme chosen by the user and if the user has a light color scheme chosen the button won't be visible or readable.
It would be good to have an extra prop (called mode) which could be either light or dark and its default value would follow the system color scheme. With that it would be possible to override the system color scheme for a certain component and put components on always dark backgrounds, regardless of the system color scheme.
Sometimes a design of a website contains sections which have a background that is always dark, regardless of the color scheme chosen by the user. The
codesection of the Diete website is one example for this.If you put (for example) a button on it, the colors of the button component will follow the color scheme chosen by the user and if the user has a light color scheme chosen the button won't be visible or readable.
It would be good to have an extra prop (called
mode) which could be eitherlightordarkand its default value would follow the system color scheme. With that it would be possible to override the system color scheme for a certain component and put components on always dark backgrounds, regardless of the system color scheme.Similar previous issue and solution: https://github.com/snaha-net/diete.design/pull/323