Custom colors on instance

[jum-s]

With decentralisation, having custom colors set in config looks at hand to give some possibility of customizing someone's instance.

After some digging, it looks like it's a webpack job which could load some config variables at compile time (since SCSS cannot do anything else). Both svelte-loader (responsible for compiling .svelte files) and sass-loader might be involved

See issue webpack/sass-loader#49
Official documentation https://webpack.js.org/loaders/sass-loader/#additionaldata

I tried the following without success:

bundle/rules/svelte.cjs

  ...
  preprocess.push(sveltePreprocess({
    scss: {
      prependData: `$primary-color: green;`
    }
  }))

bundle/rules/scss.js

  ...
  const sassLoader = {
    // Source: https://github.com/webpack-contrib/sass-loader/issues/49
    loader: 'sass-loader',
    options: {
      additionalData: `$primary-color: green;`
    }
  }
  rule.use.push(sassLoader)

Im running out of time now, but it looks promising !

It would be also the occasion to clean up the _colors_utils.scss file, like merging $primary-color and $light-blue (and/or rename any variable named after a color $light-blue, $yellow, $soft-red)