Comment on page
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.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();
});
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.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.
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.
Last modified 1yr ago