Source: _style-settings.scss

  1. Colors
    1. Light color scheme
    2. Dark color scheme
    3. Opposite bacgkround
    4. Custom - Primary
    5. Custom - Text
    6. Custom - Gradient color space
    7. Note accent colors
  2. Accessibility
    1. Enable Accessibility variant
    2. Use sans serif font
    3. Increase default font size and weight
    4. Background textures
    5. Inline margin (left/right) for float elements
  3. Workspace
    1. Status bar position
    2. Sidebars
      1. Bookmark style for the tabs
      2. Gap between the selected tab and the content in the sidebars
      3. Color of the inside border
      4. Use custom sidebar texture
      5. Sidebar texture url
      6. Sidebar texture blending mode
      7. Sidebar texture size
      8. Sidebar texture position
      9. Sidebar texture opacity
      10. Use custom file explorer decoration
      11. File explorer decoration url
      12. File explorer decoration blending mode
      13. File explorer decoration size
      14. File explorer decoration position
      15. File explorer decoration opacity
      16. Animate the hover effect in the file explorer
  4. Editor
    1. File line width
    2. Headings
      1. Color for the headings
      2. Style for the first level heading (h1)
    3. Images
      1. Shadow offset (px)
      2. Shadow stripe thickness (px)
      3. Shadow stripe gap (px)
      4. Center images
    4. Links
      1. Internal link decoration
      2. External link decoration
    5. Lists
      1. Bullet style
      2. Checkbox style
    6. PDFs
      1. Blend mode, light mode
      2. Blend mode, dark mode
      3. Invert in dark mode
    7. Properties
      1. Number of columns
    8. Tables
      1. Use plain table style
      2. Table position
  5. Features
    1. Alternative checkboxes
    2. Floating button to switch note modes
    3. Floating button position
    4. Highlight active note
    5. Rainbow folders
    6. App background image
      1. Enable app background image
      2. Image url
      3. Blur
      4. Opacity
    7. Notes background image
      1. Enable note background image for all notes
      2. Image url
      3. Blend mode, light/dark mode
      4. Repeat background image
    8. Banners
      1. Banner height
      2. Banner slope angle
      3. Banner width in print mode
      4. Banner style in edit mode
  6. Additional content
    1. Additional fonts
    2. Canvas node tags

Colors

Light color scheme

Choose a predefined color scheme for the light mode.

Dark color scheme

Choose a predefined color scheme for the dark mode.

Opposite bacgkround

When enabled, the overall background of the app will be light in dark mode, and dark in light mode.

Custom - Primary

Select the background primary color for light and dark mode with the color scheme “Custom”.

Custom - Text

Select the text color for light and dark mode with the color scheme “Custom”.

Custom - Gradient color space

Select the color space for the gradient mixing with the color scheme “Custom”.

The base color gradient goes from the primary background to the text color. The interpolation is made in a certain color space. Each color space will give a different gradient.

If you don’t know what to choose, I would suggest srgb-linear for both modes, or lab for dark mode.

Note accent colors

Change the color accent for the cssclasses note-accent-i.

Accessibility

Enable Accessibility variant

This option makes the vault easier to read, with sans serif fonts, and increased font size and weight.

Use sans serif font

Increase default font size and weight

Background textures

Enable the background texture in the sidebars.

Inline margin (left/right) for float elements

Modify the space between the floating elements and the text. Float elements are for example the fas-infobox callout, the polaroid callout, floating images, etc.

Workspace

Status bar position

  • (none): default position
  • Default on hover: default position, show on hover only
  • Top: at the top of the window
  • Ribbon: split the ribbon space in two, the status-bar goes in the bottom part

Bookmark style for the tabs

Gap between the selected tab and the content in the sidebars

Color of the inside border

Change the color of the border of panels inside the sidebars

Use custom sidebar texture

Enable to use your own custom texture instead of the default paper one

Url to the image for the sidebar texture. Use it as follow: url("https://path/to/file.png")

Blending mode for the background texture (one for each ligh/dark mode)

Size of the background texture

Position of the background texture

Opacity of the background texture. Should be between 0 and 1.

Use custom file explorer decoration

Enable to use your own custom texture instead of the default paper one

File explorer decoration url

Url to the image for the file explorer decoration. Use it as follow: url("https://path/to/file.png")

File explorer decoration blending mode

Blending mode for the file explorer decoration (one for each ligh/dark mode)

File explorer decoration size

Size of the file explorer decoration

File explorer decoration position

Position of the file explorer decoration

File explorer decoration opacity

Opacity of the file explorer decoration. Should be between 0 and 1.

Animate the hover effect in the file explorer

If enabled, hovering on files and folders in the File Explorer will have an slide-in animated effect.

Editor

File line width

Set the file line width (width of notes).

If you change this value, the asides elements might not switch correctly between in-text/in-margins positions.

Headings

Color for the headings

See Headings CSS Classes

Style for the first level heading (h1)

See Headings CSS Classes

Images

Shadow offset (px)

The theme adds by default a striped shadow to the embed images. You can change the offset of this shadow.

Trick 1: Make it 0 to make the shadow disappear.

Trick 2: Make it negative to keep the shadow exactly under the image (like if it was offset 0), but still display it under transparent images.

Shadow stripe thickness (px)

Thickness of the stripes of the image shadow

Shadow stripe gap (px)

Gap between the stripes of the image shadow

Center images

If enabled, the images will be centered if they are not in a paragraph (one empty line before and after)

Choose between

  • none
  • doodle (on hover)
  • underline
  • overline
  • underline overline

Choose between

  • none
  • doodle (on hover)
  • underline
  • overline
  • underline overline

Lists

Bullet style

Choose between

  • Doodle style
  • Normal style (no additional styling)

Checkbox style

Choose between

  • Doodle style
  • Normal style (no additional styling)

See tasks for screenshots.

PDFs

Blend mode, light mode

Blending mode for the PDFs in light mode. Multiply is a often a good choice.

Blend mode, dark mode

Blending mode for the PDFs in dark mode. Screen or exclusion are often good choices if you have the “Invert in dark mode” enabled.

Invert in dark mode

Invert your PDFs in dark mode.

Properties

Number of columns

Number of columns for the frontmatter properties. If the note is smaller than 600px, only one column will be displayed.

Tables

Use plain table style

Select the plain style for the tables

Table position

Horizontal position of the table in preview mode.

Features

Alternative checkboxes

Choose between

  • Doodle style
  • Normal style (mainly Lucide icons)
  • Disabled

See tasks for screenshots.

Floating button to switch note modes

Idea from the Thing theme, by colineckert, under MIT License.

The button to switch between editing and reading modes can be made floating.

The following css variables are used to define the button:

Variable Description Default value
--fas-floating-mode-button-color Color of the button var(--color-accent)
--fas-floating-mode-button-icon-color Color of the icon white
--fas-floating-mode-button-size Size of the button 50px

Floating button position

Position of the floating button (to switch between editing and reading modes) on the screen.

You can also change the following css variables in a snippet:

Variable Description Default value
--fas-floating-mode-button-space-inline Left or Right margin 20px
--fas-floating-mode-button-space-bottom Bottom margin 50px

Highlight active note

Idea from the plugin Obsidian Limelight, by smikula, under MIT License.
Code adapted and shared by @tif on Discord. Thanks a lot!

Lower the opacity of non active notes.

Rainbow folders

Enable rainbow colors in the file explorer, for the top level folder

App background image

Add a background image for the whole app.

Enable app background image

Image url

Must be either:

  • the web url of an online image;
  • the base64 encoded url of an embed image.

Blur

Opacity

Notes background image

Add a background image to every note. See the cssclass background-image.

Enable note background image for all notes

Image url

Must be either:

  • the web url of an online image;
  • the base64 encoded url of an embed image.

Blend mode, light/dark mode

Repeat background image

Banners

Height of the banners when set by the cssclass banner.

Angle of the slope for the banner-slope or banner-slant cssclasses.

Define the type of banner for PDF exports. Full bleed will make the banner go from on edge to the page to the other. Inside margins will not cover the margins in order to leave free space for printing.

Select how the banner image will be displayed edit mode.

  • Hidden will completely hide the image
  • Small will reduce the width of the image to 100px
  • Icon will show a small 🖼️ banner that you can hover to see the image in a very small icon (approx. 60px wide)

Additional content

Additional fonts

Multiple elements of this theme can use specific fonts if they are available. To download the required fonts, you can add the file additional_fonts.css to your snippets file. This file can be very heavy. If you don’t plan on using all of them, I would recommend deleting the unecessary @font-face from the snippet.

Fonts are used in the following:

Canvas node tags

See Canvas.