Allows for config.yml to control header colors.

[traeblain]

This allows the header colors to be controlled by the config.yml and defaults back to your color setup.

SCSS Variables to CSS Custom Properties

First, I replaced the SCSS variables with CSS Custom Properties to allow for programmatic control. Since you are already using fetch() without a poly-fill this barely changes the acceptable browsers, and is identical with regards to latest versions.

Second, since you cannot use SASS's lighten with the var() syntax, I created a new color that is mostly transparent white. Since lighten was used only as a menu background :hover effect, this creates the same effect. It also makes it background color agnostic as it will lighten any color that is selected (except for already super light colors).

Style Control on id=#app

The bound style property on id=#app now allows for context changing of the CSS Custom Properties. If the property doesn't exist in the Vue model, no style change is added (i.e. back to default). This makes it backwards compatible with config.yml files that don't have colors in them instead of throwing a Vue error if someone updates but doesn't define the colors.

Config.yml

Added the commented out property flags that can be used to change the colors. I went with primary-color and secondary-color as that was your previous naming convention in the SCSS file.

CSS File

Sorry for all the changes in the CSS file, but I couldn't get dart-sass to duplicate your output. This is default output with the flag:

sass --no-source-map ./app.scss ./app.css

[bastienwirtz]

Nice work!, I'll try that soon and get back to you!

[bastienwirtz]

Hey @traeblain
Sorry to have left you unanswered. I was working on a full rework related to the build system integration here: #62

I can't use your pull request directly because the structure changed a lot, but I did integrate your work. Thanks a lot!

[traeblain]

No worries, I was expecting this, so I haven't touched much in anticipation.