[Issue] Theme colors getting ignored

[ncls-alien]

Describe the bug

In some random components the theme colors are getting ignored. For example I have my theme colors set to black text and white background in light mode (my app only has light mode) but the buttons with transparent style decided to have white text anyway which is quite hard to read on a white background, so I changed my dark theme colors to match the light theme. All went good until I used the MazPagination component which suddenly uses the background color of the opposing theme as it's text color for whatever reason?! So there the text was white on a white background again.

Since MazPagination only offers template slots for screen readers, I also can't fix it, not even with CSS !important. But the problem is also variables like maz-color-text pointing to the variable maz-color-text-dark at the same time when maz-bg-color points to maz-bg-color-light

My workaround to this was to just set the text color in both themes to black but that obviously can't be a solution. I'm just lucky that I just have one theme.

To Reproduce

Steps to reproduce the behavior:

1. Create a maz-ui-config.ts file as described in the docs (I used rgb values, maybe that's important)

Expected behavior

The colors should be fitting the current theme. MazPagination should not use the opposing background color to evaluate it's text color.

Screenshots

1. When themes have different values (dark theme black bg and white text, text in table marked to show that there's content inside):

2. When both themes have the same value:

3. When dark theme has the same text color as light theme but different background (what it should look like in version 1 & 2):

4. CSS code that shows that MazPagination is using background color to determine it's text color:

Desktop (please complete the following information)

• OS: Windows 11
• Browser: Chrome, Firefox
• Version: chrome v126.0.6478.182, firefox v128.0

[LouisMazel]

Hi @ncls-alien,

Thanks fo your feedback, you can share your maz-ui.config file to help me to fix it?

[LouisMazel]

Maybe it's because by default the active button of the pagination of the "theme" color.

It's a little bit confusing because the color "theme" of MazBtn is made to work with both themes, so the button uses dark colors with the light theme and light colors with the dark theme:

<template>
  <MazBtn color="theme" />
</template>

With this color, the button will be "dark" with light theme and "white" with dark theme

---

To fix your issue, I think you can specify the active color you want to use:

<template>
  <MazPagination active-color="primary" />
</template>

You can also specify the color of other buttons :

<template>
  <MazPagination active-color="primary" :button-props="{ color: 'secondary' }" />
</template>

---

If it's not good for you, can you share your code with a reproduction link, please?

[ncls-alien]

Sure @LouisMazel!

Here you go:

import { defineConfig } from '@mazui/cli';

export default defineConfig({
  outputCssFilePath: './assets/css/colors.css',
  theme: {
    colors: {
      primary: 'rgb(1, 129, 54)',
      success: 'rgb(1, 129, 54)',
      danger: 'rgb(220, 38, 38)',
      bgOverlay: 'rgba(0, 0, 0, 0.25)',
      lightTheme: {
        textColor: 'rgb(0, 0, 0)',
        colorMuted: 'rgb(128, 128, 128)',
        bgColor: 'rgb(255, 255, 255)',
      },
      darkTheme: {
        textColor: 'rgb(0, 0, 0)',
        colorMuted: 'rgb(128, 128, 128)',
        bgColor: 'rgb(0, 0, 0)',
      },
    },
    fontFamily: `'Inter', 'Roboto', sans-serif`,
  },
});

I have to test your solution tomorrow but I don't think it should be depended on the opposing theme either way. The inactive buttons of MazPagination should just use the textColor of the current theme defined in the maz-ui.config just as the "white" or "theme" version of the MazBtn do.

So far it's fine for me since I just have one theme in this project anyways.

[ncls-alien]

I tried your solution and while investigating I found out that the textColor props from the maz-ui.config are getting swapped inside the dark-theme.css

So whatever I type into lightTheme.textColor resolves to --maz-color-text-light which is used for the text color in dark mode and the other way around. I guess there was some confusion about "light" referring to the theme color or the text color itself when this was done?

After swapping these two values, my application is working fine in light and dark mode.

[LouisMazel]

You are absolutely right, the text colors are reversed.

I will patch this mistake, but I have to find a solution to not break other users' applications by reversing text colors...

Thank you very much for investing this! 🚀

[ncls-alien]

Well, that's a good question...😅

It's such a small change that it's definately not worth a major version change so you could either just leave it like this until the next major version change and note the reversed values in the docs or just change it and list it as breaking change in the changelog. Kinda dirty fix but in my experience individuals don't update unless they have a specific reason to do so (e.g. they want to use new components) and companies usually read the changelogs before updating (at least after their product falls apart).

[LouisMazel]

Hi @ncls-alien,

This mistake is finally fixed in v4!

• Theme documentation: https://maz-ui.com/guide/themes
• Migration guide: https://maz-ui.com/guide/migration-v4
• Vue guide: https://maz-ui.com/guide/vue
• Nuxt guide: Vue guide: https://maz-ui.com/guide/nuxt

Thanks for your feedback.