Notable customisation tips and tricks

notable-custom-css.md

Tips & Tricks for Notable's Custom CSS

Customising colours

Adjusting the colour of various parts of the UI is a fun way to get started with Custom CSS.

Unfortunately, due to the way that Notable applies its own styles, you have to use !important whenever you want to change the colour of something - this includes background colours. On that note, be sure to use the background-color property over the shorthand background property so that the background colour is overridden correctly.

You may also need to use !important to override some other properties. Use the Styles pane in DevTools to check if that is the case.

Targeting note exports

Custom CSS is also taken into account when exporting a note. You can use the data-export data attribute on the root element to selectively apply CSS based on the export format.

[data-export] {
  /* When a note is being exported (any format) */
}

[data-export="pdf"] {
  /* Target a specific export fomat */
}

Available values:

• html
• pdf
• print
• share

Targeting context keys

As of 1.9.0-beta.6, the head element contains some custom attributes that let you apply styles based on the state of the app. This includes light/dark themes!

Available attributes

All of these are boolean values ("true" or "false")

• is-theme-dark
• is-theme-light
• has-menubar
• has-panel
• has-sidebar
• has-statusbar
• has-titlebar
• has-viewbar
• is-centered-mode
• is-classic-mode
• is-focus-mode
• is-zen-mode
• is-window-fullscreen
• is-panel-side-left
• is-panel-side-right

Examples

[is-theme-light=true] .highlight {
    /* Lighter background for light themes */
    background-color: hsl(120deg 100% 50%);
}
[is-theme-dark=true] .highlight {
    /* Darker background for dark themes */
    background-color: hsl(120deg 100% 15%);
}

Togglable images based on light/dark theme

[is-theme-dark="false"] .preview img.dark {
  display: none
}
[is-theme-dark="true"] .preview img.dark {
  display: revert
}
[is-theme-light="false"] .preview img.light {
  display: none
}
[is-theme-light="true"] .preview img.light {
  display: revert
}

<img src="https://picsum.photos/seed/markdown/500/300" class="light"/>
<img src="https://picsum.photos/seed/markdown/500/300?grayscale" class="dark"/>

Demo video: https://cdn.discordapp.com/attachments/740584574320640104/942799095238639676/notable-smart-images.mp4

Custom HTML elements

You might want to use non-standard HTML elements in your notes as a terse way to add custom styles, e.g. <red>Colored text</red>. Unfortunately, Notable has a HTML sanitizer that removes any non-whitelisted element types, which makes it impossible to include non-standard HTML elements in your notes.

Fabio stated in January 2022 that the HTML sanitisation is for security reasons, mentioning that a maliciously-crafted HTML string could "blow up your computer" in some Electron apps. He intends to add a safe way to use custom elements, but this feature doesn't exist yet.

Embedding CSS within notes

The latest versions of Notable try to prevent you from including <style> elements in notes, for security reasons (similar to the above section).

Fortunately, there is a workaround that lets you bypass the part of the HTML sanitizer that removes <style> elements, by placing the elements inside an unclosed HTML tag. See the example below.

# Using CSS in notes

<div class="red"> Scary red text </div>

<div>

<style>
.red {
    color: red;
}
</style>