Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Create a custom theme

Jump to bottom
Steve edited this page Mar 8, 2016 · 5 revisions

Creating a custom theme is pretty ease. Just go to src/themes and clone for example the blank theme by renaming it to e.g. "my-theme". If you now run Grunt you'll find your compiled theme in dist/css/my-theme.css.

Notice: You can also use any other existing theme as a foundation for your new theme.

Make your theme accessible in the Customizer

To use your theme in the UIkit Customizer please open docs/customizer.html and search for

var customizer = {styles: [
    {"name": "Default", "url": "../src/less/uikit.less", "config": "../src/less/customizer.json"},
    {"name": "Gradient", "url": "../src/themes/gradient/uikit.less", "config": "../src/themes/gradient/customizer.json"},
    {"name": "Almost Flat", "url": "../src/themes/almost-flat/uikit.less", "config": "../src/themes/almost-flat/customizer.json"}
]};

and add your theme

var customizer = {styles: [
    {"name": "Default", "url": "../src/less/uikit.less", "config": "../src/less/customizer.json"},
    {"name": "Gradient", "url": "../src/themes/gradient/uikit.less", "config": "../src/themes/gradient/customizer.json"},
    {"name": "Almost Flat", "url": "../src/themes/almost-flat/uikit.less", "config": "../src/themes/almost-flat/customizer.json"},

    // New theme:

    {"name": "My theme", "url": "../src/themes/my-theme/uikit.less", "config": "../src/themes/my-theme/customizer.json"}
]};

Now your theme should be selectable in the customizer.

https://getuikit.com/docs/introduction

Clone this wiki locally