nuken Docs
  • Welcome to the nuken Docs!
  • 📚The Basics
    • Your workspace
      • Viewing the console
      • Preview options
    • Exporting your project
      • Save as template
      • Saving to memory
    • Importing / recovering a project
    • Downloading content
  • ⚙️The Menus
    • Settings Menu
      • Danger Zone
      • Startup Behavior
      • Workspace
    • Project Config Menu
      • Configure meta tags
      • Project details
      • Project location
    • Stylesheet Management
      • Resource codenames
    • Script Management
      • Resource codenames
    • Share / Discovery
    • Downloaded Content
  • 🎨Options / Customization
    • Themes
      • Swapping themes
      • Installing themes
      • Developing themes
    • Templates
      • Installing templates
      • Using templates
      • Developing templates
    • Add-ons
      • Installing add-ons
      • Using add-ons
      • Developing add-ons
  • 😎Extras
    • GitHub Lookup
      • manifest.json
Powered by GitBook
On this page
  • Disabling DevTools
  • Identifying elements
  • Viewing your theme

Was this helpful?

  1. Options / Customization
  2. Themes

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();
});

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;
}

Viewing your theme

Once you drop this new theme.css file in the themes/ directory, restart nuken. Your workspace will now look like this.

PreviousInstalling themesNextTemplates

Last updated 2 years ago

Was this helpful?

nuken is built on . You can visit to learn more about how nuken's elements are styled.

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 .

🎨
UIkit CSS
their documentation
nuken.xyz/submit
It's blue!