How to Theme Your App Using Denali
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.
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.
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.
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.
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.
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.
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
