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.
Enabling DevTools is completely optional here, but it's a helpful addition if you'd like to learn more about how nuken works.
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;
}
nuken is built on UIkit CSS. You can visit their documentation to learn more about how nuken's elements are styled.
Viewing your theme
Once you drop this new theme.css file in the themes/ directory, restart nuken. Your workspace will now look like this.
It's blue!
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.
