Nord can be easily imported from the Sass, Less, Stylus and CSS modules as well as from various native color swatch formats.

Sass

@import "node_modules/nord/src/nord.scss";

body {
  background-color: $nord0;
  color: $nord8;
}

Less

@import "node_modules/nord/src/nord.less";

body {
  background-color: @nord0;
  color: @nord8;
}

Stylus

@import "node_modules/nord/src/nord.styl";

body {
  background-color: @nord0;
  color: @nord8;
}

CSS

The CSS specification supports the usage of primitive value types to define custom properties which can be used to create e.g. color variables. CSS variables are entities that contain specific values to be reused throughout a document. They are set using custom property notation (e.g. --nord0: #2E3440;) and are accessed using the var() function (e.g. color: var(--nord0);) .

All Nord color variables placed inside the :root pseudo-class. The :root pseudo-class represents an element that is the root of the document which is always the HTML (<html>) element and allows to use these variables for the whole document.

@import "node_modules/nord/nord.css";

body {
  background-color: var(--nord0);
  color: var(--nord8);
}

When using the optimized Nord CSS module the import statement must be adjusted to match the path of the distributed file:

@import "node_modules/nord/dist/nord.css";

results matching ""

    No results matching ""