├── scss ├── main.scss ├── no-bullet-threading.scss ├── _graph.scss ├── web.scss ├── _toggle.scss ├── _global.scss ├── _embed.scss ├── _cards.scss ├── _search.scss ├── _checkbox.scss ├── _left-sidebar.scss ├── _color.scss ├── _fonts.scss ├── _query.scss ├── fix-0.10.9.scss ├── _pages.scss ├── _bullet.scss ├── _code.scss ├── _tag.scss ├── _pdf.scss └── _other.scss ├── assets ├── bullet_line.png ├── Pasted image 20221210174733.png ├── Pasted image 20221210174750.png ├── Pasted image 20221216222925.png ├── Pasted image 20221216223400.png ├── Pasted image 20221216223545.png ├── Pasted image 20221216231143.png ├── Pasted image 20221216231911.png ├── Pasted image 20221216232448.png └── Pasted image 20230117145915.png ├── .gitignore ├── .github ├── dependabot.yml └── workflows │ ├── build-css.yml │ ├── release.yml │ ├── download-fonts.yml │ └── release-package.yml ├── LICENSE ├── package.json ├── custom-color.md ├── readme-zh.md └── readme.md /scss/main.scss: -------------------------------------------------------------------------------- 1 | 2 | $IS_WEB: false; 3 | $IS_BULLET_THREADING: true; 4 | 5 | @import "./global"; -------------------------------------------------------------------------------- /assets/bullet_line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UNICKCHENG/logseq-developer-theme/HEAD/assets/bullet_line.png -------------------------------------------------------------------------------- /scss/no-bullet-threading.scss: -------------------------------------------------------------------------------- 1 | 2 | $IS_WEB: false; 3 | $IS_BULLET_THREADING: false; 4 | 5 | @import "./global"; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .obsidian 2 | node_modules 3 | css 4 | *css.map 5 | *.css 6 | CHANGELOG.md 7 | 8 | script 9 | docs 10 | 11 | yarn.lock -------------------------------------------------------------------------------- /assets/Pasted image 20221210174733.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UNICKCHENG/logseq-developer-theme/HEAD/assets/Pasted image 20221210174733.png -------------------------------------------------------------------------------- /assets/Pasted image 20221210174750.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UNICKCHENG/logseq-developer-theme/HEAD/assets/Pasted image 20221210174750.png -------------------------------------------------------------------------------- /assets/Pasted image 20221216222925.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UNICKCHENG/logseq-developer-theme/HEAD/assets/Pasted image 20221216222925.png -------------------------------------------------------------------------------- /assets/Pasted image 20221216223400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UNICKCHENG/logseq-developer-theme/HEAD/assets/Pasted image 20221216223400.png -------------------------------------------------------------------------------- /assets/Pasted image 20221216223545.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UNICKCHENG/logseq-developer-theme/HEAD/assets/Pasted image 20221216223545.png -------------------------------------------------------------------------------- /assets/Pasted image 20221216231143.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UNICKCHENG/logseq-developer-theme/HEAD/assets/Pasted image 20221216231143.png -------------------------------------------------------------------------------- /assets/Pasted image 20221216231911.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UNICKCHENG/logseq-developer-theme/HEAD/assets/Pasted image 20221216231911.png -------------------------------------------------------------------------------- /assets/Pasted image 20221216232448.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UNICKCHENG/logseq-developer-theme/HEAD/assets/Pasted image 20221216232448.png -------------------------------------------------------------------------------- /assets/Pasted image 20230117145915.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/UNICKCHENG/logseq-developer-theme/HEAD/assets/Pasted image 20230117145915.png -------------------------------------------------------------------------------- /scss/_graph.scss: -------------------------------------------------------------------------------- 1 | /* ==== Graph View ==== */ 2 | 3 | // Filter 4 | .graph-filters { 5 | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05); 6 | border: none; 7 | background-color: var(--ls-secondary-background-color); 8 | 9 | li:not(:last-of-type) { 10 | border-bottom: none; 11 | } 12 | } -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | 4 | - package-ecosystem: "npm" 5 | directory: "/" 6 | schedule: 7 | interval: "daily" 8 | time: '03:00' 9 | timezone: "Asia/Shanghai" 10 | 11 | - package-ecosystem: "github-actions" 12 | directory: "/" 13 | schedule: 14 | interval: "weekly" 15 | time: '04:00' 16 | timezone: "Asia/Shanghai" 17 | open-pull-requests-limit: 2 -------------------------------------------------------------------------------- /scss/web.scss: -------------------------------------------------------------------------------- 1 | 2 | $IS_WEB: true; 3 | $IS_BULLET_THREADING: true; 4 | 5 | @import "./global"; 6 | 7 | :root { 8 | --ls-font-family: common-font, code-font, ui-font, system-ui; 9 | --ct-code-font-family: code-font, common-font, ui-font, system-ui !important; 10 | } 11 | 12 | .dark-theme, 13 | html[data-theme=dark] { 14 | --ls-primary-background-color: #292C3D; 15 | --ls-secondary-background-color: #2F3344; 16 | --ls-code-background-color: #333749; 17 | } -------------------------------------------------------------------------------- /scss/_toggle.scss: -------------------------------------------------------------------------------- 1 | /* toggle */ 2 | 3 | // Top menu bar icon 4 | .cp__header button { 5 | &.toggle-right-sidebar, 6 | &.toolbar-dots-btn, 7 | &.nav-right.button, 8 | &.nav-left.button, 9 | &.icon.inline, 10 | &.button.icon, 11 | &.cp__header-left-menu { 12 | &:hover { 13 | background-color: var(--ls-secondary-background-color); 14 | } 15 | } 16 | } 17 | 18 | // All pages bar 19 | .button { 20 | &:hover, &.ui__icon:hover { 21 | background-color: var(--ls-secondary-background-color); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /scss/_global.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // https://github.com/pengx17/logseq-dev-theme 4 | @import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@latest/custom.css"); 5 | @import url("https://raw.githubusercontent.com/pengx17/logseq-dev-theme/main/custom.css"); 6 | 7 | @import "./fonts"; 8 | @import "./color"; 9 | @import "./toggle"; 10 | 11 | @import "./left-sidebar"; 12 | @import "./search"; 13 | @import "./bullet"; 14 | @import "./cards"; 15 | 16 | @import "./code"; 17 | @import "./checkbox"; 18 | @import "./tag"; 19 | @import "./embed"; 20 | @import "./graph"; 21 | @import "./query"; 22 | @import "./pdf"; 23 | 24 | @import "./other"; 25 | @import "./pages"; 26 | 27 | @import "./fix-0.10.9"; -------------------------------------------------------------------------------- /scss/_embed.scss: -------------------------------------------------------------------------------- 1 | /* ==== embed and quote ==== */ 2 | 3 | // right sidebar 4 | .cp__right-sidebar-inner :not(.color-level) .sidebar-item-list > .color-level { 5 | border: none !important; 6 | border-radius: 10px !important; 7 | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1); 8 | background-color: var(--embed-right-sidebar-background-color) !important; 9 | } 10 | 11 | // quote style 12 | blockquote { 13 | background-color: var(--ls-primary-background-color); 14 | border-left-color: var(--ls-custom-theme-color); 15 | } 16 | 17 | // embed style 18 | .embed, 19 | .embed-page, 20 | .embed-block { 21 | border-radius: 8px; 22 | transition: all ease-in 0.3s; 23 | } 24 | 25 | // turn off the trigger style for logseq-dev-theme theme embedding pages 26 | :is(.embed, .embed-page, .embed-block):is(:hover, :focus-within) { 27 | box-shadow: none; 28 | transform: none; 29 | padding: 0.75em 0.5em; 30 | margin: 0.5em; 31 | border-radius: 8px; 32 | transition: all ease-in 0.3s; 33 | } 34 | -------------------------------------------------------------------------------- /.github/workflows/build-css.yml: -------------------------------------------------------------------------------- 1 | name: Build And Deploy CSS 2 | 3 | on: 4 | workflow_call: 5 | 6 | jobs: 7 | build-css: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v4 11 | with: 12 | fetch-depth: 0 13 | - name: Get node_modules From Cache 14 | id: get-modules 15 | uses: actions/cache@v3 16 | with: 17 | path: ${{ github.workspace }}/node_modules 18 | key: node-modules 19 | restore-keys: node-modules- 20 | - name: Setup Node.js Environment 21 | uses: actions/setup-node@v4 22 | with: 23 | node-version: '16' 24 | - name: Load Dependency 25 | run: npm ci 26 | - name: Build CSS 27 | run: npm run build 28 | - name: Generate changelogs 29 | run: npm run changelog; mv CHANGELOG.md css/ 30 | # https://github.com/JamesIves/github-pages-deploy-action 31 | - name: Deploy to release branch 32 | uses: JamesIves/github-pages-deploy-action@v4 33 | with: 34 | branch: release 35 | folder: css 36 | clean: true -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 zhicheng 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /scss/_cards.scss: -------------------------------------------------------------------------------- 1 | /* cards */ 2 | // created: 2022-12-26 3 | 4 | div[data-refs-self*='"card"'] { 5 | border-radius: 0; 6 | margin-bottom: 0; 7 | padding-bottom: 0; 8 | padding-top: 0; 9 | box-shadow: none; 10 | } 11 | 12 | .cards-review { 13 | .cp__select-input { 14 | height: 1px; 15 | &:is(:active, :hover, :focus) { 16 | border-color: var(--ls-custom-theme-color); 17 | } 18 | } 19 | 20 | .cards-title { 21 | background-color: var(--ls-secondary-background-color); 22 | } 23 | } 24 | 25 | // button 26 | .cards-review .ls-card { 27 | button { 28 | background-color: var(--ls-secondary-background-color); 29 | color: var(--ls-primary-text-color); 30 | opacity: 0.8; 31 | 32 | &:is(:visited, :focus) { 33 | border: none; 34 | } 35 | &:hover { 36 | opacity: 1; 37 | font-weight: 600; 38 | } 39 | } 40 | .keyboard-shortcut code { 41 | color: var(--ls-custom-theme-color); 42 | background-color: transparent; 43 | box-shadow: none; 44 | &::before { 45 | content: "("; 46 | } 47 | &::after { 48 | content: ")"; 49 | } 50 | } 51 | } -------------------------------------------------------------------------------- /scss/_search.scss: -------------------------------------------------------------------------------- 1 | /* search */ 2 | 3 | .ui__modal-overlay { 4 | -webkit-backdrop-filter: blur(8px) brightness(60%); // Safari 5 | backdrop-filter: blur(8px) brightness(60%); 6 | background-color: transparent !important; 7 | 8 | div { 9 | background-color: transparent !important; 10 | background-image: none; 11 | } 12 | } 13 | .ui__modal-panel { 14 | background-color: var(--ls-primary-background-color); 15 | } 16 | input[type=password], input[type=text] { 17 | background: 0 0 var(--ls-primary-background-color); 18 | } 19 | #ui__ac-inner > div a:hover { 20 | background-color: var(--ls-secondary-background-color); 21 | color: var(--ls-primary-text-color); 22 | } 23 | 24 | .ls-search{ 25 | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5),0 4px 6px -2px rgba(0, 0, 0, 0.5); 26 | 27 | & > .search-results-wrap ::-webkit-scrollbar { 28 | background-color: var(--ls-primary-background-color); 29 | } 30 | 31 | #ui__ac-inner div > a.chosen { 32 | background-color: var(--ls-secondary-background-color); 33 | } 34 | } 35 | 36 | // Global up and down switching style (including search box) 37 | .cp__palette-main .chosen, 38 | .cp__select-main .chosen { 39 | background-color: var(--ls-secondary-background-color); 40 | } -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | paths: 7 | - 'scss/*' 8 | tags: 9 | - v* 10 | pull_request: 11 | branches: [main] 12 | workflow_dispatch: 13 | 14 | jobs: 15 | build: 16 | uses: ./.github/workflows/build-css.yml 17 | 18 | release: 19 | needs: [build] 20 | if: startsWith(github.ref, 'refs/tags/') 21 | uses: ./.github/workflows/release-package.yml 22 | 23 | deploy-to-cos: 24 | needs: [build] 25 | runs-on: ubuntu-latest 26 | steps: 27 | # https://github.com/actions/checkout#checkout-a-different-branch 28 | - name: checkout release 29 | uses: actions/checkout@v4 30 | with: 31 | ref: release 32 | fetch-depth: 0 33 | # coscmd : https://cloud.tencent.com/document/product/436/10976 34 | - run: pip install coscmd 35 | - name: Configure coscmd 36 | env: 37 | SECRET_ID: ${{ secrets.COS_SECRET_ID }} 38 | SECRET_KEY: ${{ secrets.COS_SECRET_KEY }} 39 | BUCKET: ${{ secrets.COS_BUCKET }} 40 | REGION: ${{ secrets.COS_REGION }} 41 | run: coscmd config -a $SECRET_ID -s $SECRET_KEY -b $BUCKET -r $REGION 42 | - name: Deploy to COS 🚀 43 | run: | 44 | coscmd delete ./export.css -f 45 | coscmd upload -s ./export.css / -------------------------------------------------------------------------------- /scss/_checkbox.scss: -------------------------------------------------------------------------------- 1 | /* ==== checkbox ==== */ 2 | :root { 3 | --task-done-text-color: var(--ls-task-done-text-color); 4 | } 5 | 6 | :is(.doing, .now) .form-checkbox, 7 | :is(.doing, .now) .form-checkbox:focus { 8 | background-color: transparent !important; 9 | } 10 | 11 | .form-checkbox:checked { 12 | &, &:focus { 13 | background-color: var(--task-done-text-color) !important; 14 | border: var(--background-color) !important; 15 | } 16 | } 17 | .done { 18 | color: var(--task-done-text-color); 19 | .tag:not(:hover) { 20 | color: var(--task-done-text-color) !important; 21 | } 22 | a::before { 23 | background-color: var(--task-done-text-color) !important; 24 | } 25 | } 26 | 27 | :is(.doing, .todo) > a.block-marker:hover { 28 | color: var(--ls-custom-theme-color); 29 | } 30 | 31 | // the digital style about timetracking and reference 32 | .text-sm.time-spent { 33 | padding-top: 1px; 34 | } 35 | .cp__header-logo, .fade-link { 36 | color: var(--ls-primary-text-color); 37 | background-color: transparent; 38 | font-size: 70%; 39 | &:hover { 40 | color: var(--ls-custom-theme-color); 41 | } 42 | } 43 | // https://github.com/pengx17/logseq-dev-theme/issues/77 44 | // update the style between content, time cost and scheduled date when references 45 | .block-ref { 46 | a.fade-link, .timestamp-label { 47 | display: none ; 48 | } 49 | .timestamp .opacity-80 { 50 | font-size: 70%; 51 | } 52 | } 53 | 54 | -------------------------------------------------------------------------------- /scss/_left-sidebar.scss: -------------------------------------------------------------------------------- 1 | /* the left menu */ 2 | 3 | // Hide the left menu bar scroll bar 4 | .left-sidebar-inner { 5 | scrollbar-width: none; /* firefox */ 6 | -ms-overflow-style: none; /* IE 10+ */ 7 | overflow-x: hidden; 8 | overflow-y: auto; 9 | } 10 | .left-sidebar-inner ::-webkit-scrollbar { 11 | display: none; 12 | } 13 | 14 | 15 | // favorits and recent 16 | .left-sidebar-inner { 17 | 18 | background-color: var(--ls-primary-background-color) !important; 19 | // Hide the right border line 20 | border: none; 21 | 22 | .header { 23 | background-color: transparent !important; 24 | } 25 | 26 | a.item.active, a.item:active, 27 | ul li:hover, ul li a:hover { 28 | background-color: transparent !important; 29 | color: var(--ls-custom-theme-color); 30 | } 31 | a.item:hover { 32 | background-color: transparent !important; 33 | color: var(--ls-custom-theme-color); 34 | opacity: 0.78; 35 | } 36 | 37 | &, .create { 38 | background-color: var(--ls-primary-background-color); 39 | background-image: linear-gradient(transparent, var(--background-color)) !important; 40 | } 41 | } 42 | 43 | .left-sidebar-inner .create { 44 | #create-button { 45 | border-color: transparent; 46 | background-color: var(--ls-secondary-background-color) !important; 47 | opacity: 0.5; 48 | 49 | &:is(:hover, :focus) { 50 | border-color: transparent; 51 | background-color: var(--ls-secondary-background-color) !important; 52 | opacity: unset; 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /scss/_color.scss: -------------------------------------------------------------------------------- 1 | .dark-theme, 2 | html[data-theme=dark] { 3 | --ls-custom-theme-color: #769AFF; 4 | --ls-primary-background-color: #232329; 5 | --ls-secondary-background-color: #2B2B33; 6 | 7 | --ls-code-color: #fff; 8 | --ls-code-language-color: gray; 9 | --ls-code-background-color: #34343c; 10 | --ls-code-selected-background-color: #32445A; 11 | 12 | --ls-bullet-threading-background-color: #34343c; 13 | --ls-task-done-text-color: gray; 14 | } 15 | 16 | .white-theme, 17 | html[data-theme=light] { 18 | --ls-custom-theme-color: rgb(224, 80, 27); // Fonts color 19 | --ls-primary-background-color: #fff; // Background color 20 | --ls-secondary-background-color: #F7F7F7; // It has little difference from the background color 21 | 22 | --ls-code-color: #fff; 23 | --ls-code-language-color: gray; 24 | --ls-code-background-color: #272c35 ; 25 | --ls-code-selected-background-color: #32445A; 26 | 27 | --ls-bullet-threading-background-color: #E9ECEF; 28 | --ls-task-done-text-color: gray; 29 | } 30 | 31 | // adaptation of upstream interfaces 32 | .dark-theme, .white-theme, 33 | html[data-theme=dark], html[data-theme=light] { 34 | --ct-primary-color: var(--ls-custom-theme-color); 35 | --ct-secondary-color: var(--ls-custom-theme-color); 36 | --ct-header-bg-color: var(--ls-primary-background-color); 37 | --code-lang-color: var(--ls-code-language-color); 38 | 39 | --ls-block-bullet-color: var(--ls-bullet-threading-background-color); 40 | --ls-secondary-theme-color: var(--ls-custom-theme-color); 41 | 42 | --ls-cloze-text-color: var(--ls-custom-theme-color); 43 | --ls-a-chosen-bg: var(--ls-secondary-background-color); 44 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "logseq-developer-theme", 3 | "version": "v1.2.17", 4 | "description": "A more developer-friendly minimalist theme.", 5 | "author": "unickcheng", 6 | "repo": "UNICKCHENG/logseq-developer-theme", 7 | "license": "MIT", 8 | "logseq": { 9 | "themes": [ 10 | { 11 | "name": "Developer Theme", 12 | "url": "./custom.css" 13 | }, 14 | { 15 | "name": "Developer Theme no bullet threading", 16 | "url": "./no-bullet-threading.css" 17 | }, 18 | { 19 | "name": "Developer Theme Like docs.unickcheng.cc", 20 | "url": "./export.css" 21 | } 22 | ], 23 | "id": "logseq-developer-theme" 24 | }, 25 | "config": { 26 | "localPath": "C:\\Users\\hi\\LocalStation\\BLOG\\docs" 27 | }, 28 | "scripts": { 29 | "dev:win": "sass --watch --no-source-map --style expanded ./scss/main.scss %npm_package_config_localPath%/logseq/custom.css", 30 | "dev": "sass --watch --no-source-map --style expanded ./scss/main.scss $npm_package_config_localPath/logseq/custom.css", 31 | "build:custom": "sass --no-source-map --style compressed ./scss/main.scss css/custom.css", 32 | "build:web": "sass --no-source-map --style compressed ./scss/web.scss css/export.css", 33 | "build:no": "sass --no-source-map --style compressed ./scss/no-bullet-threading.scss css/no-bullet-threading.css", 34 | "build": "run-p build:custom build:web build:no", 35 | "changelog": "standard-changelog -f" 36 | }, 37 | "dependencies": { 38 | "sass": "^1.72.0" 39 | }, 40 | "devDependencies": { 41 | "npm-run-all": "^4.1.5", 42 | "standard-changelog": "^5.0.0" 43 | }, 44 | "title": "Developer Theme", 45 | "effect": false 46 | } -------------------------------------------------------------------------------- /.github/workflows/download-fonts.yml: -------------------------------------------------------------------------------- 1 | name: Download Fonts To Cache 2 | 3 | on: 4 | schedule: 5 | - cron: '0 20 1 * *' 6 | workflow_dispatch: 7 | 8 | env: 9 | FONTS_PATH: "~/fonts" 10 | 11 | jobs: 12 | fonts: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Load Fonts From Cache 16 | id: get-css-fonts 17 | uses: actions/cache@v3 18 | with: 19 | path: ${{ env.FONTS_PATH }} 20 | key: ${{ runner.os }}-css-fonts 21 | 22 | - name: Delete Fonts If Exists 23 | if: ${{ steps.get-css-fonts.outputs.cache-hit == 'true' }} 24 | run: rm -rf ${{ env.FONTS_PATH }} 25 | 26 | - name: Download Fonts 27 | run: | 28 | if [ ! -d ${{ env.FONTS_PATH }} ]; then mkdir ${{ env.FONTS_PATH }}; fi && cd ${{ env.FONTS_PATH }} 29 | 30 | VERSION=`wget -qO- -t1 -T8 "https://api.github.com/repos/lxgw/LxgwWenKai-Lite/releases/latest" | grep "tag_name" | head -n 1 | awk -F ":" '{print $2}' | sed 's/\"//g;s/,//g;s/ //g'` 31 | wget -t1 -T8 -O Fonts_LXGWWenKaiLite_Regular.ttf https://github.com/lxgw/LxgwWenKai-Lite/releases/download/${VERSION}/LXGWWenKaiLite-Regular.ttf 32 | 33 | VERSION=`wget -qO- -t1 -T8 "https://api.github.com/repos/ryanoasis/nerd-fonts/releases/latest" | grep "tag_name" | head -n 1 | awk -F ":" '{print $2}' | sed 's/\"//g;s/,//g;s/ //g'` 34 | wget -t1 -T8 -O Fonts_DejaVu_Sans_Mono_Nerd_Font_Complete_Mono.zip https://github.com/ryanoasis/nerd-fonts/releases/download/${VERSION}/DejaVuSansMono.zip 35 | unzip -d DejaVuSansMono ./Fonts_DejaVu_Sans_Mono_Nerd_Font_Complete_Mono.zip 36 | mv './DejaVuSansMono/DejaVuSansMNerdFontMono-Regular.ttf' ./Fonts_DejaVu_Sans_Mono_Nerd_Font_Complete_Mono.ttf 37 | rm -rf DejaVuSansMono Fonts_DejaVu_Sans_Mono_Nerd_Font_Complete_Mono.zip 38 | 39 | - name: Upload Fonts files 40 | uses: actions/upload-artifact@v4 41 | with: 42 | name: css-fonts 43 | path: ${{ env.FONTS_PATH }} -------------------------------------------------------------------------------- /scss/_fonts.scss: -------------------------------------------------------------------------------- 1 | /* Fonts */ 2 | // https://css-tricks.com/snippets/css/system-font-stack/ 3 | 4 | :root { 5 | --ls-font-family: apple-font, common-font, code-font, ui-font, system-ui !important; 6 | --ct-code-font-family: code-font, common-font, ui-font, system-ui !important; 7 | } 8 | 9 | @font-face { 10 | font-family: apple-font; 11 | font-style: normal; 12 | font-weight: normal; 13 | src: local("-apple-system"), 14 | local("BlinkMacSystemFont"), 15 | url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff") format("woff"); 16 | } 17 | 18 | // https://github.com/lxgw/LxgwWenKai-Lite 19 | @font-face { 20 | font-family: common-font; 21 | @if not $IS_WEB { 22 | // GitHub do not affect local use, but there are CORS(crossover restrictions) if used on the web. 23 | src: url("https://github.com/lxgw/LxgwWenKai-Lite/releases/download/v1.245.1/LXGWWenKaiLite-Regular.ttf") format("TrueType"), 24 | url("../fonts/Fonts_LXGWWenKaiLite_Regular.ttf") format("TrueType"), 25 | url("fonts/Fonts_LXGWWenKaiLite_Regular.ttf") format("TrueType"), 26 | url("https://docs.unickcheng.cc/static/fonts/Fonts_LXGWWenKaiLite_Regular.ttf") format("TrueType"); 27 | } @else { 28 | src: url("https://docs.unickcheng.cc/static/fonts/Fonts_LXGWWenKaiLite_Regular.ttf") format("TrueType"); 29 | } 30 | } 31 | 32 | // https://github.com/ryanoasis/nerd-fonts 33 | @font-face { 34 | font-family: code-font; 35 | 36 | @if not $IS_WEB { 37 | src: local("DejaVuSansMono Nerd Font Mono"), 38 | url("../fonts/Fonts_DejaVu_Sans_Mono_Nerd_Font_Complete_Mono.ttf") format("TrueType"), 39 | url("fonts/Fonts_DejaVu_Sans_Mono_Nerd_Font_Complete_Mono.ttf") format("TrueType"), 40 | url("https://docs.unickcheng.cc/static/fonts/Fonts_DejaVu_Sans_Mono_Nerd_Font_Complete_Mono.ttf") format("TrueType"); 41 | } @else { 42 | src: url("https://docs.unickcheng.cc/static/fonts/Fonts_DejaVu_Sans_Mono_Nerd_Font_Complete_Mono.ttf") format("TrueType"); 43 | } 44 | } 45 | 46 | 47 | @font-face { 48 | font-family: ui-font; 49 | src: local("Apple Color Emoji"), 50 | local("Segoe UI Emoji"), 51 | local("Segoe UI Symbol"); 52 | } -------------------------------------------------------------------------------- /scss/_query.scss: -------------------------------------------------------------------------------- 1 | /* query model */ 2 | 3 | @mixin bordeRadius() { 4 | -webkit-border-radius: 10px !important; // Safari 3-4, iOS 1-3.2, Android 1.6- 5 | -moz-border-radius: 10px !important; // Firefox 1-3.6 6 | -khtml-border-radius: 10px !important; // Konqueror 7 | border-radius: 10px !important; // Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ 8 | } 9 | 10 | // 隐藏 bullet 11 | .custom-query .block-control { 12 | display: none; 13 | } 14 | // 滚动槽 15 | .custom-query .overflow-x-auto::-webkit-scrollbar { 16 | background-color: var(--ls-primary-background-color); 17 | } 18 | .custom-query .overflow-x-auto { 19 | scrollbar-color: var(--ls-primary-background-color); /* Firefox */ 20 | } 21 | // 滚动滑块 22 | .custom-query .overflow-x-auto::-webkit-scrollbar-thumb { 23 | @include bordeRadius(); 24 | } 25 | :not(:active) .custom-query .overflow-x-auto::-webkit-scrollbar-thumb { 26 | background-color: var(--ls-secondary-background-color, .7); 27 | } 28 | :not(:hover, :active) .custom-query .overflow-x-auto::-webkit-scrollbar-thumb { 29 | background-color: transparent; 30 | } 31 | 32 | .custom-query .query-title { 33 | background-color: transparent; 34 | // Query title is not displayed in narrow screen case 35 | @media (max-width: 640px) { 36 | display: none; 37 | } 38 | } 39 | 40 | // .custom-query .flex-col, 41 | // .references-blocks { 42 | // box-shadow: none !important; 43 | // border-radius: 10px !important; 44 | // border: 2px solid var(--ls-secondary-background-color) !important; 45 | // background-color: var(--ls-primary-background-color) !important; 46 | // } 47 | // 查询效果和引用效果: references-blocks 48 | :not(.color-level) .color-level, 49 | .custom-query > div:first-child { 50 | box-shadow: none;; 51 | border-radius: 10px !important; 52 | border: 2px solid var(--ls-secondary-background-color) !important; 53 | background-color: transparent !important; 54 | } 55 | 56 | // table 57 | .table-auto { 58 | & > thead > tr > th { 59 | border-bottom: 2px solid var(--ls-secondary-background-color) !important; 60 | } 61 | & > tbody > tr.cursor { 62 | background-color: transparent !important; 63 | 64 | &:hover { 65 | background-color: var(--ls-secondary-background-color) !important; 66 | } 67 | } 68 | } -------------------------------------------------------------------------------- /.github/workflows/release-package.yml: -------------------------------------------------------------------------------- 1 | name: Release Packages 2 | 3 | on: 4 | workflow_call: 5 | 6 | env: 7 | THEME_NAME: "logseq-developer-theme" 8 | FONTS_PATH: "~/fonts" 9 | 10 | jobs: 11 | 12 | merge-dev-theme: 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Checkout theme files 16 | uses: actions/checkout@v4 17 | with: 18 | ref: release 19 | fetch-depth: 0 20 | path: pre-release 21 | - name: Get logseq-dev-theme files 22 | uses: actions/checkout@v4 23 | with: 24 | repository: pengx17/logseq-dev-theme 25 | fetch-depth: 0 26 | path: logseq-dev-theme 27 | - name: Install & Compile scss 28 | run: | 29 | cd logseq-dev-theme 30 | npm install -g sass 31 | sass --no-source-map --style compressed ./src/main.scss custom.css 32 | - name: Theme files 33 | run: | 34 | mkdir release 35 | cat logseq-dev-theme/custom.css pre-release/custom.css > release/custom.css 36 | cat logseq-dev-theme/custom.css pre-release/no-bullet-threading.css > release/no-bullet-threading.css 37 | cat logseq-dev-theme/custom.css pre-release/export.css > release/export.css 38 | - name: Upload Theme CSS 39 | uses: actions/upload-artifact@v4 40 | with: 41 | name: release-theme 42 | path: release 43 | 44 | release-package: 45 | if: startsWith(github.ref, 'refs/tags/') 46 | needs: [merge-dev-theme] 47 | runs-on: ubuntu-latest 48 | steps: 49 | - uses: actions/checkout@v4 50 | with: 51 | fetch-depth: 0 52 | - name: Load Fonts From Cache 53 | id: get-css-fonts 54 | uses: actions/cache@v3 55 | with: 56 | path: ${{ env.FONTS_PATH }} 57 | key: ${{ runner.os }}-css-fonts 58 | - name: Download Theme files 59 | uses: actions/download-artifact@v4 60 | with: 61 | name: release-theme 62 | path: ${{ github.workspace }} 63 | - if: ${{ steps.get-css-fonts.outputs.cache-hit == 'true' }} 64 | run: mkdir fonts && cp ${{ env.FONTS_PATH }}/*.ttf fonts 65 | - name: zip themem css 66 | run: | 67 | if [ ! -d fonts ]; then mkdir fonts; fi 68 | version=`git tag --sort=-v:refname | head -n 1` 69 | zip -qq -r ${{ env.THEME_NAME }}-${version}.zip *.css package.json LICENSE fonts 70 | - uses: softprops/action-gh-release@v1 71 | with: 72 | files: ${{ env.THEME_NAME }}-*.zip 73 | draft: true 74 | -------------------------------------------------------------------------------- /custom-color.md: -------------------------------------------------------------------------------- 1 | ## custom theme 2 | 3 | ```css 4 | --ls-custom-theme-color: #769AFF; 5 | --ls-primary-background-color: #232329; 6 | --ls-secondary-background-color: #2B2B33; 7 | ``` 8 | 9 | ## checkbox 10 | 11 | ```css 12 | --ls-task-done-text-color: gray; 13 | ``` 14 | 15 | 16 | ## bullet threading 17 | 18 | ```css 19 | --ls-bullet-threading-background-color: #34343c; 20 | ``` 21 | 22 | ## code block 23 | ```css 24 | --ls-code-color: #fff; 25 | --ls-code-language-color: gray; 26 | --ls-code-background-color: #34343c; 27 | --ls-code-selected-background-color: #32445A; 28 | ``` 29 | 30 | ## tag 31 | ![](assets/Pasted%20image%2020230117145915.png) 32 | ```css 33 | --ls-labels-bug-color: #D46459; 34 | --ls-labels-improvement-color: #4EA7FC; 35 | --ls-labels-feature-color: #BB87FC; 36 | --ls-labels-documentation-color: #39A8FC; 37 | --ls-labels-idea-color: #5E6AD2; 38 | --ls-labels-style-color: gray; 39 | --ls-labels-chore-color: gray; 40 | --ls-labels-test-color: #E5DA45; 41 | --ls-labels-refactor-color: #00DA97; 42 | --ls-labels-question-color: #D97ECA; 43 | 44 | --ls-tag-priority-a-color: #000; 45 | --ls-tag-priority-b-color: #000; 46 | --ls-tag-priority-c-color:#000; 47 | --ls-tag-priority-a-background-color: #FF7262; 48 | --ls-tag-priority-b-background-color: #FFC600; 49 | --ls-tag-priority-c-background-color: #E9ECEF; 50 | ``` 51 | 52 | ## pdf 53 | 54 | ```css 55 | --ls-pdf-dark-background-color: #2B2B33; 56 | --ls-pdf-light-background-color: #F7F7F7; 57 | --ls-pdf-warm-background-color: #F9EFDB; 58 | 59 | --ls-pdf-dark-selected-background-color: #264F78; 60 | --ls-pdf-light-selected-background-color: #B9E7FF; 61 | --ls-pdf-warm-selected-background-color: #B9E7FF; 62 | 63 | --ls-pdf-highlight-red-color: #FCA5A5; 64 | --ls-pdf-highlight-blue-color: #93C5FD; 65 | --ls-pdf-highlight-purple-color: #D884FE; 66 | --ls-pdf-highlight-yellow-color: #FCD34D; 67 | --ls-pdf-highlight-green-color:#86EFAC; 68 | ``` 69 | 70 | ## custom fonts 71 | 72 | Font selection is not provided, but you can customize the font in the following way 73 | 74 | ```css 75 | /* --ls-font-family: 正文字体 */ 76 | /* --ct-code-font-family: 代码块字体 */ 77 | :root { 78 | --ls-font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; 79 | --ct-code-font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; 80 | } 81 | ``` 82 | If you don't really like the default font, but there is no font selection option, i recommend considering the following options 83 | - https://css-tricks.com/snippets/css/system-font-stack/ 84 | - https://github.com/ryanoasis/nerd-fonts 85 | - https://adobe-fonts.github.io/source-code-pro/ 86 | - https://developer.apple.com/fonts/ -------------------------------------------------------------------------------- /scss/fix-0.10.9.scss: -------------------------------------------------------------------------------- 1 | .menu-links-wrapper { 2 | background-color: var(--ls-secondary-background-color) !important; 3 | 4 | .menu-link { 5 | &:hover { 6 | color: var(--ls-custom-theme-color); 7 | background-color: transparent; 8 | } 9 | } 10 | } 11 | 12 | .ui__modal-panel { 13 | border: none; 14 | } 15 | 16 | .form-input { 17 | border-color: var(--ls-secondary-background-color); 18 | background-color: transparent; 19 | border: 2px solid var(--ls-custom-theme-color); 20 | 21 | } 22 | 23 | // button style 24 | .keyboard-shortcut, 25 | .action-wrap, 26 | .search-results .flex, 27 | .cp__cmdk__modal .flex { 28 | .ui__button { 29 | background-color: var(--ls-secondary-background-color); 30 | 31 | &:hover { 32 | background-color: var(--ls-secondary-background-color); 33 | } 34 | } 35 | } 36 | 37 | .cp__plugins-page .tabs-inner { 38 | .ui__button { 39 | border: none; 40 | box-shadow: none; 41 | 42 | &:active { 43 | >span { 44 | color: var(--ls-custom-theme-color) !important; 45 | background-color: var(--ls-secondary-background-color) !important; 46 | } 47 | } 48 | } 49 | 50 | // be selected 51 | .ui__button.as-classic { 52 | color: unset; 53 | 54 | >span { 55 | color: var(--ls-custom-theme-color) !important; 56 | background-color: var(--ls-secondary-background-color) !important; 57 | } 58 | } 59 | } 60 | 61 | // search window style 62 | .cp__cmdk>.hints { 63 | background-color: var(--ls-secondary-background-color); 64 | } 65 | 66 | .cp__cmdk__modal { 67 | .text-xl { 68 | line-height: 250%; 69 | } 70 | 71 | .bg-gray-02 { 72 | background-color: var(--ls-primary-background-color); 73 | } 74 | } 75 | 76 | // command and page search 77 | .block-main-container { 78 | 79 | .absolute-modal[data-modal-name=commands], 80 | .absolute-modal[data-modal-name=page-search] { 81 | background-color: var(--ls-secondary-background-color) !important; 82 | 83 | #ui__ac { 84 | background-color: var(--ls-secondary-background-color) !important; 85 | 86 | .menu-link-wrap { 87 | &:hover { 88 | a { 89 | background-color: var(--ls-primary-background-color) !important; 90 | } 91 | } 92 | } 93 | } 94 | } 95 | } 96 | 97 | #right-sidebar-container { 98 | background-color: transparent; 99 | } 100 | 101 | .cp__themes-installed { 102 | div:hover { 103 | background-color: var(--ls-secondary-background-color) !important; 104 | } 105 | } 106 | 107 | .cp__plugins-installed { 108 | ul.menu-list>li:hover { 109 | background-color: var(--ls-secondary-background-color) !important; 110 | } 111 | } -------------------------------------------------------------------------------- /scss/_pages.scss: -------------------------------------------------------------------------------- 1 | /* All Pages Style */ 2 | 3 | @if $IS_WEB { 4 | .all-pages-nav > a { 5 | display: none; 6 | } 7 | } 8 | 9 | // delete button 10 | .actions:not(.has-selected) .actions-wrap .ui__button { 11 | background-color: transparent; 12 | } 13 | .actions.has-selected .actions-wrap .ui__button { 14 | color: var(--ls-custom-theme-color); 15 | &:hover { 16 | background-color: var(--ls-secondary-background-color); 17 | } 18 | } 19 | 20 | // table style 21 | .table-auto.cp__all_pages_table tbody a { 22 | color: var(--ls-custom-theme-color); 23 | } 24 | 25 | // more 26 | .cp__sidebar-main-content .menu-links-wrapper .menu-link { 27 | &:hover { 28 | color: var(--ls-primary-text-color); 29 | } 30 | } 31 | // search 32 | .cp__sidebar-main-content .actions .form-input { 33 | &:focus { 34 | box-shadow: 0 0 0 0.8px var(--ls-custom-theme-color); 35 | border: none; 36 | } 37 | } 38 | 39 | // bug report page 40 | #main-content-container .cp__sidebar-main-content .cp__bug-report-reporter { 41 | background: var(--ls-secondary-background-color) !important; 42 | 43 | .cp__bug-report-item-button { 44 | background-color: var(--ls-primary-background-color) !important; 45 | opacity: 0.7; 46 | 47 | &:hover { 48 | opacity: unset; 49 | } 50 | } 51 | } 52 | 53 | // import-existing-notes page 54 | #main-content-container .cp__sidebar-main-content .cp__onboarding-setups { 55 | 56 | .inner-card > article.importer { 57 | background: var(--ls-secondary-background-color) !important; 58 | } 59 | 60 | label.action-input { 61 | background-color: var(--ls-primary-background-color) !important; 62 | opacity: 0.7; 63 | 64 | &:hover { 65 | opacity: unset; 66 | } 67 | } 68 | } 69 | 70 | // ================================================================= 71 | .theme-inner.ls-hl-colored { 72 | button[id="skip-to-main"] { 73 | background: var(--ls-secondary-background-color); 74 | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2),0 4px 6px -2px rgba(0, 0, 0, 0.2); 75 | outline: none; 76 | 77 | &:hover { 78 | color: var(--ls-custom-theme-color); 79 | } 80 | } 81 | } 82 | 83 | .ui__notifications-content.enter-done { 84 | button[type="button"] { 85 | &:hover { 86 | color: var(--ls-custom-theme-color); 87 | } 88 | } 89 | } 90 | 91 | .ui__notifications .notification-area { 92 | background: var(--ls-secondary-background-color); 93 | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2),0 4px 6px -2px rgba(0, 0, 0, 0.2); 94 | } 95 | 96 | #app-container { 97 | .window-controls { 98 | background: var(--ls-primary-background-color); 99 | } 100 | } 101 | 102 | // right-sidebar 103 | #right-sidebar-container { 104 | .sidebar-item.content > div > div:first-of-type { 105 | padding: unset; 106 | margin: unset; 107 | border: none !important; 108 | } 109 | .sidebar-item-list { 110 | background-color: var(--ls-primary-background-color) !important; 111 | } 112 | } 113 | 114 | // header-line style 115 | .sidebar-drop-indicator::after, .cp__right-sidebar-topbar::after { 116 | display: none !important; 117 | } 118 | .cp__right-sidebar-settings > div > button.cp__right-sidebar-settings-btn { 119 | font-weight: bold; 120 | background: transparent; 121 | &:hover { 122 | background: var(--ls-secondary-background-color);; 123 | } 124 | } 125 | #app-container #left-container { 126 | .cp__header.drag-region { 127 | box-shadow: none !important; 128 | &::after { 129 | display: none !important; 130 | } 131 | } 132 | } -------------------------------------------------------------------------------- /scss/_bullet.scss: -------------------------------------------------------------------------------- 1 | /* bullet */ 2 | // https://github.com/pengx17/logseq-dev-theme/blob/main/src/bullet_threading.scss 3 | 4 | :root { 5 | --ls-bullet-threading-focus-background-color: var(--ls-secondary-theme-color); 6 | } 7 | 8 | // expander icon 9 | .ls-block { 10 | .block-control span { 11 | background-color: transparent; 12 | box-shadow: none; 13 | } 14 | .block-control svg { 15 | color: transparent; 16 | } 17 | .block-control:hover svg { 18 | color: var( --ls-bullet-threading-focus-background-color); 19 | } 20 | } 21 | 22 | // bullet style 23 | .ls-block .bullet-container.cursor { 24 | &:hover { 25 | background-color: transparent !important; 26 | .bullet { 27 | background-color: var(--ls-bullet-threading-focus-background-color); 28 | box-shadow: 0 0 0 1px var(--ls-bullet-threading-focus-background-color); 29 | } 30 | } 31 | 32 | &.bullet-closed:not(:hover) { 33 | background-color: transparent; 34 | } 35 | 36 | :not(:focus-within) .bullet { 37 | background-color: var(--ls-bullet-threading-background-color); 38 | } 39 | } 40 | 41 | // bullet threading 42 | .ls-block { 43 | .block-children-left-border:hover { 44 | background-color: var(--ls-bullet-threading-background-color); 45 | opacity: 0.85; 46 | } 47 | .block-children { 48 | border-left-width: 1px !important; 49 | border-left-color: var(--ls-bullet-threading-background-color); 50 | } 51 | 52 | .bullet { 53 | background-color: var(--ls-bullet-threading-focus-background-color); 54 | box-shadow: 0 0 0 1px var(--ls-bullet-threading-focus-background-color); 55 | } 56 | 57 | .ls-block:focus-within > div > div.items-center::before { 58 | border-color: var(--ls-bullet-threading-focus-background-color); 59 | } 60 | .block-children:focus-within > .ls-block:not(:focus-within)::before { 61 | border-color: var(--ls-bullet-threading-focus-background-color); 62 | } 63 | 64 | // multi-line blocks with children 65 | &[haschild="false"] { 66 | &:focus-within > div > .block-content-wrapper::before { 67 | display: none; 68 | } 69 | } 70 | &[haschild="true"] { 71 | > div > .block-content-wrapper::before { 72 | left: -14px; 73 | } 74 | &:focus-within > div > .block-content-wrapper::before { 75 | border-color: var(--ls-block-bullet-active-color); 76 | } 77 | } 78 | 79 | & > div > div.items-center::before { 80 | right: 15px !important; 81 | } 82 | } 83 | 84 | // == Some cases where bullet threading is not displayed 85 | 86 | @mixin no-bullet-threading() { 87 | .ls-block:focus-within > div > div.items-center::before, 88 | .block-children:focus-within > .ls-block:not(:focus-within)::before, 89 | .ls-block[haschild]:focus-within > div > .block-content-wrapper::before, 90 | .ls-block[haschild] > div > .block-content-wrapper::before { 91 | border: none; 92 | } 93 | 94 | .ls-block[haschild="true"] { 95 | > div > .block-content-wrapper { 96 | border: none; 97 | } 98 | } 99 | } 100 | 101 | .custom-query, 102 | .cards-review .ls-card { 103 | @include no-bullet-threading(); 104 | } 105 | @if(not $IS_BULLET_THREADING) { 106 | @include no-bullet-threading(); 107 | } 108 | 109 | // When the window becomes narrower, 110 | // the bullet spacing of the software will also change, 111 | // perhaps officially to better adapt to mobile. 112 | // CSS cannot be adapted flexibly, so here is a compromise 113 | @media (max-width: 640px) { 114 | @include no-bullet-threading(); 115 | 116 | .ls-block div.block-control-wrap { 117 | position: unset !important; 118 | height: unset !important; 119 | } 120 | 121 | .ls-block .block-control svg { 122 | color: var( --ls-bullet-threading-focus-background-color); 123 | } 124 | } 125 | 126 | 127 | -------------------------------------------------------------------------------- /scss/_code.scss: -------------------------------------------------------------------------------- 1 | /* ==== code block style ===== */ 2 | 3 | @mixin bordeRadius() { 4 | -webkit-border-radius: 10px !important; // Safari 3-4, iOS 1-3.2, Android 1.6- 5 | -moz-border-radius: 10px !important; // Firefox 1-3.6 6 | -khtml-border-radius: 10px !important; // Konqueror 7 | border-radius: 10px !important; // Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ 8 | mask-image: -webkit-radial-gradient(white, black); // Hidden with border radius not working on Safari 9 | } 10 | 11 | // border style 12 | .CodeMirror { 13 | @include bordeRadius(); 14 | } 15 | 16 | // `` 语法的代码块 17 | :not(pre) > code { 18 | background-color: var(--ls-secondary-background-color); 19 | } 20 | 21 | // covering upstream configurations 22 | .CodeMirror, 23 | .CodeMirror-scroll .CodeMirror-sizer , 24 | .CodeMirror-code .CodeMirror-linenumber { 25 | font-family: var(--ct-code-font-family); 26 | box-shadow: none; 27 | text-shadow: none !important; 28 | } 29 | 30 | // horizontal scroll bar style 31 | .CodeMirror-hscrollbar:not(:hover, :active) { 32 | opacity: 0.05; 33 | } 34 | 35 | // upper right corner language display 36 | // not displayed when narrow screen 37 | .extensions__code-lang { 38 | @media screen and (max-width: 640px) { 39 | display: none; 40 | } 41 | background: transparent; 42 | color: var(--code-lang-color); 43 | right: 1%; 44 | top: 1%; 45 | } 46 | 47 | // setting code background style 48 | // and covering upstream configurations 49 | .CodeMirror-scroll .CodeMirror-sizer, 50 | .cm-s-solarized.cm-s-dark { 51 | background: var(--ls-code-background-color) !important; 52 | color: var(--ls-code-color) !important; 53 | } 54 | 55 | // 序号样式 56 | .CodeMirror, .CodeMirror-scroll .CodeMirror-gutters, 57 | .CodeMirror-code .CodeMirror-linenumber, 58 | .cm-s-solarized.cm-s-dark .CodeMirror-gutters { 59 | color: var(--code-lang-color) !important; 60 | background: var(--ls-code-background-color) !important; 61 | } 62 | 63 | // code selected style 64 | .CodeMirror .CodeMirror-lines div.CodeMirror-selected { 65 | background: var(--ls-code-selected-background-color) !important; 66 | font-weight: bolder !important; 67 | } 68 | 69 | // 其余代码样式设计 70 | // https://github.com/flowerornament/logseq-simple-parametric-theme 71 | .cm-s-solarized .CodeMirror-matchingbracket { 72 | text-decoration: underline; 73 | color: #5bdf66 !important; 74 | } 75 | .cm-s-solarized span.cm-comment { 76 | color: #a0a0a0; 77 | } 78 | .cm-s-solarized span.cm-string, 79 | .cm-s-solarized span.cm-string-2 { 80 | color: #e6c963; 81 | } 82 | .cm-s-solarized span.cm-number { 83 | color: #978ade; 84 | } 85 | .cm-s-solarized span.cm-variable { 86 | color: #82aaff; 87 | } 88 | .cm-s-solarized span.cm-variable-2 { 89 | color: rgba(255, 255, 255, 0.7); 90 | } 91 | .cm-s-solarized span.cm-def { 92 | color: #E5C07B !important; 93 | } 94 | .cm-s-solarized span.cm-operator { 95 | color: #f15f60; 96 | } 97 | .cm-s-solarized span.cm-keyword { 98 | color: #f15f60; 99 | } 100 | .cm-s-solarized span.cm-atom { 101 | color: #978ade; 102 | } 103 | .cm-s-solarized span.cm-meta { 104 | color: #E5C07B !important; 105 | } 106 | .cm-s-solarized span.cm-tag { 107 | color: #f07178; 108 | } 109 | .cm-s-solarized span.cm-attribute { 110 | color: #c792ea; 111 | } 112 | .cm-s-solarized span.cm-qualifier { 113 | color: #41b394; 114 | } 115 | .cm-s-solarized span.cm-property { 116 | color: #9bd174; 117 | } 118 | .cm-s-solarized span.cm-builtin { 119 | color: #45add6; 120 | } 121 | .cm-s-solarized span.cm-variable-3, 122 | .cm-s-solarized span.cm-type { 123 | color: orange; 124 | } 125 | 126 | .white-theme .cm-s-solarized span.cm-string, 127 | .white-theme .cm-s-solarized span.cm-string-2 { 128 | color: orange; 129 | } 130 | .white-theme .cm-s-solarized span.cm-variable-2 { 131 | color: rgba(255, 255, 255, 0.7); 132 | } 133 | 134 | // fix code block ref 135 | .block-ref { 136 | // border-bottom: none; 137 | 138 | .block-body > .cp__fenced-code-block div { 139 | display: block !important; 140 | } 141 | } 142 | 143 | .keyboard-shortcut > code { 144 | background-color: var(--ls-secondary-background-color); 145 | box-shadow: none !important; 146 | } -------------------------------------------------------------------------------- /scss/_tag.scss: -------------------------------------------------------------------------------- 1 | /* Tags */ 2 | .dark-theme, .white-theme, 3 | html[data-theme=dark], html[data-theme=light] { 4 | --tag-priority-a-color: var(--ls-tag-priority-a-color, #000); 5 | --tag-priority-b-color: var(--ls-tag-priority-b-color, #000); 6 | --tag-priority-c-color: var(--ls-tag-priority-c-color, #000); 7 | --tag-priority-a-background-color: var(--ls-tag-priority-a-background-color, var(--ct-warning-color)); 8 | --tag-priority-b-background-color: var(--ls-tag-priority-b-background-color, var(--ct-highlight-color)); 9 | --tag-priority-c-background-color: var(--ls-tag-priority-c-background-color, #E9ECEF); 10 | 11 | --tag-color: var(--ls-custom-theme-color); 12 | --tag-background-color: var(--ls-secondary-background-color); 13 | } 14 | 15 | a.tag { 16 | border: none; 17 | color: var(--tag-color); 18 | &:hover { 19 | color: var(--tag-color); 20 | background-color: rgba(var(--tag-background-color), .8); 21 | transform: scale(1.01); 22 | -webkit-transform: scale(1.01); 23 | } 24 | } 25 | 26 | // checkbox Priority style 27 | @mixin tag-priority-style($color, $bg-color) { 28 | background: var($bg-color); 29 | border: var(--background); 30 | color: var($color); 31 | } 32 | a[priority=A]::before, 33 | a.priority[href="#/page/A" i]:before { 34 | content: "A"; 35 | @include tag-priority-style(--tag-priority-a-color, --tag-priority-a-background-color); 36 | } 37 | a[priority=B]::before, 38 | a.priority[href="#/page/B" i]:before { 39 | content: "B"; 40 | @include tag-priority-style(--tag-priority-b-color, --tag-priority-b-background-color); 41 | } 42 | a[priority=C]::before, 43 | a.priority[href="#/page/C" i]:before { 44 | content: "C"; 45 | @include tag-priority-style(--tag-priority-c-color, --tag-priority-c-background-color); 46 | } 47 | 48 | // custom workflow tags 49 | @mixin workflow-tag-show($color) { 50 | color: var($color); 51 | @media (min-width: 640px) { 52 | position: relative; 53 | float: right; 54 | top: 11%; 55 | } 56 | &:hover { 57 | color: var($color); 58 | } 59 | } 60 | a.tag { 61 | // Workflow tags 62 | &[data-ref="fix"], &[data-ref="FIX"], 63 | &[data-ref="Bug"], &[data-ref="bug"], &[data-ref="BUG"] { 64 | --labels-bug-color: var(--ls-labels-bug-color, #D46459); 65 | @include workflow-tag-show(--labels-bug-color); 66 | } 67 | 68 | &[data-ref="Improvement"], &[data-ref="improvement"], &[data-ref="perf"], &[data-ref="PERF"] { 69 | --labels-improvement-color: var(--ls-labels-improvement-color, #4EA7FC); 70 | @include workflow-tag-show(--labels-improvement-color); 71 | } 72 | 73 | &[data-ref="Feature"], &[data-ref="feature"], &[data-ref="feat"], &[data-ref="FEAT"] { 74 | --labels-feature-color: var(--ls-labels-feature-color, #BB87FC); 75 | @include workflow-tag-show(--labels-feature-color); 76 | } 77 | 78 | &[data-ref="Style"], &[data-ref="style"], &[data-ref="STYLE"] { 79 | --labels-style-color: var(--ls-labels-style-color, gray); 80 | @include workflow-tag-show(--labels-style-color); 81 | } 82 | 83 | &[data-ref="Chore"], &[data-ref="chore"], &[data-ref="CHORE"] { 84 | --labels-chore-color: var(--ls-labels-chore-color, gray); 85 | @include workflow-tag-show(--labels-chore-color); 86 | } 87 | 88 | &[data-ref="Test"], &[data-ref="test"], &[data-ref="TEST"] { 89 | --labels-test-color: var(--ls-labels-test-color, #E5DA45); 90 | @include workflow-tag-show(--labels-test-color); 91 | } 92 | 93 | &[data-ref="refactor"], &[data-ref="Refactor"], &[data-ref="REFACTOR"] { 94 | --labels-refactor-color: var(--ls-labels-refactor-color, #00DA97); 95 | @include workflow-tag-show(--labels-refactor-color); 96 | } 97 | 98 | &[data-ref="Documentation"], &[data-ref="documentation"], &[data-ref="docs"], &[data-ref="DOCS"] { 99 | --labels-documentation-color: var(--ls-labels-documentation-color, #39A8FC); 100 | @include workflow-tag-show(--labels-documentation-color); 101 | } 102 | 103 | &[data-ref="question"], &[data-ref="Question"], &[data-ref="QUES"], &[data-ref="ques"] { 104 | --labels-question-color: var(--ls-labels-question-color, #D97ECA); 105 | @include workflow-tag-show(--labels-question-color); 106 | } 107 | 108 | &[data-ref="Idea"], &[data-ref="idea"], &[data-ref="IDEA"] { 109 | --labels-idea-color: var(--ls-labels-idea-color, #5E6AD2); 110 | @include workflow-tag-show(--labels-idea-color); 111 | } 112 | } -------------------------------------------------------------------------------- /scss/_pdf.scss: -------------------------------------------------------------------------------- 1 | /* pdf style */ 2 | // created: 2022-12-16 3 | 4 | :root { 5 | --ls-pdf-dark-background-color: #2B2B33; 6 | --ls-pdf-light-background-color: #F7F7F7; 7 | --ls-pdf-warm-background-color: #F9EFDB; 8 | 9 | --ls-pdf-dark-selected-background-color: #264F78; 10 | --ls-pdf-light-selected-background-color: #B9E7FF; 11 | --ls-pdf-warm-selected-background-color: #B9E7FF; 12 | 13 | --ls-pdf-highlight-red-color: #FCA5A5; 14 | --ls-pdf-highlight-blue-color: #93C5FD; 15 | --ls-pdf-highlight-purple-color: #D884FE; 16 | --ls-pdf-highlight-yellow-color: #FCD34D; 17 | --ls-pdf-highlight-green-color:#86EFAC; 18 | } 19 | 20 | @mixin pdf-page-style { 21 | background-color: var(--pdf-background-color); 22 | span { 23 | font-family: var(--ls-font-family) !important; 24 | &::selection{ 25 | background-color: var(--pdf-selected-background-color); 26 | } 27 | } 28 | .textLayer{ 29 | background-color: var(--pdf-background-color); 30 | opacity: 1; 31 | // search highlight 32 | .highlight.appended { 33 | background-color: transparent; 34 | border:2px dashed #ff3434; 35 | } 36 | .highlight.selected { 37 | background-color: #ff3434; 38 | } 39 | } 40 | } 41 | .extensions__pdf-container[data-theme=dark] { 42 | --pdf-background-color: var(--ls-pdf-dark-background-color, #2B2B33); 43 | --pdf-selected-background-color: var(--ls-pdf-dark-selected-background-color, #264F78); 44 | @include pdf-page-style(); 45 | } 46 | .extensions__pdf-container[data-theme=light] { 47 | --pdf-background-color: var(--ls-pdf-light-background-color, #F7F7F7); 48 | --pdf-selected-background-color: var(--ls-pdf-light-selected-background-color, #B9E7FF); 49 | @include pdf-page-style(); 50 | } 51 | .extensions__pdf-container[data-theme=warm] { 52 | --pdf-background-color: var(--ls-pdf-warm-background-color, #F9EFDB); 53 | --pdf-selected-background-color: var(--ls-pdf-warm-selected-background-color, #B9E7FF); 54 | @include pdf-page-style(); 55 | } 56 | 57 | // scrollbar 58 | .extensions__pdf-container { 59 | .extensions__pdf-viewer { 60 | scrollbar-color: var(--ls-custom-theme-color); /* Firefox */ 61 | &::-webkit-scrollbar { 62 | background: transparent; 63 | } 64 | &::-webkit-scrollbar-thumb { 65 | background: rgba(128, 128, 128, 0.5); 66 | @include bordeRadius(); 67 | } 68 | } 69 | } 70 | 71 | // Tool bar style 72 | .extensions__pdf-container .extensions__pdf-toolbar { 73 | background: transparent !important; 74 | 75 | .r.flex.buttons{ 76 | background: var(--ls-primary-background-color); 77 | opacity: 0.15; 78 | &:is(:hover, :active) { 79 | opacity: 0.9; 80 | } 81 | } 82 | // outline: contens and highlights 83 | .extensions__pdf-outline-panels { 84 | .extensions__pdf-highlights-list-item { 85 | strong { 86 | color: #000; 87 | } 88 | .text-wrap:hover { 89 | color: #000; 90 | } 91 | } 92 | .extensions__pdf-outline-list-content { 93 | a:hover { 94 | color: #000; 95 | background-color: #C5C5C5; 96 | } 97 | a:active { 98 | background-color: #C5C5C5; 99 | } 100 | } 101 | &::-webkit-scrollbar { 102 | background-color: transparent; 103 | } 104 | } 105 | } 106 | 107 | // highlights 108 | @mixin pdf-highligh-style($color) { 109 | background-color: transparent; 110 | border-bottom: 4px double $color; 111 | opacity: .8; 112 | } 113 | .extensions__pdf-hls-text-region { 114 | .hls-text-region-item[data-color=red], 115 | .extensions__pdf-container [data-color=red] { 116 | @include pdf-highligh-style(var(--ls-pdf-highlight-red-color)); 117 | } 118 | .hls-text-region-item[data-color=blue], 119 | .extensions__pdf-container [data-color=blue] { 120 | @include pdf-highligh-style(var(--ls-pdf-highlight-blue-color)); 121 | } 122 | .hls-text-region-item[data-color=purple], 123 | .extensions__pdf-container [data-color=purple] { 124 | @include pdf-highligh-style(var(--ls-pdf-highlight-purple-color)); 125 | } 126 | .hls-text-region-item[data-color=yellow], 127 | .extensions__pdf-container [data-color=yellow] { 128 | @include pdf-highligh-style(var(--ls-pdf-highlight-yellow-color)); 129 | } 130 | .hls-text-region-item[data-color=green], 131 | .extensions__pdf-container [data-color=green] { 132 | @include pdf-highligh-style(var(--ls-pdf-highlight-green-color)); 133 | } 134 | } -------------------------------------------------------------------------------- /readme-zh.md: -------------------------------------------------------------------------------- 1 | # logseq-developer-theme 2 | 3 | ## 更新于 2023-05-31 4 | 有不少用户反映 bullet 线条错乱，此处提供一个解决方案，即在 `logseq/custom.css` 中配置下述代码。更多细节可参考 [logseq-dev-theme#95](https://github.com/pengx17/logseq-dev-theme/issues/95)。 5 | 6 | ```css 7 | .ls-block[haschild] > div > .block-content-wrapper::before { 8 | /* 请尝试调整 left 的变量值，如 -21px */ 9 | left: -21px; 10 | } 11 | 12 | .ls-block > div > div.items-center::before { 13 | /* 请尝试调整 right 的变量值，如 10px */ 14 | right: 10px !important; 15 | } 16 | ``` 17 | 18 | ![](assets/bullet_line.png) 19 | 20 | --- 21 | 22 | [logseq-developer-theme](https://github.com/UNICKCHENG/logseq-developer-theme) 是将 [logseq-dev-theme](https://github.com/pengx17/logseq-dev-theme) 主题作为上游的二次开发，您可以在 [main.scss](scss/main.scss) 看到 `@import` 引用信息。如果您想知道二者的区别，可以通过各自的网站清楚地比较 [logseq-dev-theme](https://pengx17.github.io/knowledge-garden/) 和 [logseq-developer-theme](https://docs.unickcheng.cc) [^1] [^2]，同时这个项目也在 [这篇文章](https://docs.unickcheng.cc/#/page/logseq-developer-theme)下进行跟进。 23 | 24 | **logseq-developer-theme 并不会成为 logseq-dev-theme 2.0**，仅仅因为 logseq-dev-theme 让我更关注于开发期望的 css 样式，因此这个项目不是一个 fork，而是通过 `@import` 来引用它。 25 | 26 | 声明下，我并没有前端的开发经验，但是最好的学习方法应该从一个项目开始。尽管 [scss](https://sass-lang.com/documentation/syntax) 并不是很复杂，可我写的代码确实很差劲。所以我将持续优化代码，您也可以在 [issues](https://github.com/UNICKCHENG/logseq-developer-theme/issues) 中提醒我，或者参与进来。 27 | 28 | ## ✨Features 29 | 30 | - [X] 代码块样式增强，尤其颜色 31 | - [X] 支持部分标签高亮显示，如 `#docs`、`#bug`、`#feat` 等 32 | - [X] 适配中文字体样式 33 | - [X] 支持用户自定义主题颜色 34 | - [X] 支持在插件市场下载 [#297](https://github.com/logseq/marketplace/pull/297) 35 | - [X] 支持离线模式下使用 36 | - [X] 支持自定义 pdf 页面相关颜色 37 | 38 | ## 🎉使用方法 39 | 40 | ### 快速开始 41 | 42 | 您可以借助  jsDelivr CDN 来快速在您的 `custom.css` 中配置 43 | 44 | ```css 45 | @import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css"); 46 | ``` 47 | ⚠️ 请注意，虽然  jsDelivr CDN 比使用 GitHub 自带的方式更快速，但是它无法做到实时更新到最新版本 [^3]。 48 | 49 | ### 从插件市场下载（推荐） 50 | 51 | ![](assets/Pasted%20image%2020221216222925.png) 52 | 53 | 如果您无法从插件市场下载，可以在 [GitHub Release](https://github.com/UNICKCHENG/logseq-developer-theme/releases) 进行下载，解压后再导入到 logseq 54 | 55 | ![](assets/Pasted%20image%2020221216223400.png) 56 | 57 | ![](assets/Pasted%20image%2020221216223545.png) 58 | 59 | 📌 从 1.0.0 版本开始，GitHub Release 或者 Plugin Marketplace 下载，支持离线使用。因为会一起将字体等依赖下载到本地 `~/.logseq/plugins` 目录下。 60 | 61 | ## 效果图 (可能已过时) 62 | 63 | ![](assets/Pasted%20image%2020221210174733.png) 64 | 65 | ![](assets/Pasted%20image%2020221210174750.png) 66 | 67 | ![](assets/Pasted%20image%2020221216232448.png) 68 | 69 | ### 修改主题样式 70 | 71 | 从 0.4.0 版本开始，您也可以自定义主题颜色 😎 72 | 73 | ```css 74 | @import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css"); 75 | 76 | .dark-theme, 77 | html[data-theme=dark] { 78 | --ls-custom-theme-color: #6096BA; 79 | --ls-primary-background-color: #272C35; 80 | --ls-secondary-background-color: #313942; 81 | 82 | --ls-code-color: #fff; 83 | --ls-code-language-color: gray; 84 | --ls-code-background-color: #34343c; 85 | --ls-code-selected-background-color: #32445A; 86 | 87 | --ls-bullet-threading-background-color: #34343c; 88 | --ls-task-done-text-color: gray; 89 | } 90 | ``` 91 | 92 | ![](assets/Pasted%20image%2020221216231143.png) 93 | 94 | ```css 95 | @import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css"); 96 | .white-theme, 97 | html[data-theme=light] { 98 | --ls-custom-theme-color: rgb(224, 80, 27); 99 | --ls-primary-background-color: #ffC017; 100 | --ls-secondary-background-color: #ffcf4d; 101 | 102 | --ls-code-color: gray; 103 | --ls-code-language-color: gray; 104 | --ls-code-background-color: #fff; 105 | --ls-code-selected-background-color: #C0E6FD; 106 | 107 | --ls-bullet-threading-background-color: #ffcf4d; 108 | --ls-task-done-text-color: gray; 109 | } 110 | ``` 111 | ![](assets/Pasted%20image%2020221216231911.png) 112 | 113 | > 更多自定义颜色样式见 [custom-color](custom-color.md) 114 | 115 | ### 标签的加强 116 | 117 | ![](assets/Pasted%20image%2020230117145915.png) 118 | 119 | 考虑到可能会对您原先的文本产生影响，以及多个标签影响内容的阅读性等因素，目前只设置了上图中几个标签的加强。如果您有需要，可以在 `custom.css` 中进行设置，可参考 [#4](https://github.com/UNICKCHENG/logseq-developer-theme/issues/4) 120 | 121 | ## 🚀 本地开发 122 | 123 | **第一步，验证本地环境** 124 | ```bash 125 | node -v 126 | npm -v 127 | git -v 128 | ``` 129 | 130 | **第二步，安装依赖** 131 | ```bash 132 | # > step 1 下载源码 133 | git clone https://github.com/UNICKCHENG/logseq-developer-theme.git 134 | cd logseq-developer-theme 135 | # > step 2 安装依赖 136 | npm install 137 | ``` 138 | 139 | **第三步，修改 `package.json` 中的配置** 140 | - 请将 `localPath` 变量值修改为您的文件路径 141 | ``` 142 | { 143 | ... 144 | "config": { 145 | "localPath": "C:\\Users\\hi\\LocalStation\\BLOG\\docs" 146 | }, 147 | ... 148 | } 149 | ``` 150 | ⚠️ 这里的目的是直接将 SCSS 编译后输出到 `../logseq/custom.css` 151 | 152 | **第四步，运行** 153 | ```bash 154 | # 如果您是 windows 用户 155 | npm run dev:win 156 | 157 | # 如果您是 Mac 或者 Linux 用户 158 | npm run dev 159 | ``` 160 | 161 | 162 | ## ✍️日志 163 | 164 | 您可以在 [logseq-developer-theme](https://docs.unickcheng.cc/#/page/logseq-developer-theme) 查看相关信息 165 | 166 | 167 | ## 💖 感谢 168 | 169 | - [logseq team](https://github.com/logseq/logseq) 170 | - [pengx17/logseq-dev-theme](https://github.com/pengx17/logseq-dev-theme) 171 | - [flowerornament/logseq-simple-parametric-theme](https://github.com/flowerornament/logseq-simple-parametric-theme) 代码块模块样式 172 | - [ryanoasis/nerd-fonts](https://github.com/ryanoasis/nerd-fonts) 关于 DejaVuSansMono 字体支持 173 | - [lxgw/LxgwWenKai-Lite](https://github.com/lxgw/LxgwWenKai-Lite) 关于 LXGWWenKaiLite-Regular 字体支持 174 | - [awesome-logseq](https://github.com/logseq/awesome-logseq) 提供了一份 Logseq 主题清单 175 | - [RemNote](https://github.com/orgs/remnoteio/repositories) 默认主题样式 176 | - 感谢所有开源项目分享的想法和技术 177 | 178 | 179 | [^1]: https://pengx17.github.io/knowledge-garden/ 180 | [^2]: https://docs.unickcheng.cc 181 | [^3]: https://blog.juanertu.com/archives/cbcd1946 -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # logseq-developer-theme 2 | 3 | [![Release](https://github.com/UNICKCHENG/logseq-developer-theme/actions/workflows/release.yml/badge.svg)](https://github.com/UNICKCHENG/logseq-developer-theme/actions/workflows/release.yml) 4 | [![download](https://img.shields.io/github/downloads/UNICKCHENG/logseq-developer-theme/total?color=%230095FF)](https://github.com/UNICKCHENG/logseq-developer-theme/releases) 5 | [![release](https://img.shields.io/github/v/release/UNICKCHENG/logseq-developer-theme)](https://github.com/UNICKCHENG/logseq-developer-theme/releases) 6 | [![logseq-dev-theme](https://img.shields.io/github/v/release/pengx17/logseq-dev-theme?label=logseq-dev-theme)](https://github.com/pengx17/logseq-dev-theme/actions/workflows/main.yml) 7 | [![logseq](https://img.shields.io/github/v/release/logseq/logseq?label=logseq)](https://github.com/logseq/logseq/releases) 8 | 9 | ## UPDATE 2023-05-31 10 | 11 | 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](https://github.com/pengx17/logseq-dev-theme/issues/95). 12 | 13 | 14 | ```css 15 | .ls-block[haschild] > div > .block-content-wrapper::before { 16 | /* Adjust the variable value of "left", such as -21px. */ 17 | left: -21px; 18 | } 19 | 20 | .ls-block > div > div.items-center::before { 21 | /* Adjust the variable value of "right", such as 10px. */ 22 | right: 10px !important; 23 | } 24 | ``` 25 | 26 | ![](assets/bullet_line.png) 27 | 28 | --- 29 | 30 | [中文版](readme-zh.md) 31 | 32 | [logseq-developer-theme](https://github.com/UNICKCHENG/logseq-developer-theme) is a secondary development of the [logseq-dev-theme](https://github.com/pengx17/logseq-dev-theme) theme as an upstream, and you can easily see the `@import` reference in [main.scss](scss/main.scss) . You can clearly compare the differences between [logseq-dev-theme](https://pengx17.github.io/knowledge-garden/) and [logseq-developer-theme](https://docs.unickcheng.cc) via respective website [^1] [^2], for more information see [this article](https://docs.unickcheng.cc/#/page/logseq-developer-theme). 33 | 34 | **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`. 35 | 36 | 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](https://sass-lang.com/documentation/syntax) 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](https://github.com/UNICKCHENG/logseq-developer-theme/issues) or pull request. 37 | 38 | 39 | 40 | ## ✨Features 41 | 42 | - [x] enhance code block style , especially color 43 | - [X] support some tags highlighting， such as `#docs`, `#bug`, `#feat`, etc 44 | - [X] adapt Chinese font style 45 | - [X] support user-defined theme colors 46 | - [X] support download in plugin marketplace [#297](https://github.com/logseq/marketplace/pull/297) 47 | - [X] supports use in offline mode 48 | - [X] supports custom pdf color 49 | 50 | ## 🎉Usage 51 | 52 | ### Quick Start 53 | 54 | Using the jsDelivr CDN to get theme styles , simply add the following code to your `custom.css`. 55 | 56 | ```css 57 | @import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css"); 58 | ``` 59 | ⚠️ Please note that the jsDelivr CDN provides a faster service, but may not be able to refresh the latest version in time [^3] 60 | 61 | ### Download from Plugin Marketplace（Recommend） 62 | 63 | ![](assets/Pasted%20image%2020221216222925.png) 64 | 65 | If you can't download it from the plugin marketplace, you can download it from [GitHub Release](https://github.com/UNICKCHENG/logseq-developer-theme/releases) , unzip it, and then import it into logseq 66 | 67 | ![](assets/Pasted%20image%2020221216223400.png) 68 | ![](assets/Pasted%20image%2020221216223545.png) 69 | 70 | 📌 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. 71 | 72 | ## Demo(may be outdated) 73 | 74 | ![](assets/Pasted%20image%2020221210174733.png) 75 | 76 | ![](assets/Pasted%20image%2020221210174750.png) 77 | 78 | ![](assets/Pasted%20image%2020221216232448.png) 79 | 80 | ### Custom theme styles 81 | 82 | Starting with version 0.4.0, you can also customize the theme colors 😎 83 | 84 | ```css 85 | @import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css"); 86 | 87 | .dark-theme, 88 | html[data-theme=dark] { 89 | --ls-custom-theme-color: #6096BA; 90 | --ls-primary-background-color: #272C35; 91 | --ls-secondary-background-color: #313942; 92 | 93 | --ls-code-color: #fff; 94 | --ls-code-language-color: gray; 95 | --ls-code-background-color: #34343c; 96 | --ls-code-selected-background-color: #32445A; 97 | 98 | --ls-bullet-threading-background-color: #34343c; 99 | --ls-task-done-text-color: gray; 100 | } 101 | ``` 102 | 103 | ![](assets/Pasted%20image%2020221216231143.png) 104 | 105 | ```css 106 | @import url("https://cdn.jsdelivr.net/gh/unickcheng/logseq-developer-theme@release/custom.css"); 107 | .white-theme, 108 | html[data-theme=light] { 109 | --ls-custom-theme-color: rgb(224, 80, 27); 110 | --ls-primary-background-color: #ffC017; 111 | --ls-secondary-background-color: #ffcf4d; 112 | 113 | --ls-code-color: gray; 114 | --ls-code-language-color: gray; 115 | --ls-code-background-color: #fff; 116 | --ls-code-selected-background-color: #C0E6FD; 117 | 118 | --ls-bullet-threading-background-color: #ffcf4d; 119 | --ls-task-done-text-color: gray; 120 | } 121 | ``` 122 | 123 | ![](assets/Pasted%20image%2020221216231911.png) 124 | 125 | > For more custom colors see [custom-color](custom-color.md) 126 | 127 | ### Label enhancement 128 | ![](assets/Pasted%20image%2020230117145915.png) 129 | 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](https://github.com/UNICKCHENG/logseq-developer-theme/issues/4) 130 | 131 | ## 🚀 Local development 132 | 133 | **step 1 > Verify the local environment** 134 | ```bash 135 | node -v 136 | npm -v 137 | git -v 138 | ``` 139 | 140 | **step 2 > Install dependencies** 141 | ```bash 142 | # > step 1 download source code 143 | git clone https://github.com/UNICKCHENG/logseq-developer-theme.git 144 | cd logseq-developer-theme 145 | # > step 2 installing dependencies 146 | npm install 147 | ``` 148 | 149 | **step 3 > Modify `package.json`** 150 | - please modify value of `localPath` to the address of your logseq graph documentation 151 | ``` 152 | { 153 | ... 154 | "config": { 155 | "localPath": "C:\\Users\\hi\\LocalStation\\BLOG\\docs" 156 | }, 157 | ... 158 | } 159 | ``` 160 | ⚠️ The purpose here is to make it easier to compile the SCSS output directly to `../logseq/custom.css` 161 | 162 | **step 4 > Running** 163 | ```bash 164 | # windows 165 | npm run dev:win 166 | 167 | # Mac or Linux 168 | npm run dev 169 | ``` 170 | 171 | ## ✍️Changelog 172 | 173 | You can see more information at [logseq-developer-theme](https://docs.unickcheng.cc/#/page/logseq-developer-theme) 174 | 175 | ## 💖 Credits 176 | 177 | - [logseq team](https://github.com/logseq/logseq) 178 | - [pengx17/logseq-dev-theme](https://github.com/pengx17/logseq-dev-theme) 179 | - [flowerornament/logseq-simple-parametric-theme](https://github.com/flowerornament/logseq-simple-parametric-theme) for code block CSS Style 180 | - [ryanoasis/nerd-fonts](https://github.com/ryanoasis/nerd-fonts) support about DejaVuSansMono Fonts 181 | - [lxgw/LxgwWenKai-Lite](https://github.com/lxgw/LxgwWenKai-Lite) support about LXGWWenKaiLite-Regular Fonts 182 | - [awesome-logseq](https://github.com/logseq/awesome-logseq) provides list of logeseq theme 183 | - [RemNote](https://github.com/orgs/remnoteio/repositories) default theme style 184 | - Thanks to all open source projects for sharing ideas and techniques 185 | 186 | [^1]: https://pengx17.github.io/knowledge-garden/ 187 | [^2]: https://docs.unickcheng.cc 188 | [^3]: https://blog.juanertu.com/archives/cbcd1946 189 | -------------------------------------------------------------------------------- /scss/_other.scss: -------------------------------------------------------------------------------- 1 | // 主区域滚动条隐藏 2 | // 右上角设置按钮滚动条隐藏 3 | body[data-page="all-journals"] #main-content-container::-webkit-scrollbar, 4 | body[data-page="home"] #main-content-container::-webkit-scrollbar, 5 | body[data-page="page"] #main-content-container::-webkit-scrollbar, 6 | .menu-links-wrapper::-webkit-scrollbar { 7 | display: none; 8 | } 9 | body[data-page="all-journals"] #main-content-container 10 | body[data-page="home"] #main-content-container, 11 | body[data-page="page"] #main-content-container, 12 | .menu-links-wrapper { 13 | scrollbar-width: none; /* Firefox */ 14 | -ms-overflow-style: none; /* IE 10+ */ 15 | overflow-x: hidden; 16 | overflow-y: auto; 17 | } 18 | 19 | // setting shortcut page and other 20 | #main-content-container { 21 | &::-webkit-scrollbar { 22 | background-color: transparent; 23 | } 24 | &::-webkit-scrollbar-thumb { 25 | @include bordeRadius(); 26 | } 27 | } 28 | 29 | // 右上角设置操作 30 | .dropdown-wrapper { 31 | border: none !important; 32 | } 33 | .menu-links-wrapper { 34 | box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.5); 35 | } 36 | .menu-links-wrapper .menu-separator { 37 | display: none; 38 | } 39 | 40 | // 右侧页面效果 41 | .sidebar-item-list .page-properties, .sidebar-item-list .block-properties { 42 | background-color: var(--ls-secondary-background-color); 43 | } 44 | // fix: The right page command overflows the page 45 | #right-sidebar-container .editor-inner .absolute[data-modal-name="commands"] { 46 | left: 0px; 47 | } 48 | 49 | // === 外部和内部链接样式 === 50 | 51 | // 正文区域 52 | .page-reference { 53 | &:hover { 54 | background-color: transparent; 55 | } 56 | .page-ref:hover { 57 | color: var(--ls-custom-theme-color); 58 | } 59 | } 60 | a.external-link { 61 | color: var(--ls-custom-theme-color) !important; 62 | } 63 | 64 | // 页面属性&单个 rem 属性 65 | .block-properties.page-properties, 66 | .block-children { 67 | .page-property-key { 68 | color: var(--ls-primary-theme-color); 69 | &:hover { 70 | background-color: transparent; 71 | color: var(--ls-custom-theme-color); 72 | } 73 | } 74 | } 75 | .block-content .block-properties { 76 | background-color: transparent; 77 | } 78 | 79 | // Slash (/), Block content (<), Page reference ([[), Block reference ((() 80 | .editor-inner .absolute[data-modal-name="commands"], 81 | .editor-inner .absolute[data-modal-name="block-commands"], 82 | .editor-inner .absolute[data-modal-name="page-search"], 83 | .editor-inner .absolute[data-modal-name="block-search"] { 84 | .ui__ac-group-name { 85 | color: var(--ls-custom-theme-color); 86 | } 87 | 88 | #ui__ac-inner div > a.chosen { 89 | background-color: var(--ls-secondary-background-color); 90 | } 91 | 92 | &::-webkit-scrollbar { 93 | background-color: transparent; 94 | } 95 | 96 | &::-webkit-scrollbar-thumb { 97 | @include bordeRadius(); 98 | } 99 | } 100 | 101 | // strong fonts 102 | b, strong { 103 | color: var(--ls-custom-theme-color); 104 | font-weight: 300; 105 | } 106 | 107 | // custom h1 h2 h3 h4 h5 title style, just for web 108 | @if ($IS_WEB) { 109 | .ls-block { 110 | :is(h1, h2, .h1, .h2) { 111 | font-size: 18px; 112 | font-weight: 300; 113 | } 114 | :is(h3, h4, h5, .h3, .h4, .h5) { 115 | font-size: 16px; 116 | font-weight: 300; 117 | } 118 | } 119 | } 120 | .ls-block { 121 | :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5) { 122 | &::after { 123 | background-color: transparent; 124 | font-size: 0.55rem; 125 | color: var(--ls-secondary-text-color); 126 | } 127 | } 128 | } 129 | .editor-inner .uniline-block:is(.h1,.h2), 130 | .ls-block :is(h1,h2) { 131 | border-bottom: 1px solid var(--ls-secondary-background-color); 132 | } 133 | 134 | // settings 135 | .settings-modal #settings { 136 | .settings-menu { 137 | li.active { 138 | background-color: var(--ls-secondary-background-color); 139 | } 140 | a strong { 141 | color: var(--ls-primary-text-color); 142 | } 143 | } 144 | .update-state { 145 | background-color: var(--ls-secondary-background-color); 146 | } 147 | .keyboard-shortcut, .action-wrap { 148 | button { 149 | &:not(:hover) { 150 | background-color: var(--ls-secondary-background-color); 151 | } 152 | 153 | .ui__button__tile-separator { 154 | display: none; 155 | } 156 | } 157 | } 158 | .cp__shortcut-page-x ul { 159 | li { 160 | background-color: var(--ls-secondary-background-color); 161 | opacity: 1; 162 | 163 | &.items-center.justify-between { 164 | background-color: transparent; 165 | } 166 | 167 | & > strong { 168 | color: unset !important; 169 | } 170 | } 171 | } 172 | } 173 | 174 | // zotero settings 175 | .zotero-settings .form-input, .zotero-settings .form-select { 176 | box-shadow: none; 177 | } 178 | 179 | // switch theme 180 | .cp__themes-installed .it.is-active { 181 | background-color: var(--ls-secondary-background-color); 182 | color: var(--ls-custom-theme-color); 183 | } 184 | 185 | // ========== plugins pages ============= 186 | 187 | .cp__plugins-page { 188 | 189 | .cp__plugins-item-card { 190 | background-color: var(--ls-secondary-background-color) !important; 191 | 192 | &.installed .de { 193 | li:hover { 194 | background: var(--ls-secondary-background-color); 195 | color: var(--ls-custom-theme-color); 196 | } 197 | } 198 | } 199 | 200 | button { 201 | background-color: transparent !important; 202 | box-shadow: none; 203 | } 204 | 205 | .ui__button-theme-color.ui__button-color-custom { 206 | color: var(--ls-custom-theme-color); 207 | } 208 | 209 | .cp__plugins-installed, .cp__plugins-marketplace { 210 | .search-ctls { 211 | .form-input { 212 | &:focus { 213 | box-shadow: none; 214 | border: 2px solid var(--ls-custom-theme-color); 215 | } 216 | } 217 | } 218 | } 219 | } 220 | 221 | // plugins settings 222 | .cp__plugins-settings .cp__settings-inner { 223 | .desc-item:hover { 224 | background: var(--ls-secondary-background-color); 225 | } 226 | 227 | .cp__plugins-settings-inner .desc-item { 228 | 229 | input[type="text"], textarea { 230 | background: var(--ls-secondary-background-color); 231 | 232 | &:focus { 233 | box-shadow: none; 234 | border: 2px solid var(--ls-custom-theme-color); 235 | } 236 | } 237 | 238 | input[type="radio"] { 239 | background: gray; 240 | box-shadow: none; 241 | 242 | &:hover { 243 | background-color: var(--ls-custom-theme-color); 244 | opacity: 0.7; 245 | } 246 | 247 | &:is(:checked, :focus) { 248 | background-color: var(--ls-custom-theme-color); 249 | } 250 | } 251 | 252 | input[type="range"] { 253 | color: var(--ls-custom-theme-color); 254 | } 255 | 256 | input[type="date"], input[type="datetime-local"] { 257 | color: var(--ls-custom-theme-color); 258 | 259 | &:focus { 260 | box-shadow: none; 261 | border: 2px solid var(--ls-custom-theme-color); 262 | } 263 | } 264 | } 265 | 266 | // plugins list 267 | ul.settings-plugin-list { 268 | list-style: none; 269 | 270 | & > li { 271 | background: transparent; 272 | margin-bottom: 20px; 273 | 274 | strong { 275 | color: var(--ls-primary-text-color); 276 | } 277 | 278 | &:hover { 279 | background: var(--ls-secondary-background-color); 280 | } 281 | 282 | &.active { 283 | strong { 284 | color: var(--ls-custom-theme-color); 285 | } 286 | } 287 | } 288 | } 289 | } 290 | 291 | body[data-page="shortcut-setting"] { 292 | .keyboard-shortcut > code { 293 | background-color: var(--ls-code-background-color); 294 | } 295 | } 296 | 297 | 298 | .references-blocks { 299 | .references-blocks-item { 300 | background-color: var(--ls-secondary-background-color); 301 | } 302 | } --------------------------------------------------------------------------------