Skip to main content

Custom CSS

Overview

Custom CSS can be added directly in RemNote, without making a plugin! Search for the "Custom CSS" powerup in your Knowledge Base and add CSS there.

CSS Classes

We offer stable external CSS classes that plugins can target. We'll make sure maintain these classes even if our internal code changes to enable stable external themes.

To help organize our custom CSS classes, we are using a CSS naming convention known as the BEM (Block, Element, Modifier) system.

  • Blocks are standalone entities which don't depend on other elements for their meaning, eg: rn-doc-header
  • Elements are parts of a block and have no meaning by themselves. Elements are tied to their parent blocks. eg: rn-doc-header__source and rn-doc-header__tag.
  • Modifiers are flags on blocks or elements which indicate a change in appearance, behavior or state. eg: rn-doc-header__source--web and rn-doc-header__source--pdf.

We also use a set of design tokens to allow you to easily change global CSS values for colors, fonts and light/dark mode.

Each design token is named as follows:

rn- <category> - <property> - <role> ‒- <state>

Below you can browse our current list of CSS blocks. Those with nested elements or modifiers can be expanded by clicking on them.

Noticed anything missing? Need some extra functionality which our current collection of classes can't provide? Don't hesitate to make a feature request on our new feedback site.

Global Theming Classes

.rn-clr-backgroundBackground color.
.rn-clr-background-light-accentLight accent background color.
.rn-clr-content-secondarySecondary color for content (text).
.rn-clr-background-accentBackground accent color.
.rn-clr-content-on-color
.rn-clr-background-secondarySecondary background color.
.rn-clr-background-primaryPrimary background color.
.rn-clr-content-primaryPrimary content (text) color.
.rn-clr-content-accentAccent content (text) color.
.rn-clr-shadow-elevation-15Shadow elevation.
.rn-clr-background-elevation-10Background elevation
.rn-clr-content-tertiary
.rn-clr-content-state-disabled
.rn-clr-background-tertiary
.rn-clr-border-selected
.rn-clr-border-opaque
.rn-clr-background-overlay-light
.rn-clr-background-overlay-dark
.rn-clr-shadow-elevation-20
.rn-clr-shadow-elevation-10
.rn-clr-content-inverse-primary
.rn-clr-border-light-accent
.rn-clr-background-light-positive
.rn-clr-background-light-warning
.rn-clr-content-warning
.rn-clr-background-elevation-5
.rn-clr-background-inverse-primary
.rn-clr-background-warning
.rn-clr-content-negative
.rn-clr-background-state-disabled
.rn-clr-background-inverse-tertiary
.rn-clr-content-inverse-secondary
.rn-clr-background-inverse-secondary
.rn-clr-content-positive
.rn-clr-content-state-warning
.rn-clr-shadow-elevation-5
.rn-clr-backround

Semantic Classes

.rn-plugin-sidebarPlugin sidebar.
.rn-plugin-listList of plugins.
.rn-pluginPlugin card within the plugin sidebar.
.rn-card3Generic card component.
.rn-doc-header11Document header including the document top bar, document title, sources bar and tags bar.
.rn-doc-titleTitle of a document.
.rn-queue10Inner queue container.
.rn-queue-containerOuter queue container, including the floating exit queue button and the inner queue container
.rn-tag3Targets tags in the editor.
.rn-tag-containerContainer for tags in the editor.
.rn-editor22Hierarchical Rem editor and all of its containing Rem.
.rn-search-portal1Search portal container.
.rn-settings18Settings modal.
.rn-all-notes11Container for the entire all notes content.
.rn-doc-menuDocument menu popup.
.rn-checkboxGeneric checkbox component used throughout the app.
.rn-pane4Container for the window pane.
.rn-omnibar4The Omnibar popup window.
.rn-rem-bulletRem bullet.
.rn-menuGeneric popup menu window.
.rn-sourceA source in the document header or inline source bar.
.rn-labeled-button
.rn-card-delimiter
.rn-add-rem-button
.rn-rem-icon-bullet1
.rn-popup2
.rn-rem-stack-arrow
.rn-popup-background
.rn-button
.rn-search2
.rn-switch-root
.rn-switch-handle
.rn-dialog-background
.rn-dialog
.rn-dialog-overlay
.rn-job-indicator-button
.rn-code-node3
.rn-navigation-bar
.rn-cloze-button
.rn-pdf-viewer1
.rn-ctrl-f1
.rn-delete-button
.rn-add-document-to-folder
.rn-practice-rem-in-this-folder
.rn-search-button
.rn-rem-reference
.rn-help-button
.rn-divider
.rn-account-capsule
.rn-nav-tab-button
.rn-day-with-rem
.rn-document-preview
.rn-queue-remA bullet-point Rem in the queue.
.rn-table-headerA table header.
.rn-search-portal-query
.rn-bullet-containerA RemNote bullet.
.rn-table-row
.rn-table-row-menu
.rn-list-number
.rn-sidebar-counter
.rn-plugin-rootRepresents the DOM mount node for a plugin
.rn-edit-later-done
.rn-progress-bar
.rn-date-header-item
.rn-flashcards-edit3
.rn-primary
.rn-page-header-mobile
.rn-plugin-logo
.rn-mobile-sync-status
.rn-article-header1
.rn-question-remThe Rem which represents the flashcard question, excluding its ancestors.

Custom CSS Escape Hatch

Visit http://www.remnote.com/notes?disableCustomCSS to temporarily disable all Custom CSS. This can be used as an escape hatch if you've added CSS that is preventing you from loading RemNote.