Themes Draft

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.

Integrating a Nord Theme into your project is easy. You can start using one of the themes immediately by adding a link tag to the <head> of your application:

<!-- Nordhealth theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nordhealth/themes@1.2.1/lib/nord.css" integrity="sha384-7NhXgE52ItBhrS04LJ6mG2WdXgyN5y1qmEd+djH3TLHO+HZIKeFpuGLrXOrdHa1l" crossorigin="anonymous" />
<!-- Healthcare theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nordhealth/themes@1.2.1/lib/health.css" integrity="sha384-NZcM39Mm+KDMtsStweoGX5caQrlf7J+WprzYt2pKMygOIZ5+WwmGOBZFFi1PuYMD" crossorigin="anonymous" />
<!-- Veterinary theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nordhealth/themes@1.2.1/lib/vet.css" integrity="sha384-bv1CwhmkqAHpcmJ607Ej8ZNpkhGcAsmjmIktne6L+aweXmkkHsPDYQR8rsKB2vuD" crossorigin="anonymous" />

Developing themes #

The themes package can be found under packages/themes. It utilizes 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.