Change primary & secondary colors

[JonasDoebertin]

Thanks a lot for these awesome set of components! They're so nice to use 🎉

I just have one question though: is there an easy way of changing the primary and secondary colors used throughout the components when using the prebuild scripts and styles from the dist/ directory?

Or, what in general would I have to do to compile my own version of the CSS with changed colors?

[JosephusPaye]

At the moment there is no easy way to customize the colors in the built files. That's something I hope to have before 1.0.

For now, you can build from source:

1. Clone the repo:

   git clone git@github.com:JosephusPaye/keen-ui.git

2. Move into the cloned folder and install the dependencies:

   cd keen-ui && npm install

3. Customize the variables in the keen-ui/src/styles/variables.styl file. The $md-brand-primary and $md-brand-accent are the primary and secondary colors, respectively.

4. Build (compile) the project:

   npm run build:all

5. The keen-ui/dist/keen-ui.css and keen-ui/dist/min/keen-ui.min.css as well as the standalone component files in lib/ should now reflect your changes.

6. To quickly test your changes, you can build the docs and then open the docs/index.html in your browser.

   npm run clean:docs && npm run build:docs

[EmilMoe]

Since it isn't scoped it should be possible to override at least with !important

[murbanowicz]

@EmilMoe I think @JonasDoebertin is looking to provide easy customization as it is on his check list, so we have to wait.

[EmilMoe]

I'm not customizing it at the moment, but it sounds good !

[nivv]

I can't build the project. I've downloaded as zip from github and ran the commands above.

Getting the following:

Path must be a string. Received undefined

    at assertPath (path.js:7:11)
    at extname (path.js:1433:5)
    at new SourceMapper (/Users/albin/Desktop/keen/node_modules/stylus/lib/visitor/sourcemapper.js:41:7)
    at Renderer.render (/Users/albin/Desktop/keen/node_modules/stylus/lib/renderer.js:94:9)
    at /Users/albin/Desktop/keen/node_modules/stylus-loader/index.js:149:12
    at tryCatchReject (/Users/albin/Desktop/keen/node_modules/when/lib/makePromise.js:840:30)
    at runContinuation1 (/Users/albin/Desktop/keen/node_modules/when/lib/makePromise.js:799:4)
    at Fulfilled.when (/Users/albin/Desktop/keen/node_modules/when/lib/makePromise.js:590:4)
    at Pending.run (/Users/albin/Desktop/keen/node_modules/when/lib/makePromise.js:481:13)
    at Scheduler._drain (/Users/albin/Desktop/keen/node_modules/when/lib/Scheduler.js:62:19)
    at Scheduler.drain (/Users/albin/Desktop/keen/node_modules/when/lib/Scheduler.js:27:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
 @ ./src/UiTabHeaderItem.vue 2:0-234

[JosephusPaye]

Hey @nivv, that is a problem with stylus-loader. To fix, run:

npm install stylus@latest stylus-loader@latest

Then build the project or run dev.

[nivv]

@JosephusPaye Thanks! That worked!

[JosephusPaye]

A Customization guide has been added for v1.0 which shows how to change the primary and accent colors, and more.

[nivv]

@JosephusPaye thanks! Just a heads up, broken link in the new docs:

https://github.com/JosephusPaye/Keen-UI/blob/master/docs/Customization.md#customization