How to Theme Your App Using Denali

Chas Turansky
Denali Design
Published in
5 min readMar 18, 2021


In this guide you’ll learn how to theme your HTML site using Denali SCSS. Before we begin, be sure to download the starter files using this link. You’ll also need Node.js, NPM, and SASS installed before getting started.

Starter Files

To begin, open the source folder in your favorite text editor. You should see the following files: index.html, theme.scss, and

Image of file structure from download.
Files from download

Let’s begin by taking a look at the index.html file. This file is a copy of our Denali form template with two important modifications: 1. We’ve called out to the overriding theme.css file at the top and 2. We’ve added the class of “theme” to the body. We’ll dive into understanding these modifications later in the guide. For now, open index.html in your browser and see what it looks like.

index.html file in code editor
index.html in code editor
index.html in browser

As you can see this is a simple HTML page with a nav on the top, tabs on the left, and a form in the middle. Our goal is to update this template’s visual appearance or “theme it”. We can do this by making changes to the variables found in the theme.scss file.

Open the theme.scss file. This file includes all of Denali’s global and component variables. You can modify the value of each variable. Depending on the variable, modifying its value will change the look and feel of individual components or the whole page as a whole.

theme.scss file in code editor

Install Denali CSS

Before we can modify these values we need to install Denali CSS and the SCSS files via Node Package Manager. To do this, open up the terminal and enter the code shown below:

npm install denali-css

As you can see we have the node modules and the scss files. This is what we use to compile Denali. However for our purposes we’ll only be working with a subset of these files.

Before we move on let’s take a moment to understand how these files work. If you scroll to the very bottom, you’ll see we are importing the node module at the top as well as Denali’s themes mixin.

Can you remember back to that body theme class we mentioned earlier? Adding that to the file is what allows us to activate our overriding theme. You can change this class title to anything you’d like, but for the demo sake we’ll keep `theme` as our class.

theme.scss file showing import and mixin for theming
theme.scss file showing import and mixin for theming

Compile and Theme SCSS

Now we need to compile these files so that our index.html file can read it. To do this, let’s open the terminal back up and type in sass — watch followed by your input file title, in this case theme.scss. Now that this is running it will watch for further changes we make to the file and compile them as we go.

sass — watch theme.scss:theme.css

Let’s start by changing the brand color to red. You’ll notice the current color is set to brand-300. We’ll update that color to red and hit save.

$color-brand-300: red;

Now reload your index.html page to preview the changes. You’ll notice all the bright blue changed to red. Let’s go back to the theme.scss file and change some values for the fields.

Brand changed from blue to red

Scroll through the file until you find the field variables. First, find $fields-corner-radius and change that to 0px which will square off the corners of each field. Next, find $fields-default-bg and change the value to transparent which will remove the fields background color. Lastly, find the value for $fields-focus-border and copy it over to $fields-default-border. Within the variable change the color to $color-grey-600. This is going to reference the color value from above and you can see that hex code there. Let’s save this file and see what those changes made to our index.html file.

$fields-corner-radius: 0px;

$fields-default-bg: transparent;

$fields-default-border: inset 0 -2px rgba($color-grey-600, 1);

After saving those changes, go ahead and reload the page. As you can see our field’s now have a transparent background color, the borders are grey, and we get that red color when the field is active.

Fields style changed

Wrapping Up

Now that you have an understanding of how theming works you can keep working through each variable to customize all your components. This guide only scratches the surface of what is possible. Using the basics you’ve learned here you can create multiple themes in one file, create dynamic themes that adjust to light/dark OS preferences, choose to pull in only the components you need, and much more. Whatever you create with Denali, we’d love to see it! Share your projects with the Denali community on GitHub or Twitter and reach out to us directly with any questions at

Keep up with Denali

Follow us on Medium or Twitter for updates as we continually evolve Denali into a powerful productivity platform. Don’t forget that Denali is open source — if you’d like to be a part of Denali’s evolution don’t hesitate to make some contributions on GitHub. Finally, checkout to download our framework, icons, Sketch libraries, and other resources to help build your products! Finally, if you’d like to get in touch with the team directly email us at



Chas Turansky
Denali Design

I’m a digital product designer based in the bay area currently working at Verizon.