Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.
We’re hiring for design systems team! View open positions.

Themes New

Nord Design System’s parts are themable using CSS Custom Properties. We ship pre-made themes for Nordhealth, Veterinary and Healthcare apps. You can utilize these themes through our CDN.

Nord Themes

Integrating Nord’s themes into your project is straighforward. To get started, add one of the following link tags to the <head> of your application:

<!-- Nordhealth light theme -->
<link rel="stylesheet" href="" integrity="sha384-bowyFJwMxGq6edVuhzlGNnyNTEHhEGZ1r+1TvHnsfJHOYQWcXuntdxq8bBcQaW4Y" crossorigin="anonymous" />
<!-- Nordhealth dark theme -->
<link rel="stylesheet" href="" integrity="sha384-jkvofCL2D57AgXmZYQ8tpgVC1fxHJtgsSRkgcmRur9quumKsOLr6FEI7R1tzvrV0" crossorigin="anonymous" />
<!-- Healthcare light theme -->
<link rel="stylesheet" href="" integrity="sha384-PBgtWfQYM0mQSxLnQwxP+4JKwLYMqHS+REEMCHLl2obvhlPvPxZaoBkCuewaEsQH" crossorigin="anonymous" />
<!-- Healthcare dark theme -->
<link rel="stylesheet" href="" integrity="sha384-FwIVQOmmH/7hktJUPhcCsZ/R+iaEtG/p2GfEQ4vPa4jOOK5ZF366rGDdtLCyPpNQ" crossorigin="anonymous" />
<!-- Veterinary light theme -->
<link rel="stylesheet" href="" integrity="sha384-ghaaL34mUc3JYVhlQIWyVg7N+luRVrPEuSScf2L7WRInUZn9bH5EuJeeqhCL5XX6" crossorigin="anonymous" />
<!-- Veterinary dark theme -->
<link rel="stylesheet" href="" integrity="sha384-cDriykZ8F4qNE22pVSsj4l2oaysb4DA6f7Q4YcSJg15OmTyWMJkvK4dSM29GKHji" crossorigin="anonymous" />

When using Nord’s themes, it’s also recommended to include our tokens in CSS Custom Properties format before the theme link tag to get access to properties such as font sizes and similar that our theming doesn’t affect:

<link rel="stylesheet" href="" integrity="sha384-/OZ8/KiNciyGFGYUhkutjMLH9p9ii3/AHNN4HNQVI0BWhc+aTXdmDD2uJoh76TlH" crossorigin="anonymous" />
For dark themes, you need to add -dark appendix into the CSS filename href. For example nord-dark.css, vet-dark.css or health-dark.css.

Installation #

While usage through Nord CDN is the favored approach, we do also support installing any of the themes locally using Node Package Manager. Before you move further with this approach, please make sure you have Node.js installed on your machine. You can install the latest version through their website.

If you’re planning on using Nord Themes in a project that doesn’t yet use Node Package Manager, you’ll have to first create a package.json file. To do this, run npm init and follow the steps provided. Once finished, you can continue Nord Themes installation by following the instructions below.

Install using NPM #

Run in your project or website root directory (where package.json lives):

npm install @nordhealth/themes

Importing a theme locally #

Once you’ve installed our NPM package, you can import any of Nord’s themes into your project in either CSS, SCSS, Sass or Less:

/* Import Nord light theme */
@import "~@nordhealth/themes/lib/nord.css";
/* Import Nord dark theme */
@import "~@nordhealth/themes/lib/nord-dark.css";
/* Import Healthcare light theme */
@import "~@nordhealth/themes/lib/health.css";
/* Import Healthcare dark theme */
@import "~@nordhealth/themes/lib/health-dark.css";
/* Import Veterinary light theme */
@import "~@nordhealth/themes/lib/vet.css";
/* Import Veterinary dark theme */
@import "~@nordhealth/themes/lib/vet-dark.css";

If you’re not using Webpack or similar tool for your build process, you may have to provide the full path to Node Modules:

@import "/node_modules/@nordhealth/themes/lib/nord.css";

List of all available themes #

Below you can find a list of all available themes and paths to them.

Examples #

Developing themes #

The themes package in Nord Design System can be found under packages/themes. The themes utilize simple SCSS files and CSS Custom Properties. Gulp.js is used to transform SCSS into CSS.

The following are the most commonly used commands during development:

Getting support #

Need help with our themes? Please head over to the Support page for more guidelines and ways to contact us.

Edit page