Logseq One Theme

📸 Screenshots | ✨ What's changed | 📦 Install | 🔨 How to build | 🙏 Credits

A clean theme for Logseq inspired by One Dark Pro.
Tested with Logseq v0.10.7!

Accent colors not fully supported (yet)

For the best experience, please disable the accent color! Most accent colors actually work. Tests have shown that the first accent color option (named "Logseq classical color") breaks the layout and colors!

Use the Logseq version named above in combination with the latest theme release to ensure best appearance!

Screenshots

Dark	Light

What's changed

Features

• included page property icons
• improved block reference style
• header labels
• included task and admonition block styles (as can be found in plugin logseq-awesome-content)
• integrated support for banners plugin
• support for new accent color selection (introduced in Logseq v0.10.0)
• numerous improvements & fixes to color scheme and polished header styles (compared to original Atmos theme)
• support for mobile devices (see below for instructions) (WIP)

Inspired by: Atmos Theme

The Logseq One Theme in its first iteration is strongly inspired by logseq-atmos-theme. Its stylesheet has been largely rewritten and this new theme aims to provide a cleaner experience and set some different accents.

Known issues / Roadmap

• [x] table styles
• [x] page tooltip layout
• [ ] complete accent color support (WIP)
• [ ] dark theme: mixture of bold and italic styles (consistency)
• [ ] light code mirror theme inconsistency
• [ ] improve mobile support

Install

Official marketplace (within Logseq, recommended)

Find the One Theme in the Logseq in-app theme marketplace:

• Search for 'One Theme' in «...» → Plugins → Marketplace → Themes
• To select theme: «...» → Themes (or press t i) → select desired variant 'One Theme'
  • press t t to toggle between light and dark themes

Manual installation (and for mobile devices)

1. Open «...» → Settings
2. Select Edit custom.css
3. Insert the following code to the top of your custom.css:

   @import url("https://raw.githubusercontent.com/femto-code/logseq-one-theme/main/main.css");

   (with borders) or

   @import url("https://raw.githubusercontent.com/femto-code/logseq-one-theme/main/main2.css");

   for version without borders (v2)

Fully manual way (if other ways don't work)

Copy main.css contents (with borders) or main2.css contents (without borders, v2) into <graph_base>/logseq/custom.css

Keep in mind, that each update needs to applied manually when using this approach!

How to build

Install node

1. Clone repo

   git clone https://github.com/femto-code/logseq-one-theme.git && cd logseq-one-theme

2. Install (development) dependencies (sass)

   npm install

3. Run build

   npm run build

   Tip: append :v2 for borderless theme variant

Credits

This is a theme for Logseq - a privacy-first, open-source platform for knowledge management and collaboration under AGPL-3.0 license.

Thanks to the following creators for inspiration and reference:

• logseq-atmos-theme: Copyright (c) 2022 Matthias A. (MIT License)
  • (especially) banners integration, color palette, headers and dark code mirror theme
• logseq-bujo-theme: Copyright (c) 2022 Sergey Kolesnik (@stdword) (MIT License)
  • block-ref style and page-property icons
• logseq-awesome-content: Copyright (c) 2022 Yuriy Piskun (MIT License)
  • task and admonition block styles
• logseq-ozean-theme: Copyright (c) 2022 Yinghai Zhao (MIT License)
  • light codemirror theme
• logseq-mocha-theme: Copyright (c) 2021 BlueTeaFrog (MIT License)
  • page/block property container style and external link decoration

Issues & Feedback

Feel free to submit an issue. Contributions and suggestions to improve the theme are welcome!