├── .github ├── issue_template.md └── pull_request_template.md ├── INSTALL.md ├── LICENSE ├── README.md ├── custom.css ├── icon.svg ├── package.json └── screenshot.png /.github/issue_template.md: -------------------------------------------------------------------------------- 1 | > If you're reporting an UI issue, make sure you take a screenshot that shows the actual bug. -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | > If you're fixing a UI issue, make sure you take two screenshots. One that shows the actual bug and another that shows how you fixed it. -------------------------------------------------------------------------------- /INSTALL.md: -------------------------------------------------------------------------------- 1 | ### [logseq](http://logseq.com) 2 | 3 | You can install this theme from the logseq marketplace. 4 | 5 | OR you can follow these old methods: 6 | 7 | - Paste this line to your `logseq/custom.css` file: 8 | - `@import url('https://cdn.jsdelivr.net/gh/dracula/logseq@master/custom.css');` 9 | 10 | OR 11 | 12 | - Paste this line to your `logseq/config.edn` file: 13 | - `:custom-css-url "@import url('https://cdn.jsdelivr.net/gh/dracula/logseq@master/custom.css');"` 14 | 15 | #### Activating theme 16 | 17 | 1. Open the side bar 18 | 2. Go to themes 19 | 3. Choose Dracula 20 | 4. Boom! It's working 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2020 Dracula Theme 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dracula for [Logseq](http://logseq.com) 2 | 3 | > A dark theme for [Logseq](http://logseq.com). 4 | 5 | ![Screenshot](./screenshot.png) 6 | 7 | ## Install 8 | 9 | All instructions can be also found at [draculatheme.com/logseq](https://draculatheme.com/logseq). 10 | 11 | You can install this theme from the logseq marketplace. 12 | 13 | OR you can follow these old methods: 14 | 15 | - Paste this line to your `logseq/custom.css` file: 16 | - `@import url('https://cdn.jsdelivr.net/gh/dracula/logseq@master/custom.css');` 17 | 18 | OR 19 | 20 | - Paste this line to your `logseq/config.edn` file: 21 | - `:custom-css-url "@import url('https://cdn.jsdelivr.net/gh/dracula/logseq@master/custom.css');"` 22 | 23 | ## Team 24 | 25 | This theme is maintained by the following person(s) and a bunch of [awesome contributors](https://github.com/slybouhafs/logseq-dracula/graphs/contributors). 26 | 27 | | [![Sly Bouhafs](https://github.com/slybouhafs.png?size=100)](https://github.com/slybouhafs) | 28 | | ------------------------------------------------------------------------------------------- | 29 | | [Sly Bouhafs](https://github.com/slybouhafs) | 30 | 31 | ## Community 32 | 33 | - [Twitter](https://twitter.com/draculatheme) - Best for getting updates about themes and new stuff. 34 | - [GitHub](https://github.com/dracula/dracula-theme/discussions) - Best for asking questions and discussing issues. 35 | - [Discord](https://draculatheme.com/discord-invite) - Best for hanging out with the community. 36 | 37 | ## License 38 | 39 | [MIT License](./LICENSE) 40 | -------------------------------------------------------------------------------- /custom.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap'); 2 | 3 | .dark-theme, 4 | html[data-theme="dark"] { 5 | --background: #282a36; 6 | --light-background: #343746; 7 | --lighter-background: #424450; 8 | --dark-background: #21222c; 9 | --darker-background: #191a21; 10 | --current-line: #44475a; 11 | --comment: #6272a4; 12 | --white: #f8f8f2; 13 | --white-hover: #f8f8f280; 14 | --red: #ff5555; 15 | --orange: #ffb86c; 16 | --yellow: #f1fa8c; 17 | --green: #50fa7b; 18 | --purple: #bd93f9; 19 | --purple-hover: #bf93f980; 20 | --cyan: #8be9fd; 21 | --cyan-hover: #8be9fd80; 22 | --pink: #ff79c6; 23 | --pink-hover: #ff79c680; 24 | 25 | --ls-tag-text-opacity: 0.8; 26 | --ls-tag-text-hover-opacity: 0.8; 27 | --ls-page-text-size: 16px; 28 | --ls-page-title-size: 36px; 29 | --ls-font-family: "Fira Sans"; 30 | --ls-font-weight-light: 300; 31 | --ls-font-weight-regular: 400; 32 | --ls-font-weight-medium: 500; 33 | --ls-font-letter-spacing: 0.002em; 34 | --ls-font-line-height: 1.5; 35 | 36 | --ls-border-radius-low: 3px; 37 | --ls-border-radius-medium: 6px; 38 | 39 | --foreground: var(--white); 40 | 41 | --ls-primary-background-color: var(--background); 42 | --ls-secondary-background-color: var(--dark-background); 43 | --ls-tertiary-background-color: var(--light-background); 44 | --ls-quaternary-background-color: var(--light-background); 45 | --ls-quinary-background-color: var(--darker-background); 46 | 47 | --ls-active-primary-color: var(--foreground); 48 | --ls-active-secondary-color: var(--foreground); 49 | 50 | --ls-primary-text-color: var(--foreground); 51 | --ls-secondary-text-color: var(--white-hover); 52 | 53 | --ls-search-background-color: var(--background); 54 | --ls-border-color: var(--comment); 55 | --ls-secondary-border-color: var(--ls-border-color); 56 | --ls-menu-hover-color: var(--light-background); 57 | --ls-table-tr-even-background-color: var(--light-background); 58 | 59 | --ls-head-text-color: var(--foreground); 60 | --ls-title-text-color: var(--foreground); 61 | 62 | --ls-link-text-color: var(--pink); 63 | --ls-link-text-hover-color: var(--pink-hover); 64 | 65 | --ls-link-ref-text-color: var(--pink); 66 | --ls-link-ref-text-hover-color: var(--pink-hover); 67 | --ls-block-ref-link-text-color: var(--ls-border-color); 68 | 69 | --ls-tag-text-color: var(--purple); 70 | --ls-tag-text-hover-color: var(--purple-hover); 71 | 72 | --ls-block-bullet-border-color: var(--current-line); 73 | --ls-block-bullet-color: var(--foreground); 74 | --ls-block-highlight-color: var(--current-line); 75 | --ls-block-properties-background-color: var(--light-background); 76 | 77 | --ls-page-checkbox-color: transparent; 78 | --ls-page-checkbox-border-color: var(--comment); 79 | 80 | --ls-page-blockquote-color: var(--foreground); 81 | --ls-page-blockquote-bg-color: var(--light-background); 82 | --ls-page-blockquote-border-color: var(--yellow); 83 | --ls-page-properties-background-color: var(--light-background); 84 | 85 | --ls-page-inline-code-color: var(--green); 86 | --ls-page-inline-code-bg-color: var(--background); 87 | 88 | --ls-scrollbar-background-color: var(--background); 89 | --ls-scrollbar-foreground-color: var(--darker-background); 90 | --ls-scrollbar-thumb-hover-color: var(--light-background); 91 | 92 | --ls-icon-color: var(--white-hover); 93 | --ls-search-icon-color: var(--white-hover); 94 | --ls-a-chosen-bg: var(--light-background); 95 | --ls-right-sidebar-code-bg-color: var(--light-background); 96 | --ls-selection-background-color: var(--comment); 97 | --ls-slide-background-color: var(--ls-primary-background-color); 98 | --ls-guideline-color: var(--ls-border-color); 99 | --color-level-1: var(--ls-secondary-background-color); 100 | --color-level-2: var(--ls-primary-background-color); 101 | --color-level-3: var(--ls-quaternary-background-color); 102 | --color-level-4: var(--ls-tertiary-background-color); 103 | --color-level-5: var(--ls-quinary-background-color); 104 | } 105 | 106 | html, 107 | body { 108 | font-weight: var(--ls-font-weight-light); 109 | letter-spacing: var(--ls-font-letter-spacing); 110 | line-height: var(--ls-font-line-height); 111 | font-size: var(--ls-page-text-size); 112 | background-color: #282a36; 113 | } 114 | 115 | i { 116 | color: var(--yellow); 117 | } 118 | 119 | b { 120 | color: var(--orange); 121 | font-weight: var(--ls-font-weight-medium); 122 | } 123 | 124 | ol li::marker, 125 | ul li::marker { 126 | color: var(--cyan); 127 | } 128 | 129 | mark { 130 | background-color: var(--yellow); 131 | color: var(--darker-background); 132 | } 133 | 134 | .bg-orange-400 { 135 | background-color: var(--orange); 136 | } 137 | 138 | .bg-green-600 { 139 | background-color: var(--green); 140 | } 141 | 142 | .bg-red-500 { 143 | background-color: var(--red); 144 | } 145 | 146 | .form-checkbox { 147 | border: 1px solid var(--ls-page-checkbox-border-color) !important; 148 | border-radius: var(--ls-border-radius-low) !important; 149 | } 150 | 151 | .external-link { 152 | color: var(--cyan); 153 | text-decoration: none; 154 | border-bottom: none; 155 | } 156 | 157 | .external-link:hover { 158 | color: var(--cyan-hover); 159 | } 160 | 161 | h1.title, 162 | .ls-block h1, 163 | .ls-block h2, 164 | .ls-block h3, 165 | .ls-block h4, 166 | .ls-block h5, 167 | .ls-block h6 { 168 | color: var(--purple); 169 | font-weight: var(--ls-font-weight-regular); 170 | font-family: var(--ls-font-family),-apple-system,system-ui,sans-serif; 171 | } 172 | 173 | /* Priority tag styling */ 174 | .priority { 175 | color: var(--ls-tag-text-color); 176 | opacity: 1 !important; 177 | font-size: 0px; /* Hide text */ 178 | } 179 | 180 | .priority:hover, 181 | a.tooltip-priority:hover { 182 | color: var(--ls-tag-text-hover-color); 183 | opacity: 0.5; 184 | } 185 | 186 | a.priority[href="#/page/A"]:before { 187 | content: "A"; 188 | background: var(--red); 189 | } 190 | 191 | a.priority[href="#/page/B"]:before { 192 | content: "B"; 193 | background: var(--yellow); 194 | } 195 | 196 | a.priority[href="#/page/C"]:before { 197 | content: "C"; 198 | background: var(--green); 199 | } 200 | 201 | a.priority:before { 202 | font-size: 0.9rem; 203 | font-weight: var(--ls-font-weight-regular); 204 | padding: 1px 4px 0px 3px; 205 | margin: 0px 2px 0px 0px; 206 | border-radius: var(--ls-border-radius-low); 207 | color: var(--ls-primary-background-color); 208 | } 209 | 210 | a.tooltip-priority { 211 | color: var(--ls-tag-text-color); 212 | } 213 | 214 | .Tooltip__label { 215 | background: var(--ls-quinary-background-color); 216 | } 217 | 218 | .Tooltip__label::after { 219 | border-bottom-color: var(--ls-quinary-background-color); 220 | } 221 | 222 | .page-reference .bracket { 223 | color: var(--ls-border-color); 224 | opacity: 0.8; 225 | } 226 | 227 | a.tag { 228 | background: var(--pink); 229 | border-radius: 3px 3px 3px 3px; 230 | padding: 0px 3px; 231 | color: var(--dark-background); 232 | font-weight: var(--ls-font-weight-regular); 233 | } 234 | 235 | a.tag:hover { 236 | background: transparent; 237 | color: var(--pink-hover); 238 | } 239 | 240 | /* 241 | 242 | Name: Dracula for CodeMirror 243 | Author: Michael Kaminsky (http://github.com/mkaminsky11) 244 | Adapted by: Sly Bouhafs 245 | 246 | 247 | Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme) 248 | Adapted for logseq 249 | 250 | */ 251 | 252 | html[data-theme="dark"] .CodeMirror { 253 | font-family: "FiraCode Nerd Font", "Fire Code", monospace; 254 | line-height: 1.2; 255 | background: var(--background); 256 | box-shadow: none; 257 | -webkit-box-shadow: none; 258 | color: var(--white); 259 | } 260 | 261 | html[data-theme="dark"] .cm-s-default .CodeMirror, 262 | html[data-theme="dark"] .CodeMirror .CodeMirror-gutters { 263 | background-color: transparent; 264 | color: var(--white) !important; 265 | border: none; 266 | } 267 | 268 | html[data-theme="dark"] .extensions__code-lang { 269 | background: var(--light-background); 270 | } 271 | 272 | html[data-theme="dark"] #main-content-container code { 273 | background: var(--darker-background); 274 | } 275 | html[data-theme="dark"] #main-content-container .selected code { 276 | background: var(--background); 277 | } 278 | html[data-theme="dark"] #right-sidebar-container code { 279 | background: var(--light-background); 280 | } 281 | html[data-theme="dark"] #right-sidebar-container .selected code { 282 | background: var(--background); 283 | } 284 | 285 | html[data-theme="dark"] .CodeMirror { 286 | border: 5px solid var(--light-background); 287 | } 288 | 289 | html[data-theme="dark"] .CodeMirror .CodeMirror-gutters { 290 | color: var(--background); 291 | } 292 | html[data-theme="dark"] .CodeMirror .CodeMirror-cursor { 293 | border-left: solid thin var(--white); 294 | } 295 | html[data-theme="dark"] .CodeMirror .CodeMirror-linenumber { 296 | color: var(--comment); 297 | } 298 | html[data-theme="dark"] .CodeMirror .CodeMirror-activeline .CodeMirror-linenumber { 299 | /* Color of line number where the cursor is present */ 300 | color: var(--comment); 301 | filter: brightness(1.4); 302 | } 303 | html[data-theme="dark"] .CodeMirror .CodeMirror-gutter { 304 | /* Background color for the line numbers displayed on the left */ 305 | background: var(--background); 306 | } 307 | html[data-theme="dark"] .CodeMirror .CodeMirror-hscrollbar { 308 | margin: 4px; 309 | } 310 | html[data-theme="dark"] .CodeMirror .CodeMirror-selected { 311 | background: rgba(255, 255, 255, 0.1); 312 | } 313 | 314 | html[data-theme="dark"] .CodeMirror .CodeMirror-line { 315 | box-shadow: none; 316 | } 317 | 318 | html[data-theme="dark"] .CodeMirror .CodeMirror-line::selection, 319 | html[data-theme="dark"] .CodeMirror .CodeMirror-line > span::selection, 320 | html[data-theme="dark"] 321 | .cm-s-default 322 | .CodeMirror-line 323 | > span 324 | > span::selection { 325 | background: rgba(255, 255, 255, 0.1); 326 | } 327 | html[data-theme="dark"] .CodeMirror .CodeMirror-line::-moz-selection, 328 | html[data-theme="dark"] .CodeMirror .CodeMirror-line > span::-moz-selection, 329 | html[data-theme="dark"] 330 | .cm-s-default 331 | .CodeMirror-line 332 | > span 333 | > span::-moz-selection { 334 | background: rgba(255, 255, 255, 0.1); 335 | } 336 | html[data-theme="dark"] .CodeMirror span.cm-comment { 337 | color: var(--comment); 338 | } 339 | html[data-theme="dark"] .CodeMirror span.cm-string, 340 | html[data-theme="dark"] .CodeMirror span.cm-string-2 { 341 | color: var(--yellow); 342 | } 343 | html[data-theme="dark"] .CodeMirror span.cm-number { 344 | color: var(--purple); 345 | } 346 | html[data-theme="dark"] .CodeMirror span.cm-variable { 347 | color: var(--green); 348 | } 349 | html[data-theme="dark"] .CodeMirror span.cm-variable-2 { 350 | color: var(--white); 351 | } 352 | html[data-theme="dark"] .CodeMirror span.cm-def { 353 | color: var(--green); 354 | } 355 | html[data-theme="dark"] .CodeMirror span.cm-operator { 356 | color: var(--pink); 357 | } 358 | html[data-theme="dark"] .CodeMirror span.cm-keyword { 359 | color: var(--pink); 360 | } 361 | html[data-theme="dark"] .CodeMirror span.cm-atom { 362 | color: var(--purple); 363 | } 364 | html[data-theme="dark"] .CodeMirror span.cm-meta { 365 | color: var(--white); 366 | } 367 | html[data-theme="dark"] .CodeMirror span.cm-tag { 368 | color: var(--pink); 369 | } 370 | html[data-theme="dark"] .CodeMirror span.cm-attribute { 371 | color: var(--green); 372 | } 373 | html[data-theme="dark"] .CodeMirror span.cm-qualifier { 374 | color: var(--green); 375 | } 376 | html[data-theme="dark"] .CodeMirror span.cm-property { 377 | color: var(--cyan); 378 | } 379 | html[data-theme="dark"] .CodeMirror span.cm-builtin { 380 | color: var(--green); 381 | } 382 | html[data-theme="dark"] .CodeMirror span.cm-variable-3, 383 | html[data-theme="dark"] .CodeMirror span.cm-type { 384 | color: var(--orange); 385 | } 386 | 387 | html[data-theme="dark"] .CodeMirror .CodeMirror-activeline-background { 388 | background: rgba(255, 255, 255, 0.1); 389 | } 390 | html[data-theme="dark"] .CodeMirror .CodeMirror-matchingbracket { 391 | text-decoration: underline; 392 | color: var(--white) !important; 393 | } 394 | 395 | html[data-theme="dark"] #right-sidebar pre.CodeMirror-line { 396 | background: transparent; 397 | } 398 | 399 | /* Fixes logseq calculator mode to line up with our spacing */ 400 | .extensions__code-calc { 401 | padding: 28px 0 0.25em; 402 | background: var(--light-background); 403 | line-height: 1.2; 404 | } 405 | 406 | .extensions__code-calc-output-line { 407 | height: 16.8px !important; 408 | padding-right: 5px; 409 | } 410 | 411 | /* Changes all icons to the same color */ 412 | .ti { 413 | color: var(--ls-icon-color); 414 | } 415 | 416 | /* Changes sidebar link colors to the same color as the icons */ 417 | .left-sidebar-inner a.item > span { 418 | color: var(--ls-icon-color); 419 | } 420 | 421 | /* Changes the look of the progress bar */ 422 | progress { 423 | vertical-align: middle; 424 | border-radius: 8px; 425 | height: 0.7em; 426 | border: 1px solid var(--ls-border-color); 427 | overflow: hidden; 428 | } 429 | 430 | progress::-webkit-progress-bar { 431 | background: var(--ls-tertiary-background-color); 432 | } 433 | 434 | progress::-webkit-progress-value { 435 | background: var(--green); 436 | } 437 | 438 | /* Dim done/canceled tasks instead of a strike */ 439 | .canceled, .cancelled, .done { 440 | opacity: 0.5; 441 | text-decoration: none; 442 | } 443 | 444 | .editor-inner .uniline-block:is(.h1,.h2), .ls-block :is(h1,h2) { 445 | border-bottom: none; 446 | } 447 | 448 | /* Make "New page" button opaque */ 449 | html[data-theme="dark"] .new-page-link { 450 | background: var(--background); 451 | opacity: 1; 452 | } 453 | -------------------------------------------------------------------------------- /icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "logseq-dracula-theme", 3 | "description": "🧛 Dark theme for Logseq.", 4 | "author": "slybouhafs", 5 | "version": "0.0.6", 6 | "repo": "dracula/logseq", 7 | "logseq": { 8 | "themes": [ 9 | { 10 | "name": "Dracula theme", 11 | "url": "./custom.css", 12 | "description": "🧛 Dark theme for Logseq.", 13 | "mode": "dark" 14 | } 15 | ], 16 | "id": "dracula_logseq", 17 | "icon": "./icon.svg" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dracula/logseq/8e99666949f4520838fea99c102e527c0f641f34/screenshot.png --------------------------------------------------------------------------------