├── .gitignore ├── images └── preview.jpg ├── README.md ├── package.json ├── LICENSE └── discord_like_dark.css /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /images/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dale502/logseq-discord-like-dark-theme/HEAD/images/preview.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # logseq-discord-like-dark-theme 2 | ![pic1](https://github.com/dale502/logseq-discord-like-dark-theme/blob/main/images/preview.jpg?raw=true) 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Discord Like Dark Theme", 3 | "author": "dale502", 4 | "version": "0.0.2", 5 | "description": "A theme inspired by Discord's color", 6 | "logseq": { 7 | "themes": [ 8 | { 9 | "name": "Discord Dark", 10 | "url": "./discord_like_dark.css", 11 | "description": "A theme inspired by Discord's color", 12 | "mode": "dark" 13 | } 14 | ], 15 | "id": "Discord Like Dark" 16 | } 17 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 dale502 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 | -------------------------------------------------------------------------------- /discord_like_dark.css: -------------------------------------------------------------------------------- 1 | @import url("https://cdn.jsdelivr.net/gh/pengx17/logseq-dev-theme@1.21.7/bullet_threading.css"); 2 | 3 | :root { 4 | --ls-block-bullet-active-color: #9cb380; 5 | --ls-block-bullet-threading-width: 2px; 6 | } 7 | 8 | 9 | .block-content[data-type=annotation] a.prefix-link:before { 10 | content: "·"; 11 | } 12 | 13 | .done { 14 | text-decoration: none; 15 | opacity: .9; /* Optional */ 16 | } 17 | 18 | :root { 19 | --ls-main-content-max-width: 95%; 20 | --ls-main-content-max-width-wide: 96%; 21 | } 22 | 23 | 24 | .theme-settings, 25 | html[data-theme=dark], 26 | html[data-theme=light] { 27 | --ls-page-title-size: 1.9rem; 28 | } 29 | 30 | 31 | .theme-settings, 32 | html[data-theme=dark] { 33 | --cd-primary-bg-color: #36393F; 34 | --cd-secondary-bg-color: #32353A; 35 | --cd-alternate-bg-color: #2F3136; 36 | --cd-quaternary-bg-color: #2F3136; 37 | --cd-highlight-bg-color: #202225; 38 | 39 | --cd-primary-text-color: #E6E8E8; 40 | --cd-alternate-text-color: #E6E8E8; 41 | 42 | --cd-active-color-1: #404675; 43 | --cd-active-color-2: #4B443E; 44 | --cd-active-color-3: #FAAA1A; 45 | --cd-active-color-4: #444444; 46 | --cd-active-color-5: #08AFF5; 47 | 48 | /* === TASKS === */ 49 | --ts-checkbox-border-radius: 4px; 50 | 51 | --ts-title-color: var(--cd-primary-text-color); 52 | --ts-headline-color: var(--cd-primary-text-color); 53 | --ts-text-bold-color: var(--cd-primary-text-color); 54 | --ts-text-italic-color: var(--cd-primary-text-color); 55 | 56 | /* === CODE BLOCKS === */ 57 | --ts-inline-code-bg: var(--cd-primary-bg-color); 58 | --ts-inline-code-contrast: 85%; 59 | --ts-inline-code-color: var(--cd-primary-text-color); 60 | 61 | /* === EXT LINKS === */ 62 | --ts-ext-link-color: var(--cd-active-color-5); 63 | --ts-ext-link-bg-color: transparent; 64 | --ts-ext-link-border-bottom: 2px solid var(--cd-active-color-5); 65 | 66 | /* === TAGS === */ 67 | --ts-tag-color: #FFFFFF ; 68 | --ts-tag-background-color: var(--cd-active-color-1); 69 | --ts-tag-weight: 400; 70 | --ts-tag-color-hover: var(--cd-primary-bg-color); 71 | --ts-tag-border-hover: 0px solid var(--ts-tag-color-hover); 72 | --ts-tag-border: 0px solid var(--cd-active-color-1); 73 | --ts-tag-border-radius: 4px; 74 | --ts-tag-padding: 0px 4px 0px 4px; 75 | --ts-tag-box-shadow: 0px 0px; 76 | --ts-tag-text-decoration: underline; 77 | --ts-tag-text-decoration-thickness: 2px; 78 | --ts-tag-text-decoration-color: var(--cd-active-color-1); 79 | 80 | /* === PAGE REFERENCES === */ 81 | --ts-page-ref-color: var(--cd-active-color-3); 82 | 83 | --ts-property-border-radius: 4px; 84 | 85 | /* === GUIDELINE === */ 86 | --ts-guideline-inactive-color: var(--cd-active-color-4); 87 | --ts-guideline-active-color: var(--cd-active-color-4); 88 | 89 | } 90 | 91 | .dark-theme, 92 | html[data-theme=dark] { 93 | --ls-primary-background-color: var(--cd-primary-bg-color); 94 | --ls-secondary-background-color: var(--cd-secondary-bg-color); 95 | --ls-tertiary-background-color: var(--cd-alternate-bg-color); 96 | --ls-quaternary-background-color: var(--cd-quaternary-bg-color); 97 | --ls-table-tr-even-background-color: var(--cd-alternate-bg-color); 98 | --ls-block-properties-background-color: var(--cd-alternate-bg-color); 99 | --ls-page-properties-background-color: var(--cd-alternate-bg-color); 100 | --ls-right-sidebar-code-bg-color: var(--cd-alternate-bg-color); /*没反应*/ 101 | 102 | --ls-primary-text-color: var(--cd-primary-text-color); 103 | --ls-secondary-text-color: var(--cd-alternate-text-color); 104 | --ls-active-primary-color: var(--ls-primary-text-color); 105 | --ls-active-secondary-color: var(--ls-secondary-text-color); 106 | 107 | /* == Scrollbars == */ 108 | --ls-scrollbar-foreground-color: var(--cd-highlight-bg-color); 109 | --ls-scrollbar-background-color: var(--cd-quaternary-bg-color); 110 | --ls-scrollbar-thumb-hover-color: var(--cd-highlight-bg-color); 111 | 112 | /* == Code blocks == */ 113 | --ls-page-inline-code-color: var(--cd-primary-text-color); 114 | --ls-page-inline-code-bg-color: var(--cd-highlight-bg-color); 115 | 116 | /* == Checkboxes */ 117 | --ls-page-checkbox-color: var(--cd-active-color-1); 118 | --ls-page-checkbox-border-color: var(--ls-primary-background-color); 119 | 120 | /* == Tags == */ 121 | --ls-tag-text-color: var(--ts-tag-color); 122 | --ls-tag-text-hover-color: var(--ts-tag-color-hover); 123 | 124 | /* == Borders + Outlines */ 125 | --ls-border-color: var(--cd-active-color-4); 126 | --ls-secondary-border-color: var(--cd-active-color-4); 127 | --ls-guideline-color: var(--ts-guideline-inactive-color); 128 | 129 | --ls-menu-hover-color: var(--cd-secondary-bg-color); 130 | --ls-title-text-color: var(--cd-primary-text-color); 131 | --ls-block-highlight-color: var(--cd-highlight-bg-color); 132 | --ls-head-text-color: var(--cd-primary-text-color); 133 | --ls-icon-color: var(--cd-primary-text-color); 134 | --ls-search-icon-color: var(--cd-active-color-1); 135 | --ls-a-chosen-bg: var(--cd-highlight-bg-color); 136 | --ls-block-bullet-border-color: #505050; 137 | --ls-block-bullet-color: #AEB0B3; 138 | } 139 | 140 | .external-link { 141 | color: var(--ts-ext-link-color); 142 | background: var(--ts-ext-link-bg-color); 143 | border-bottom: var(--ts-ext-link-border-bottom); 144 | } 145 | 146 | .form-checkbox { 147 | border-radius: var(--ts-checkbox-border-radius); 148 | } 149 | 150 | /* === TAGS === */ 151 | 152 | a.tag { 153 | background: var(--ts-tag-background-color); 154 | color: var(--ts-tag-color); 155 | font-size: 90%; 156 | font-weight: var(--ts-tag-weight); 157 | padding: var(--ts-tag-padding); 158 | border: var(--ts-tag-border); 159 | border-radius: var(--ts-tag-border-radius); 160 | box-shadow: var(--ts-tag-box-shadow); 161 | text-decoration: var(--ts-tag-text-decoration); 162 | text-decoration-thickness: var(--ts-tag-text-decoration-thickness); 163 | text-decoration-color: var(--ts-tag-text-decoration-color); 164 | text-decoration-skip-ink: var(--ts-tag-text-decoration-skip); 165 | } 166 | 167 | a.tag:hover { 168 | color: var(--ts-tag-color-hover); 169 | } 170 | 171 | .page-ref, 172 | .page-ref:hover { 173 | color: var(--ts-page-ref-color); 174 | font-weight: 450; 175 | background: var(--ts-page-ref-background); 176 | border: var(--ts-page-ref-border); 177 | border-radius: var(--ts-page-ref-border-radius); 178 | padding: var(--ts-page-ref-padding); 179 | } 180 | 181 | .block-properties { 182 | border-radius: var(--ts-property-border-radius); 183 | } 184 | 185 | .CodeMirror-gutter, 186 | .CodeMirror-lines, 187 | .CodeMirror-scroll, 188 | .CodeMirror-sizer { 189 | background: var(--cd-alternate-bg-color); 190 | } 191 | 192 | .ui__modal-panel .panel-content { 193 | width: auto; 194 | } 195 | .ui__modal-panel .panel-content .cp__palette-main { 196 | width: auto; 197 | } 198 | .ui__modal-panel .panel-content .ls-search { 199 | width: 60vw; 200 | } 201 | --------------------------------------------------------------------------------