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.
- 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
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");
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.
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
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
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"
},
...
}
../logseq/custom.css
step 4 > Running
# windows
npm run dev:win
# Mac or Linux
npm run dev
You can see more information at logseq-developer-theme
- 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