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 styles.

Supported CSS Properties

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

Property Description
color,background no support for gradient or image
font-family only take first value in the list
border only for blockquote and code block; no control for single side, width or color
padding,margin not for inline elements; only top/bottom for block elements, left/right for ::before/after
text-align
line-height
font-weight only bold, normal
font-style only italic, normal
text-decoration only underline, line-through, none
width only for <body> (to assign page width)

Customize Styles

You can customize some styles by adding a :root zone to any .css file. Just copy and modify the variables you want to set.

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
: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;
}

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.

Code Highlighting

OneMark use highlight.js to highlight code. You can choose one from the gallery, view the source and paste it into your own .css file.

OneMark also supports CodeMirror themes.

FAQ