[FEATURE REQUEST] Improve default theme/dark mode support

[ltickett]

We recently switched from vue3-apexcharts: https://gitlab.com/gitlab-org/developer-relations/contributor-success/contributors-gitlab-com/-/merge_requests/1445

Thank you for all your amazing support already!

We were surprised we needed to configure as much theming/styling and implement light/dark mode detection: https://gitlab.com/gitlab-org/developer-relations/contributor-success/contributors-gitlab-com/-/blob/main/contributors/app/javascript/pages/dashboard-page/chartConfig.js

It feels like we might have missed something.

Should it be possible to leverage vue-data-ui without setting up the basic styling/theme and automatic dark mode handling?

Thanks

cc @dennismeister93

[graphieros]

@ltickett
@dennismeister93

You did not miss anything, configuration was designed to be very granular, yet your request makes sense, since a dark theme is currently missing.

I was thinking of adding a "dark" theme option (config.theme: 'dark'; light mode being the default theme), so it's not completely automatic, you would still have to do something like:

const commonConfig = computed(() => ({
  theme: isDarkMode ? 'dark' : ''
}))

Using this theme, all backgrounds and label colors would be set for dark mode, while keeping the freedom to use custom colors if needed.

I'll start working on it as soon as possible.

Cheers

[ltickett]

I think that would be a big step in the right direction.

I just had a look and the default (light mode) isn't too far off:

Perhaps the X, Y, and total labels could be a little darker.

I don't pretend to be an accessibility expert, but I think this falls below the expected contrast:

@dennismeister93 can you speak for any of the other changes you had to make to get it polished from the out of the box styling?

Perhaps the best approach is to iterate? First we introduce dark mode, then we look if there are any quick wins with regard to the default styling?

Although i'm unsure how you deal with breaking changes (potentially just by using semver).

Thanks as always. Don't hesitate to ask if we can help in anyway.

[graphieros]

@ltickett

I agree, dark mode first and we'll iterate if necessary.
The label colors I'm seeing on your screenshot do not correspond to label defaults (which is #2D353C, with a contrast ratio of 12.45:1 on the default #FFF background).

As for breaking changes, it's only through semver. Introducing dark theme is just a patch, or maybe a minor, we'll see.

It does require some leg work, because currently I have a massive themes.json with the themes for all components, that gets imported on each component, because I'm stupid. I will split themes to avoid shipping this massive json every time a component is bundled. Theme splitting is all that remains for this ticket to be done. Worse case it will be ready by the end of the week.

[dennismeister93]

@ltickett

This is how it would look like for our Metrics when only using default values. Which looks fine, I guess?

Thanks @graphieros your plan sounds great! As @ltickett already mentioned, we would love to give something/contributions back if needed 🙂

[graphieros]

@dennismeister93

Thank you :)
Your constructive issues are clearly helping making the library better.

[ltickett]

@dennismeister93 is right- I didn't correctly remove all the color customizations (which is why the X, Y, and total colors were wrong).

Removing all the customisation does seem to make it look good in light mode 🚀