Invert colors of z-spot in the theme

[Henk Feijt]

As it in the current version a z-spot shares the same forground and background colors of the theme, and they are the same as those of a z-view. In my app I want the z-spots to distinct from the z-views.
Momentarely, I have defined colors in a fixed matter in the style tag. However, when I change the theme I have to change the css definition.

What I would like to do is to invert the colors by using the var() definition in the style for both foreground and background. I looked into the code of zircle. But I am not sure which variable to use. And if that even will work, so something like that:

.inverted {
color: var(--background-color)
Background-color: var(--foreground-color)
}

[Juan Martin]

Hi @Paperasse! I think I understand what you say.
For instance,

.theme-green {
  --shade-color: #f6fbf6;
  --primary-color: #69bf66;
  --accent-color: #2b6329
}

The pre built themes has tres variables:
--shade-color
--primary-color
--accent-color

That works with the theme modes :
.mode-light for light backgrounds.
.mode-light-filled for light backgrounds and filled views.
.mode-dark for dark backgrounds (default).
.mode-dark-filled for dark backgrounds and filled views.

You can try different four combinations of colors just defining three color.
Also, you can modify the three main css vars (--shade-color, --primary-color, --accent-color) but those will behaves different if the theme mode is .mode-light, .mode-light-filled, .mode-dark or .mode-dark-filled.

But, in real world user cases you may want to customize the themes to fit your needs. So you can read this section: https://zircleui.github.io/docs/guide/themes-styles-and-colors.html#customize-themes

If none of the above solutions works for you. Please note that you can create your own css styles or css classes with out problem. The zircle themes are thought to help devs to prototype their zircle projects, but you can apply what ever css styles you want.

I think the documentation is not clear enough in that sense and I'll take this opportunity to improve it in the next few days. However, what I do when a customize some projects is to define a class or style touching this css properties:

• border-color,
• border-width,
• color (for the text)
• background-color

[Juan Martin]

Please check this example going to settings view

https://zircleui.github.io/docs/examples/home.html

[Henk Feijt]

Just implemented according to your suggestions. Works and looks great. Thanx