How to Theme Your App Using Denali

Chas Turansky
Mar 18 · 5 min read

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 README.md.

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 denali@verizonmedia.com

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 denali.design 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 denali@verizonmedia.com

Denali Design

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store