🧠 Logseq Flow Nord Theme

A minimal theme that focuses on a clean and sleek interface that's soft on the edges.

• Clean stylish theme that focuses on simplicity rather than flashy
• Curved edges over jagged edges
• Reference Panels Style around each match rather than each document
• Improved block ref styling
• Six built-in color palettes
• A large variety of color palettes

Logseq now officially supports accents and introduces its own variation of themes. Logseq Flow Nord Theme doesn't support offical accent colors. Select no accent color (1st color option) for the max compatibility.

🚀 Demo

custom_theme.mp4

Caution: Styles may NOT up to date !

Flow Nord Theme style (Demo)

Flow Nord Theme Dark mode (Demo)

Flow Nord Theme Light mode (Demo)

⌨️ Installation

Manually:

• Clone or Download the latest release
  • If downloaded unpack the ZIP contents to a safe location
• In logseq enable the developer mode
• Open the Plugin Manager window ( ... -> Plugins )
• Click on "Load unpacked plugin"
• Navigatge to the folder you either cloned or unpacked

Logseq Marketplace:

• Open the Logseq Marketplace
• Click on the "Themes" tab
• Search for Flow Nord Theme
• Click on the "Install" button.

❓️ Usage

Use built-in color palettes

1. Click «...» and open the «Themes»
2. Select Flow Nord Theme-* in theme menu.

Use Custom color palettes

1. select Flow Nord Theme-custom theme
2. add the following code in custom.css

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/src/palettes/newsprint.css");

Then we get newsprint color palette in both light and dark mode.

See Custom Color Palette section for more details.

📱️Use Flow Nord Theme in Mobile

1. In mobile Logseq: tap «...» and open the «Settings»
2. Tap «Edit custom.css»
3. Insert this code to the top of custom.css

• Nord (light & dark)

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/nord.css");

• catppuccin latte (light)

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/latte.css");

• Sepia (light)

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/sepia.css");

• Xiaobot (light)

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/xiaobot.css");

• Onedark (dark)

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/onedark.css");

• catppuccin macchiato (dark)

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/macchiato.css");

• Dracula (dark)

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/dracula.css");

If you want to use custom color palettes in mobile, add the following code to custom.css, you can set theme to newsprint color palette.

@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/src/palettes/newsprint.css");
@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/custom.css");

:root {
  --cl-font-size: 16px;
  --cl-line-height: 1.2;
  --ls-page-title-size: 24px;
}

Get other color palette here: https://github.com/henices/logseq-flow-nord/tree/main/src/palettes

If you ❤️ what I'm doing — consider to support my work

🚀 Features

⚙️ Custom Settings

The custom.css file can take the following options to tweak the visuals.

:root {
  --cl-page-width: 900px;
  --cl-page-max-width: 100%;
  --cl-checkbox-background: hsl(var(--cl-accent), 0);
  --cl-checkbox-border: 1.7px;
  --cl-checkbox-radius: 2px;
  --cl-checkbox-opacity: 1;
  --cl-marker-color: var(--cl-primary);
  --cl-marker-pre-size: 0px;
  --cl-marker-size: 16px;
  --cl-mark-decoration: none;
  --cl-mark-background-color: var(--cl-primary), 0.0;
  --cl-mark-color: hsl(var(--cl-primary));
  --cl-tag-border: 10px;
  --cl-tag-color: var(--cl-text-color), 0.85;
  --cl-tag-background-color: var(--cl-text-color), 0.1;
  --cl-children-left-border: transparent;
  --cl-children-border-color: hsl(var(--cl-text-color), 0.15);
  --cl-selected-background-color: var(--cl-primary), 0.1;
  --cl-selected-color: var(--cl-primary), 1;
  --cl-font-family: "Euclid Circular A";
  --cl-font-size: 16px;
  --cl-font-weight: 400;
  --cl-font-family-code: "Fira Code";
  --cl-header-font: "Roboto Slab";
  --cl-title-font: "Roboto Slab";
}

• --cl-font-family : set font famliy
• --cl-font-size : set font size
• --cl-font-weight : set font weight
• --cl-font-family-code : set code font famliy

:root {
    --cl-font-family: "Source Han Sans SC VF", sans-serif;
    /*--cl-font-family: "PingFang SC", sans-serif;*/

    --cl-font-family-code: "Fira Code"; /* code font */
    --cl-font-size: 1.2rem;
    --cl-font-weight: 500;
}

🎨️ Custom Color Palette

palettes provides a large variety of color palettes, select your favorite one.

• Logseq classical default color palette
• monokai-pro color palette
• bear color palette
• dracula color palette

1. copy the css code and paste to the custom.css
2. select Flow Nord Theme-custom theme, enjoy :)

The following color options will only affect custom theme:

`--ct-primariy-color` (required)
`--ct-secondary-color` (required)
`--ct-accent-color` (required)
`--ct-text-color` (required)

`--ct-bg-color-h` (optional)
`--ct-bg-color-s` (optional)
`--ct-bg-color-l` (optional)
`--ct-bg-color` (optional)
`--ct-title-text-color` (optional)
`--ct-code-text-color` (optional)
`--ct-external-link-color` (optional)

Example custom.css:

.dark-theme,
html[data-theme='dark'] {
    --ct-bg-color-h: 210;
    --ct-bg-color-s: 16%;
    --ct-bg-color-l: 17%;
    --ct-bg-color: 210, 16%, 27%;
    --ct-text-color: 213, 22%, 92%;
    --ct-primariy-color: 186, 47%, 58%;
    --ct-secondary-color: 186, 63%, 36%;
    --ct-accent-color: 140, 39%, 77%;
}

.white-theme,
html[data-theme='light'] {
    --ct-bg-color-h: 0;
    --ct-bg-color-s: 0%;
    --ct-bg-color-l: 100%;
    --ct-bg-color: 0, 0%, 90%;
    --ct-text-color: 210, 16%, 33%;
    --ct-primariy-color: 186, 63%, 36%;
    --ct-secondary-color: 186, 47%, 58%;
    --ct-accent-color: 140, 33%, 42%;
}

custom_theme.mp4

📄️ Custom PDF Settings

Valid color options you can specify are --cl-pdf-light-background, --cl-pdf-dark-background, or --ls-icon-color.

.dark-theme, .light-theme {
    --cl-pdf-light-background: transparent;
    --cl-pdf-dark-background: transparent;
    --ls-icon-color: #8abbbb;
}

If you find that the text in a PDF is unclear, setting the background to "transparent" can improve the display. This may also resolve issues with displaying PDFs in Logseq's default theme under certain conditions.

pdf-background.mp4

Parallel blocks

This pure css parallel blocks solution is base on elgatopanzon's great work. You can now put any blocks side by side in a column view, simply by adding the tags #parallel-2 to the 2 blocks, or #parallel-3 to the 3 blocks. Additionally, the tags #parallel-small and #parallel-big work to have 2 blocks side by side with one taking more space than the other, similar to having a sidebar.

Story

The logseq-Flow theme was originally developed by a GitHub user named nmartin84. However, for some reason, @nmartin84 left the community. As a result, the Logseq-Flow repository was deleted from GitHub, and the Logseq-Flow theme is now in an unmaintained state.

As a backend engineer who uses Logseq on a daily basis, the Logseq-Flow theme is my favorite theme. Despite its unmaintained state, I see this as an opportunity for new beginnings in its development.

Bad3r, just wanted to let you know about the amazing NordTheme. When combined with the 'logseq flow theme', it creates the beautiful 'Flow Nord Theme'.

Recommend Logseq Plugins

• Bullet threading plugin
• Tabs plugin
• Logseq Banners plugin
• Awesome Content plugin
• Awesome Props plugin

Thanks

• logseq-flow
• Tabler Icons
• CodeMirror
• Logseq Dev Theme
• logseq-logtools-custom