search

girder / girder_web_components

Reusable Javascript and VueJS components for interacting with a Girder server.
https://gwc.girder.org
Apache License 2.0
16 stars 9 forks source link

Support for Vuetify dark theme #195

Closed matthewma7 closed 5 years ago

matthewma7 commented 5 years ago

Vuetify has good built-in support for the dark theme. However, at this moment, GWC component doesn't support the dark theme well due to some hard-coded value or missing configuration.

matthewma7 commented 5 years ago

Specifically, we are working on an application that uses a dark theme. Most components work well with Vuetify dark theme but GWC does not.

2019-10-30_15-56-36

2019-10-30_15-58-59

2019-10-30_15-59-35

zachmullen commented 5 years ago

Big +1 from me. Maybe we could make this a dynamic switch on our demo app so you can very easily see both modes. The goal should be simply setting light or dark on the very top v-app should be sufficient to make everything look correct. That might not be possible, but we should try and get as close to it as we can.

matthewma7 commented 5 years ago

Since the application decided to use a dark theme. If it's ok, I'll give it a try with the project today.

zachmullen commented 5 years ago

Sounds great. As a general rule, features of Vuetify like this are the reason I'm always trying to minimize the amount of CSS we write by hand, as well as making sure we use theme colors wherever possible rather than hardcoded colors (in this library -- use whatever in downstream apps). This is a compelling case for making sure we let Vuetify do as much of the work as possible.

One area where I violated my own rules was in the drop zone part of the Upload component, since Vuetify didn't contain anything satisfactory for that behavior. @matthewma7 does that part look good in both light and dark modes?

zachmullen commented 5 years ago

One other thing -- if we manage to achieve this goal of supporting both modes via a top-level v-app switch, we should advertise that as a feature in the README.

matthewma7 commented 5 years ago

Hm, the font in the upload is inheriting its color so the contrast is a little low. image Maybe, in this case, we could use a darker shade of grey when the dark theme is applied.

zachmullen commented 5 years ago

If you want, I can make that change if you push your topic branch.