Change primary & secondary colors about keen-ui HOT 9 CLOSED

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

from keen-ui.

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.

from keen-ui.

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 [email protected]: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

from keen-ui.

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

from keen-ui.

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

from keen-ui.

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

from keen-ui.

@JosephusPaye Thanks! That worked!

from keen-ui.

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

from keen-ui.

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

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

from keen-ui.