Vuetify: [Feature Request] Custom theme (alternately) in Stylus

[bbtx0]

Problem to solve

Currently it is only possible to define a custom theme through JS.
The theme style is injected by JS in the page. This causes the page style to flick when ever the theme is fully injected as <style type="text/css" id="vuetify-theme-stylesheet">

Proposed solution

I am proposing to alternately be able to define a custom theme in the Stylus sources:

1) Proposal A

Pros: very simply implementation
Cons: it has to be updated if code to generate the theme changes

./src/stylus/theme-custom.styl:

// Theme Custom
// ============================================================
$theme-custom-variations := 'primary', 'secondary', 'accent';
$theme-custom-colors := {
  'primary': #1976D2
  'secondary': #424242
  'accent': #82B1FF
  'error': #FF5252
  'info': #2196F3
  'success': #4CAF50
  'warning': #FFC107
}

genBaseColor(key, val)
  .{key} {
    background-color: val !important;
    border-color: val !important;
  }
  .{key}--text {
    color: val !important;
  }
  .{key}--text input,
  .{key}--text textarea {
    caret-color: val !important;
  }

genVariantColor(name, val, type, n)
  .{name}.{type}-{n} {
    background-color: val !important;
    border-color: val !important;
  }
  .{name}--text.text--{type}-{n} {
    color: val !important;
  }
  .{name}--text.text--{type}-{n} input,
  .{name}--text.text--{type}-{n} textarea {
    caret-color: val !important;
  }

a {
  color: $theme-custom-variations.primary;
}
for key, val in $theme-custom-variations
  genBaseColor(key, val);
  if key in $theme-custom-colors
    for i in 5 4 3 2 1
      genVariantColor(key, lighten(val, i*10), 'lighten', i);
    for i in 1 2 3 4
      genVariantColor(key, darken(val, i*10), 'darken', i);

2) Proposal B

Pros: uses the same JS code which runs on the client to generate the theme
Cons: hard implementation (still requires code change)

./src/stylus/theme-custom.styl:

// Theme Custom
// ============================================================
$theme-custom-variations := 'primary', 'secondary', 'accent';
$theme-custom-colors := {
  'primary': #1976D2
  'secondary': #424242
  'accent': #82B1FF
  'error': #FF5252
  'info': #2196F3
  'success': #4CAF50
  'warning': #FFC107
}

use('../util/theme-custom.js')
theme-custom($theme-custom-variations, $theme-custom-colors)

./src/util/theme-custom.js:

// parse methods
module.exports = function themeCustom (theme) {
  return function (style) {
    style.define('theme-custom', function (variations, theme) {
      const css = Theme.generatedStyles(parse(variations), parse(theme))
      return new style.nodes.Literal(css)
    }, true)
  }
}

Based on the given comments to these proposals I will work on a pull request

[bbtx0]

On an additional note:
being able to setup the custom theme from within a Stylus script will enable to fully support css-modules (which would miss to parse the theme 'cause generate in the client)

https://vue-loader.vuejs.org/guide/css-modules.html

[KaelWD]

I'd go with the second if possible, that way the variations will be the same and we won't have to maintain two separate algorithms.

[KaelWD]

Also if it's possible, letting the user define the theme values in one place would be good, so they don't have to duplicate it between Stylus and js.

[stalniy]

Also it would be good to use css modules + css obfuscation because BEM styles produce very big css file.

Currently styles for all components take more than 200 KB!

[jacekkarczmarczyk]

Closing this as we've switched from Stylus to SASS and 1.5 will receive only bug fixes, there's also https://github.com/vuetifyjs/vuetify/issues/8149 for SASS