Skip to main content

Custom CSS

Overview

We support multiple ways of creating and sharing Custom CSS. Custom Theme Plugins and Snippets are available through our Plugin and Theme Marketplaces. Custom CSS can also be added directly in RemNote, without needing to create a plugin!

Custom CSS Powerup vs CSS Snippet Plugins vs CSS Themes

Custom CSS Powerup

Press ctrl/cmd+p and search for the "Custom CSS" powerup. This powerup allows you to directly apply Custom CSS to your knowledge base by writing CSS snippets in code blocks. This is the best way to develop your own custom CSS styles. Later you can decide whether or not you want to share your styles with the community.

CSS Snippet Plugins

CSS Snippet plugins allow you to register custom css in a snippet.css file, and also support commands and settings so users can change the CSS styling on the fly. Snippet plugins are created using our snippet template and can be downloaded through the Plugin Marketplace. Snippet plugins are typically used for smaller CSS changes than CSS themes.

Theme Plugins

CSS Theme plugins allow you to register custom css in a theme.css file. They are simpler than CSS snippet plugins because they do not support any JavaScript code. Theme plugins are created using our theme template and can be downloaded through the Theme Marketplace.

Creating a Snippet Plugin

Setup your development environment

You'll need the following software to start developing:

1. Node.js

We will use Node.js to build the plugin.

2. A GitHub Account

We will use GitHub to create a repository for our plugin project based on the template plugin.

3. Git

You will also need to install Git. Check the official guide with instructions for each operating system.

4. An IDE or text editor

We recommend using Visual Studio Code, but any other IDE or text editor will work.

Setup the snippet template

The snippet template is a public Git repository which comes preconfigured with the correct plugin directory structure and default settings so you can skip the boilerplate and focus on implementing your ideas!

Clone the template

Clone Template
  • Navigate to the main page of the snippet template repository on GitHub.
  • Click on the "Use Template" button.
  • Fill out the repository information.
  • Click on the Clone or download button.
  • Press "HTTPS".
  • Copy the link.
  • Open a terminal in the directory where you want to clone the repository.
  • Run git clone <link> to download the template repository.

Test-run the template

Open your terminal of choice and navigate into the folder of the repository you just cloned.

Then run:

npm install

This will install a very minimal React App, along with the RemNote plugin SDK (software development kit).

Generate the manifest

Inside the plugin folder, run:

npx remnote-plugin init

This will prompt you for some information which will get automatically saved to the manifest.json metadata file.

Create a README

Inside the plugin folder, create a README.md file. Don't worry about filling it out yet.

Create your snippet plugin

You can develop the styles for your theme inside RemNote by navigating to the Custom CSS powerup Rem and clicking on the "Add Blank CSS Block" button. Styles you add to the CSS code block will be globally applied as you edit. When you are finished you can copy them into the src/snippet.css file and reload the plugin. You can add settings and commands to allow the user to customize the CSS styles while it's running, take a look at the src/index.tsx file in the snippet template for inspiration.

Test the plugin works

  • Run npm run dev in the plugin folder.
  • Open RemNote, go to the Plugin Explorer in the Settings modal.
  • Click on the Build Tab.
  • Press Develop from Localhost and press enter.
  • Check that the styles you added are applied correctly

Upload to the Store

Once you are happy with your CSS snippet plugin you can upload it to the plugin marketplace by:

  1. Run npm run build to generate the PluginZip.zip file.
  2. Go to the Plugin Explorer in RemNote and click on the Build tab.
  3. Click on the "Upload Plugin" button and upload the PluginZip.zip file.

Creating a Theme Plugin

Setup your development environment

You'll need the following software to create a theme plugin:

1. A GitHub Account

We will use GitHub to create a repository for our theme based on the template theme.

2. Git

You will also need to install Git. Check the official guide with instructions for each operating system.

Setup the theme template

Our theme template is a public Git repository which comes preconfigured with the correct theme directory structure and default settings so you can skip the boilerplate and focus on implementing your ideas!

Clone the template

Clone Template
  • Navigate to the main page of the theme template repository on GitHub.
  • Click on the Clone or download button.
  • Press "HTTPS".
  • Copy the link.
  • Open a terminal in the directory where you want to clone the repository.
  • Run git clone <link> to download the template repository.

Create your theme

You can develop your theme inside RemNote by navigating to the Custom CSS powerup Rem and clicking on the "Add Blank CSS Block" button. Styles you add to the CSS code block will be globally applied as you edit.

Upload to the Store

Once you are happy with your theme, you can copy the CSS code from the code block and paste it into the theme.css file. Create a README.md file to describe your theme and don't forget to include some pictures of what it looks like. Then zip the folder and upload it by clicking on the "Upload Theme" button in the Theme Marketplace build tab.

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-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-dark
.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-background-inverse-secondary
.rn-clr-content-positive
.rn-clr-content-state-warning
.rn-clr-shadow-default
.rn-clr-shadow-card
.rn-clr-shadow-menu
.rn-clr-shadow-modal
.rn-clr-shadow-elevation-30
.rn-clr-border-state-disabled
.rn-clr-border-negative

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-editor23Hierarchical 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-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.
.rn-omnibar-button
.rn-background-toolbar
.rn-document
.rn-edit-later
.rn-add-button
.rn-sidebar-flashcards-link
.rn-list-number-wrapper
.rn-queue-display-progress-bar
.rn-editor-container
.rn-text-heading-xsmall
.rn-text-heading-small
.rn-text-heading-medium
.rn-text-heading-large
.rn-text-label-subheading
.rn-text-label-small
.rn-text-label-medium
.rn-text-label-base
.rn-text-label-large
.rn-text-label-xlarge
.rn-text-paragraph-small
.rn-text-paragraph-medium
.rn-text-paragraph-base
.rn-text-paragraph-large
.rn-text-paragraph-xlarge
.rn-radio
.rn-radio-group

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.