Vuetify: [Feature Request][a11y] separate dark theme color scheme

Created on 5 Sep 2017  路  8Comments  路  Source: vuetifyjs/vuetify

What will it allow you to do that you can't do today?

It will allow to create different color schemes (primary/secondary/error etc) for light and dark theme

How will it make current work-arounds straightforward?

I don't see workaround for this at the moment. Dev can define his own color scheme, but it will be same for light and dark themes

What potential bugs and edge cases does it help to avoid?

It'll give possibility to create accessible (with high enough contrast) interfaces in both themes

Here are examples of too low contract with default color scheme
image
image
image
image

feature

Most helpful comment

No, I'm talking about having 2 colors schemes - one for light app and one for dark app, so instead of having something like this:

$theme := {
  primary: $blue.darken-2
  accent: $blue.accent-1

it could be:

$material-light := {
  $theme: {
    primary: $blue.darken-2
    ...
  },
  ...
}

$material-dark := {
  $theme: {
    primary: $blue.lighten-2
    ...
  },
  ...
}

And in styles instead of $theme.primary we can use $material.theme.primary

All 8 comments

You are referring to the ability to define a specific color on form inputs?

No, I'm talking about having 2 colors schemes - one for light app and one for dark app, so instead of having something like this:

$theme := {
  primary: $blue.darken-2
  accent: $blue.accent-1

it could be:

$material-light := {
  $theme: {
    primary: $blue.darken-2
    ...
  },
  ...
}

$material-dark := {
  $theme: {
    primary: $blue.lighten-2
    ...
  },
  ...
}

And in styles instead of $theme.primary we can use $material.theme.primary

Just a question about this feature request, if for dark and light different primary colors are defined, will these be updated throughout the app when the theme is switched? So also the color="primary lighten-2" parts?

Dark and Light will have their own specified themes and would be applied depending upon color. This is also being touched up for md2 and might change a bit.

It would be nice to be able to change background colors (and basically anything) as well for each theme.

That's a separate issue @agnjunio

@jacekkarczmarczyk ok, then I will create a feature request for that

this is now possible using the new bootstrap method in v2.0.0-alpha.5?

 theme: {
    dark: true,
    themes: {
      light: {
        primary: '...',
        ...
      },
      dark: {
        primary: '...',
        ...
      }
    }
  }
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Antway picture Antway  路  3Comments

alterhu2020 picture alterhu2020  路  3Comments

milleraa picture milleraa  路  3Comments

jofftiquez picture jofftiquez  路  3Comments

dschreij picture dschreij  路  3Comments