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

{% hint style="info" %}
Enabling DevTools is completely optional here, but it's a helpful addition if you'd like to learn more about how nuken works.
{% endhint %}

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

```

{% hint style="info" %}
nuken is built on [**UIkit CSS**](https://getuikit.com). You can visit [their documentation](https://getuikit.com/docs/introduction) to learn more about how nuken's elements are styled.
{% endhint %}

### 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!](https://324211496-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBO-Je5kwyo8aFQDUg%2Fuploads%2F1IKIIRG4VNKmmfQNalx0%2Fimage.png?alt=media\&token=6d7c5e8c-4c93-4b2b-b5b0-418db22b787d)

{% hint style="success" %}
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](https://nuken.xyz/submit). 
{% endhint %}