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
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)
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.
Another way to adopt this theme is to use jsDelivr CDN by adding the following line to your custom.css. You can also change the @main part to use the latest version.
@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/nord.css");Select Flow Nord Theme-Nord in theme menu.
select Flow Nord Theme-custom theme, and 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.
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;
}palettes provides a large variety of color palettes, select your favorite one.
- copy the css code and paste to the custom.css
- select
Flow Nord Theme-customtheme, enjoy :)
The default color palette is similar to Logseq's default theme.
- monokai-pro color palette
- bear color palette
- dracula color palette
- catppuccin macchiato color palette
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), or --ct-external-link-color (optional)
custom.css
:root {
}
.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
Another way to use custom theme is to use jsdelivr CDN. select Flow Nord Theme-custom theme, and add the following code in custom.css:
@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/src/palettes/catppuccin-macchiato.css");
@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/src/palettes/sepia.css");
custom_theme.mp4
Add the following code to custom.css, you can set theme to catppuccin latte 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 want to use Flow Theme nord color palette, use the follwing code in the custom.css
@import url("https://cdn.jsdelivr.net/gh/henices/logseq-flow-nord@main/nord.css");Logseq Flow Nord use Nord theme Syntax highlight by default. You can use monokai theme syntax highlight by put the following code in custom.css
:root {
}
.dark-theme .cm-s-solarized span.cm-comment { color: #75715e; }
.dark-theme .cm-s-solarized span.cm-atom { color: #ae81ff; }
.dark-theme .cm-s-solarized span.cm-number { color: #ae81ff; }
.dark-theme .cm-s-solarized span.cm-comment.cm-attribute { color: #97b757; }
.dark-theme .cm-s-solarized span.cm-comment.cm-def { color: #bc9262; }
.dark-theme .cm-s-solarized span.cm-comment.cm-tag { color: #bc6283; }
.dark-theme .cm-s-solarized span.cm-comment.cm-type { color: #5998a6; }
.dark-theme .cm-s-solarized span.cm-property, .dark-theme .cm-s-solarized span.cm-attribute { color: #a6e22e; }
.dark-theme .cm-s-solarized span.cm-keyword { color: #f92672; }
.dark-theme .cm-s-solarized span.cm-builtin { color: #66d9ef; }
.dark-theme .cm-s-solarized span.cm-string { color: #e6db74; }
.dark-theme .cm-s-solarized span.cm-variable { color: #f8f8f2; }
.dark-theme .cm-s-solarized span.cm-variable-2 { color: #9effff; }
.dark-theme .cm-s-solarized span.cm-variable-3, .dark-theme .cm-s-solarized span.cm-type { color: #66d9ef; }
.dark-theme .cm-s-solarized span.cm-def { color: #fd971f; }
.dark-theme .cm-s-solarized span.cm-bracket { color: #f8f8f2; }
.dark-theme .cm-s-solarized span.cm-tag { color: #f92672; }
.dark-theme .cm-s-solarized span.cm-header { color: #ae81ff; }
.dark-theme .cm-s-solarized span.cm-link { color: #ae81ff; }
.dark-theme .cm-s-solarized span.cm-error { background: #f92672; color: #f8f8f0; }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
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.
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'.