Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow custom theme properties #404

Merged
merged 2 commits into from
Jun 20, 2024

Conversation

chrismayer
Copy link
Collaborator

This allows to define custom theme properties in the app-config JSON, like

  "colorTheme": {
    "dark": false,
    "themes": {
      "light": {
        "primary": "#FFFFFF",
        "onprimary": "#000000",
        "secondary": "#B9B9B9",
        "cmcustom": "#000074"
      },
      "dark": {
        "primary": "#FF0000",
        "secondary": "#FFCC80",
        "onprimary": "#00FF00",
        "cmcustom": "#FF0074"
      }
    }
  },

Before the theme properties were limited to the default ones of Vuetify. According to Vuetify2 theme docs it is totally OK to define custom properties and very useful IMHO. The custom properties are fully treated as the default ones and the derivatives like -lighten1 or -darken5 will be created.

This allows to define custom theme properties in
the app-config JSON.
Copy link
Collaborator

@sronveaux sronveaux left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested and works as explained and expected !

I was just wondering whether this would deserve a line in the documentation or not... something like :

In addition, Wegue also supports the following "on" colors:

Color Description Example
onprimary color over primary color typography/icons over primary color
onsecondary color over secondary color typography/icons over secondary color

Moreover, custom colors which are not listed in the Vuetify documentation can also be defined here. Lighten and darken variants will also be generated for them like for the default ones.

To simplify the theming configuration, ...

Final remark here, the link to Vuetify documentation in wegue-configuration.md is currently not the good one as it links to Vuetify3 documentation which has some differences... should it be amended to https://v2.vuetifyjs.com/en/features/theme/#customizing (and reverted when Wegue will be ported to Vue3) or not... I let you choose the best option...

Other than that, on a functional point of view, it's perfect and ready to merge !

@chrismayer
Copy link
Collaborator Author

Thanks for your feedback @sronveaux. I updated the theming documentation with your suggestions.

Going to merge now. Failing tests seem to be unrelated, since they were green before without any substantial change and they also fail for #405. Investigation should be done separately...

@chrismayer chrismayer merged commit 9bbdd7b into wegue-oss:master Jun 20, 2024
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants