Skip to content

Customizing Themes

Jump to bottom
Example edited this page May 26, 2020 · 2 revisions

By loading a secondary style sheet after new.css in your HTML, you can override the CSS variables that declare the colors used.

Default Theme

:root {
	--nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
	--nc-tx-1: #000000;
	--nc-tx-2: #1A1A1A;
	--nc-bg-1: #FFFFFF;
	--nc-bg-2: #F6F8FA;
	--nc-bg-3: #E5E7EB;
	--nc-lk-1: #0070F3;
	--nc-lk-2: #0366D6;
	--nc-lk-tx: #FFFFFF;
	--nc-ac-1: #79FFE1;
	--nc-ac-tx: #0C4047;
}

Legend

  • --nc-font-sans: Font for all text besides code or preformatted
  • --nc-font-mono: Font for <code>, <pre>, <kbd>, <samp>
  • --nc-tx-1: Heading text color
  • --nc-tx-2: Body text color
  • --nc-bg-1: Base background color
  • --nc-bg-2: Slightly darker background color
  • --nc-bg-3: Even slightly darker background color
  • --nc-lk-1: Action color for links and buttons
  • --nc-lk-2: Link and buttons on mouse hover and active
  • --nc-lk-tx: Text color for link buttons, or cases where link color is used as a background
  • --nc-ac-1: Accent background color for <mark> and text selection background
  • --nc-ac-tx: Text color when accent is used as a background

Note: the night theme is not currently customizable—support for this will be added in 1.2.0.

Usage

  1. Create a stylesheet including some or all of the above variables in the :root. A good way to start is just copying and pasting the default theme into a new CSS file, then editing it. If you omit any variables, they will fall back to the default theme.
  2. If you'd like to import custom fonts, put the @import tag before the :root element. Many open-source fonts are available on xz/fonts.
  3. Reference your new stylesheet after new.css in your <head>. Here's an example <head>:
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">">
    <link rel="stylesheet" href="https://example.com/MY-CUSTOM-THEME.css">
</head>
Clone this wiki locally