Developing themes
Creating a nuken theme is easy. nuken reads .css
files from the content/themes
directory and applies them to your interface, so it's as simple as restyling elements with a custom stylesheet.
Disabling DevTools
If you'd like to learn more about the elements that make up nuken, you can edit the index.js
file, located in
(nuken.exe root directory) /resources/app/src/
Comment out the following bit of code to enable DevTools in your nuken workspace. This will keep nuken from removing DevTools on startup.
app.on("browser-window-created", (e, win) => {
win.removeMenu();
});
Now, restart nuken and hit CTRL
+ Shift
+ I
(or F12
) to open DevTools.
Identifying elements
From here, explore the nuken interface with the Inspector (or comb through the rendered markup instead) and restyle them in a .css
stylesheet. An example of what a completed theme looks like is below.
/* Setting the background color */
body, html {
transition: all 0.5s;
background-color:blue!important;
}
/* Stying the #navbar element */
#navbar, #navbar .bottom, #navbar .top {
background-color:blue;
outline-color:blue;
}
#titlebox {
background-color:blue!important;
}
/* Stying the project console button / pop-up */
#console_button, #project_console_notification_list {
background-color:blue;
}
/* Stying some UIkit elements that nuken uses */
.uk-modal-title {
color:blue;
}
.uk-dropdown {
background-color:blue;
}
.uk-modal button {
background-color:blue!important;
color:white!important;
}
.settings_slider {
background-color:blue!important;
}
Viewing your theme
Once you drop this new theme.css
file in the themes/
directory, restart nuken. Your workspace will now look like this.

Feel free to pick nuken apart and restyle elements as you like. No matter what you create, we'll take a look at it if you @ us on social media, or submit it via nuken.xyz/submit.
Last updated
Was this helpful?