https://github.com/Sansui233/logseq-bonofix-theme

A clean logseq theme focus on bujo and long time writing experience
https://github.com/Sansui233/logseq-bonofix-theme

css logseq theme

Last synced: 4 months ago
JSON representation

A clean logseq theme focus on bujo and long time writing experience

• Host: GitHub
• URL: https://github.com/Sansui233/logseq-bonofix-theme
• Owner: Sansui233
• Created: 2021-05-20T15:37:05.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-12-28T19:54:11.000Z (6 months ago)
• Last Synced: 2023-12-28T21:47:04.582Z (6 months ago)
• Topics: css, logseq, theme
• Language: SCSS
• Homepage:
• Size: 9.52 MB
• Stars: 211
• Watchers: 4
• Forks: 28
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Lists

• awesome-logseq - logseq-bonofix-theme

README

        


  
logseq-bonofix-theme






  🌠 Screenshots

   | 

  📦 Install

   | 

  ✨ What's different

   | 

  🔨 How to build



This is a clean theme for [Logseq](https://github.com/logseq/logseq), focusing on bullet journal and long time writing experience.

## Screenshots

The style is strongly inspired by [logseq-bujo-theme](https://github.com/PiotrSss/logseq-bujo-theme ) and [Notion](https://notion.so). The code is mainly based on bujo theme, and you may find the style really notion-like.

![Desktop](./media/Desktop-2022-05-23.jpg)

Now, it adapts to custom accent color in logseq's settings. You can change the default accent(blue) color without accent style breaking（2024-03-08 in logseq v0.10.7）. 

## Install

Here are two ways of installing theme in Logseq.

### Install plugin



- Open Logseq → Plugins → Market Place, install **Bonofix Theme** plugin

- Open Logseq → Themes, choose your theme

> The theme installed via plugin is not compatible with your local `custom.css`. Only plugin theme works.

### Install `custom.css`

- General installation

  Copy the whole content of [custom.css](https://raw.githubusercontent.com/Sansui233/logseq-bonofix-theme/master/custom.css) into your `graphname/logseq/custom.css` file.

- If you are always working online

  Copy this one-line-installation into your logseq/custom.css file

  ```css

  @import url('https://cdn.jsdelivr.net/gh/sansui233/logseq-bonofix-theme/custom.css');

  ```

## What's different

**Functional style**

- Simple but functional colors

- Make tippy window like responsive card instead of filling the screen and obscuring text

- Wrap text in query table results to make it easier to read. Table remains to scroll if too many columns

**Additional Styles**

- Calender emoji before journal title  

  

- Round tags  

  

- Round checkbox 

## How to build

1. Install [node](https://nodejs.org/)

2. Clone repo  

  ```shell

  git clone https://github.com/Sansui233/logseq-bonofix-theme.git && cd logseq-bonofix-theme

  ```

3. Install dependencies  

  ```shell

npm install

  ```

4. Run build  

  ```shell

  npm run build

  ```

## Thanks

- [Logseq](https://github.com/logseq/logseq)

- [logseq-bujo-theme](https://github.com/PiotrSss/logseq-bujo-theme) by PiotrSss

- Dark mode of [Notion](https://notion.so)

- All feedbacks from email and discord