Themes

OneMark use CSS to stylish all contents and supports common markdown themes, especially from Typora. You could download, modify or write your own custom theme.

Usually all notes will be affected when applying theme in other editors. However it is hard to do that in OneNote, so it will only affect current note and future notes.

Install Themes

1. Click Open Theme Folder.
2. Copy or move .css file into the opened folder.
3. Click Reload Themes.

Icons in Blockquote

Headers in blockquote > # comes with extra icons, for example:

You can add following rules to customize icons, with any emoji or characters. See how to customize CSS variables.

Customize CSS variables

You can customize some styles by adding a :root zone to any theme .css file. Just copy and modify the variables you want to set. If you want to apply a change for all themes, edit __global.css.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

:root {
  /* Font family */
  --font-family: 'Microsoft YaHei';
  
  /* Page color */
  --bg-color: #ffffff;

  /* Line height (ratio to font size). Line space = line height - 1 */
  --line-height: 1.5;

  /* Paragraph margin */
  --paragraph-margin: 0.5em;

  /* Mono space font for code */
  --monospace: "Consolas";

  /* Background for cursor */
  --select-text-bg-color: #B5D6FC;

  /* Text color for cursor */
  --select-text-font-color: #767676;

  /* h1-h6 icons in blockquote */
  --blockquote-heading-icons: 🔍,⭐,💡,📝,⚠️,⛔; 

  /* enable h1-h6 icons in blockqote */
  --enable-heading-in-blockquote: true;

  /* enable code block line number */
  --enable-code-line-number: false;

  /* LaTeX output format */
  --enable-latex-to-image: true;
}

Note：

• After modifying .css files, you need to click Reload Themes and manually choose the theme in the list again.
• Do not paste the whole piece of code above, just the lines you mean to modify specifically, to avoid unexpected style conflicts.
• Only for themes installed by default.
• Variables may not affect globally. For example, some theme may assign special font for headings, in this case --font-family will not take effect.

FAQ

• If you edited a .css file and want to reload the theme, you need to click Reload Themes, then choose the theme again.
• The theme list can show 10 items at most, filtered by last modified time.
• Themes on Lower version of OneNote or Windows may looks imperfect.

Supported CSS Properties

OneNote has limited support for CSS. Here’s the full introduction.

• link <a> doesn’t support changing color or underline.
• ::before/after is only supported for headings and inline elements, e.g. code em.
• border-radius is not supported.