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.

Basic differences

This list might be outdated and there may be more differences now as this project is evolving. Probably there are more to come as the theme will go in another direction.

• scrollbar: less obtrusive
• headings
  • reduced weight of font
  • slightly less underlining thickness
  • restored normal case
• dark theme: accentuated bold and italic font color
• page & block properties: restyled with borders
• selection: better background color for selected blocks
• tasks: dim done or canceled elements (instead of strike through)
• journal: changed header icon
• links: adjusted hover style for external links
• Fix: invisible PDF annotation pages title
• Fix: missing hover style for PDF asset links
• Fix: inconsistent menu and header button styling and hover animations
• Fix: readability of light codemirror theme
• Fix: unwanted gradient background in left sidebar bottom area
• Fix: banners integration in wide mode
• Fix: unused variables, invalid CSS selectors / rules from Atmos
• Refactor: use standard Logseq variables to prevent redundant CSS rules

Known issues / Roadmap

• table styles
• 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!

---

Copyright © 2024 femto-code

MIT License