Skip to content

Customizing Themes

Jump to bottom
Example edited this page Jun 17, 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;

	/* Light theme */
	--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;

	/* Dark theme */
	--nc-d-tx-1: #ffffff;
	--nc-d-tx-2: #eeeeee;
	--nc-d-bg-1: #000000;
	--nc-d-bg-2: #111111;
	--nc-d-bg-3: #222222;
	--nc-d-lk-1: #3291FF;
	--nc-d-lk-2: #0070F3;
	--nc-d-lk-tx: #FFFFFF;
	--nc-d-ac-1: #7928CA;
	--nc-d-ac-tx: #FFFFFF;
}

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

The night theme is the same, just with each instance of --nc- replaced with --nc-d-.

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