logseq-developer-theme

UPDATE 2023-05-31

Many users have reported that the bullet lines are misaligned. Here is a solution: configure the following code in logseq/custom.css. For more details, please refer to logseq-dev-theme#95.

.ls-block[haschild] > div > .block-content-wrapper::before {
    /* Adjust the variable value of "left", such as -21px. */
    left: -21px;
}

.ls-block > div > div.items-center::before {
    /* Adjust the variable value of "right", such as 10px. */
    right: 10px !important;
}

---

中文版

logseq-developer-theme is a secondary development of the logseq-dev-theme theme as an upstream, and you can easily see the @import reference in main.scss . You can clearly compare the differences between logseq-dev-theme and logseq-developer-theme via respective website ^{1 2}, for more information see this article.

logseq-developer-theme will not be made into logseq-dev-theme 2.0, just because logseq-dev-theme allows me to focus more on the desired css style, therefore, this project is not a fork, but a reference via @import.

For the record, I don't have any experience in front-end development, but the best method to start learning is with a project. Although scss is not very complicated, the code I wrote was really ugly. So I will keep improving the code and you can also remind me at issues or pull request.

✨Features

• enhance code block style , especially color
• support some tags highlighting， such as #docs, #bug, #feat, etc
• adapt Chinese font style
• support user-defined theme colors
• support download in plugin marketplace #297
• supports use in offline mode
• supports custom pdf color

🎉Usage

Quick Start

Using the jsDelivr CDN to get theme styles , simply add the following code to your custom.css.

@import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css");

⚠️ Please note that the jsDelivr CDN provides a faster service, but may not be able to refresh the latest version in time ³

Download from Plugin Marketplace（Recommend）

If you can't download it from the plugin marketplace, you can download it from GitHub Release , unzip it, and then import it into logseq

📌 Starting with version 1.0.0, GitHub Release or Plugin Marketplace downloads are supported for offline use. Because it will download fonts and other dependencies together to the local ~/.logseq/plugins directory.

Demo(may be outdated)

Custom theme styles

Starting with version 0.4.0, you can also customize the theme colors 😎

@import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css");

.dark-theme,
html[data-theme=dark] {
    --ls-custom-theme-color: #6096BA;
    --ls-primary-background-color: #272C35;
    --ls-secondary-background-color: #313942;

    --ls-code-color: #fff;
    --ls-code-language-color: gray;
    --ls-code-background-color: #34343c;
    --ls-code-selected-background-color: #32445A;

    --ls-bullet-threading-background-color: #34343c;
    --ls-task-done-text-color: gray;
}

@import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css");
.white-theme,
html[data-theme=light] {
    --ls-custom-theme-color: rgb(224, 80, 27);
    --ls-primary-background-color: #ffC017;
    --ls-secondary-background-color: #ffcf4d;

    --ls-code-color: gray;
    --ls-code-language-color: gray;
    --ls-code-background-color: #fff;
    --ls-code-selected-background-color: #C0E6FD;

    --ls-bullet-threading-background-color: #ffcf4d;
    --ls-task-done-text-color: gray;
}

For more custom colors see custom-color

Label enhancement

Considering factors such as possible conflicts with your original text and multiple tags affecting the readability of the content, only a few of the tags in the above image are currently set to be enhanced. If you need, you can set them in custom.css, see #4

🚀 Local development

step 1 > Verify the local environment

node -v
npm -v
git -v

step 2 > Install dependencies

# > step 1 download source code
git clone https://github.com/UNICKCHENG/logseq-developer-theme.git
cd logseq-developer-theme
# > step 2 installing dependencies
npm install

step 3 > Modify package.json

• please modify value of localPath to the address of your logseq graph documentation

{
	...
    "config": {
        "localPath": "C:\\Users\\hi\\LocalStation\\BLOG\\docs"
    },
	...
}

⚠️ The purpose here is to make it easier to compile the SCSS output directly to ../logseq/custom.css

step 4 > Running

# windows
npm run dev:win

# Mac or Linux
npm run dev

✍️Changelog

You can see more information at logseq-developer-theme

💖 Credits

• logseq team
• pengx17/logseq-dev-theme
• flowerornament/logseq-simple-parametric-theme for code block CSS Style
• ryanoasis/nerd-fonts support about DejaVuSansMono Fonts
• lxgw/LxgwWenKai-Lite support about LXGWWenKaiLite-Regular Fonts
• awesome-logseq provides list of logeseq theme
• RemNote default theme style
• Thanks to all open source projects for sharing ideas and techniques

Footnotes

1. https://pengx17.github.io/knowledge-garden/ ↩

2. https://docs.unickcheng.cc ↩

3. https://blog.juanertu.com/archives/cbcd1946 ↩