├── screenshot.png ├── .github ├── issue_template.md └── pull_request_template.md ├── package.json ├── INSTALL.md ├── LICENSE ├── README.md ├── icon.svg └── custom.css /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dracula/logseq/HEAD/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. -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /icon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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-color: var(--dark-background); 57 | --ls-menu-hover-color: var(--light-background); 58 | --ls-table-tr-even-background-color: var(--light-background); 59 | 60 | --ls-head-text-color: var(--foreground); 61 | --ls-title-text-color: var(--foreground); 62 | 63 | --ls-link-text-color: var(--pink); 64 | --ls-link-text-hover-color: var(--pink-hover); 65 | 66 | --ls-link-ref-text-color: var(--pink); 67 | --ls-link-ref-text-hover-color: var(--pink-hover); 68 | --ls-block-ref-link-text-color: var(--ls-border-color); 69 | 70 | --ls-tag-text-color: var(--purple); 71 | --ls-tag-text-hover-color: var(--purple-hover); 72 | 73 | --ls-block-bullet-border-color: var(--current-line); 74 | --ls-block-bullet-color: var(--foreground); 75 | --ls-block-highlight-color: var(--current-line); 76 | --ls-block-properties-background-color: var(--light-background); 77 | 78 | --ls-page-checkbox-color: transparent; 79 | --ls-page-checkbox-border-color: var(--comment); 80 | 81 | --ls-page-blockquote-color: var(--foreground); 82 | --ls-page-blockquote-bg-color: var(--light-background); 83 | --ls-page-blockquote-border-color: var(--yellow); 84 | --ls-page-properties-background-color: var(--light-background); 85 | 86 | --ls-page-inline-code-color: var(--green); 87 | --ls-page-inline-code-bg-color: var(--background); 88 | 89 | --ls-scrollbar-background-color: var(--background); 90 | --ls-scrollbar-foreground-color: var(--darker-background); 91 | --ls-scrollbar-thumb-hover-color: var(--light-background); 92 | 93 | --ls-icon-color: var(--white-hover); 94 | --ls-search-icon-color: var(--white-hover); 95 | --ls-a-chosen-bg: var(--light-background); 96 | --ls-right-sidebar-code-bg-color: var(--light-background); 97 | --ls-selection-background-color: var(--comment); 98 | --ls-slide-background-color: var(--ls-primary-background-color); 99 | --ls-guideline-color: var(--ls-border-color); 100 | --color-level-1: var(--ls-secondary-background-color); 101 | --color-level-2: var(--ls-primary-background-color); 102 | --color-level-3: var(--ls-quaternary-background-color); 103 | --color-level-4: var(--ls-tertiary-background-color); 104 | --color-level-5: var(--ls-quinary-background-color); 105 | } 106 | 107 | html, 108 | body { 109 | font-weight: var(--ls-font-weight-light); 110 | letter-spacing: var(--ls-font-letter-spacing); 111 | line-height: var(--ls-font-line-height); 112 | font-size: var(--ls-page-text-size); 113 | background-color: #282a36; 114 | } 115 | 116 | i { 117 | color: var(--yellow); 118 | } 119 | 120 | b { 121 | color: var(--orange); 122 | font-weight: var(--ls-font-weight-medium); 123 | } 124 | 125 | ol li::marker, 126 | ul li::marker { 127 | color: var(--cyan); 128 | } 129 | 130 | mark { 131 | background-color: var(--yellow); 132 | color: var(--darker-background); 133 | } 134 | 135 | .bg-orange-400 { 136 | background-color: var(--orange); 137 | } 138 | 139 | .bg-green-600 { 140 | background-color: var(--green); 141 | } 142 | 143 | .bg-red-500 { 144 | background-color: var(--red); 145 | } 146 | 147 | .form-checkbox { 148 | border: 1px solid var(--ls-page-checkbox-border-color) !important; 149 | border-radius: var(--ls-border-radius-low) !important; 150 | } 151 | 152 | .external-link { 153 | color: var(--cyan); 154 | text-decoration: none; 155 | border-bottom: none; 156 | } 157 | 158 | .external-link:hover { 159 | color: var(--cyan-hover); 160 | } 161 | 162 | h1.title, 163 | .ls-block h1, 164 | .ls-block h2, 165 | .ls-block h3, 166 | .ls-block h4, 167 | .ls-block h5, 168 | .ls-block h6 { 169 | color: var(--purple); 170 | font-weight: var(--ls-font-weight-regular); 171 | font-family: var(--ls-font-family),-apple-system,system-ui,sans-serif; 172 | } 173 | 174 | /* Priority tag styling */ 175 | .priority { 176 | color: var(--ls-tag-text-color); 177 | opacity: 1 !important; 178 | font-size: 0px; /* Hide text */ 179 | } 180 | 181 | .priority:hover, 182 | a.tooltip-priority:hover { 183 | color: var(--ls-tag-text-hover-color); 184 | opacity: 0.5; 185 | } 186 | 187 | a.priority[href="#/page/A"]:before { 188 | content: "A"; 189 | background: var(--red); 190 | } 191 | 192 | a.priority[href="#/page/B"]:before { 193 | content: "B"; 194 | background: var(--yellow); 195 | } 196 | 197 | a.priority[href="#/page/C"]:before { 198 | content: "C"; 199 | background: var(--green); 200 | } 201 | 202 | a.priority:before { 203 | font-size: 0.9rem; 204 | font-weight: var(--ls-font-weight-regular); 205 | padding: 1px 4px 0px 3px; 206 | margin: 0px 2px 0px 0px; 207 | border-radius: var(--ls-border-radius-low); 208 | color: var(--ls-primary-background-color); 209 | } 210 | 211 | a.tooltip-priority { 212 | color: var(--ls-tag-text-color); 213 | } 214 | 215 | .Tooltip__label { 216 | background: var(--ls-quinary-background-color); 217 | } 218 | 219 | .Tooltip__label::after { 220 | border-bottom-color: var(--ls-quinary-background-color); 221 | } 222 | 223 | .page-reference .bracket { 224 | color: var(--ls-border-color); 225 | opacity: 0.8; 226 | } 227 | 228 | a.tag { 229 | background: var(--pink); 230 | border-radius: 3px 3px 3px 3px; 231 | padding: 0px 3px; 232 | color: var(--dark-background); 233 | font-weight: var(--ls-font-weight-regular); 234 | } 235 | 236 | a.tag:hover { 237 | background: transparent; 238 | color: var(--pink-hover); 239 | } 240 | 241 | /* 242 | 243 | Name: Dracula for CodeMirror 244 | Author: Michael Kaminsky (http://github.com/mkaminsky11) 245 | Adapted by: Sly Bouhafs 246 | 247 | 248 | Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme) 249 | Adapted for logseq 250 | 251 | */ 252 | 253 | html[data-theme="dark"] .CodeMirror { 254 | font-family: "FiraCode Nerd Font", "Fire Code", monospace; 255 | line-height: 1.2; 256 | background: var(--background); 257 | box-shadow: none; 258 | -webkit-box-shadow: none; 259 | color: var(--white); 260 | } 261 | 262 | html[data-theme="dark"] .cm-s-default .CodeMirror, 263 | html[data-theme="dark"] .CodeMirror .CodeMirror-gutters { 264 | background-color: transparent; 265 | color: var(--white) !important; 266 | border: none; 267 | } 268 | 269 | html[data-theme="dark"] .extensions__code-lang { 270 | background: var(--light-background); 271 | } 272 | 273 | html[data-theme="dark"] #main-content-container code { 274 | background: var(--darker-background); 275 | } 276 | html[data-theme="dark"] #main-content-container .selected code { 277 | background: var(--background); 278 | } 279 | html[data-theme="dark"] #right-sidebar-container code { 280 | background: var(--light-background); 281 | } 282 | html[data-theme="dark"] #right-sidebar-container .selected code { 283 | background: var(--background); 284 | } 285 | 286 | html[data-theme="dark"] .CodeMirror { 287 | border: 5px solid var(--light-background); 288 | } 289 | 290 | html[data-theme="dark"] .CodeMirror .CodeMirror-gutters { 291 | color: var(--background); 292 | } 293 | html[data-theme="dark"] .CodeMirror .CodeMirror-cursor { 294 | border-left: solid thin var(--white); 295 | } 296 | html[data-theme="dark"] .CodeMirror .CodeMirror-linenumber { 297 | color: var(--comment); 298 | } 299 | html[data-theme="dark"] .CodeMirror .CodeMirror-activeline .CodeMirror-linenumber { 300 | /* Color of line number where the cursor is present */ 301 | color: var(--comment); 302 | filter: brightness(1.4); 303 | } 304 | html[data-theme="dark"] .CodeMirror .CodeMirror-gutter { 305 | /* Background color for the line numbers displayed on the left */ 306 | background: var(--background); 307 | } 308 | html[data-theme="dark"] .CodeMirror .CodeMirror-hscrollbar { 309 | margin: 4px; 310 | } 311 | html[data-theme="dark"] .CodeMirror .CodeMirror-selected { 312 | background: rgba(255, 255, 255, 0.1); 313 | } 314 | 315 | html[data-theme="dark"] .CodeMirror .CodeMirror-line { 316 | box-shadow: none; 317 | } 318 | 319 | html[data-theme="dark"] .CodeMirror .CodeMirror-line::selection, 320 | html[data-theme="dark"] .CodeMirror .CodeMirror-line > span::selection, 321 | html[data-theme="dark"] 322 | .cm-s-default 323 | .CodeMirror-line 324 | > span 325 | > span::selection { 326 | background: rgba(255, 255, 255, 0.1); 327 | } 328 | html[data-theme="dark"] .CodeMirror .CodeMirror-line::-moz-selection, 329 | html[data-theme="dark"] .CodeMirror .CodeMirror-line > span::-moz-selection, 330 | html[data-theme="dark"] 331 | .cm-s-default 332 | .CodeMirror-line 333 | > span 334 | > span::-moz-selection { 335 | background: rgba(255, 255, 255, 0.1); 336 | } 337 | html[data-theme="dark"] .CodeMirror span.cm-comment { 338 | color: var(--comment); 339 | } 340 | html[data-theme="dark"] .CodeMirror span.cm-string, 341 | html[data-theme="dark"] .CodeMirror span.cm-string-2 { 342 | color: var(--yellow); 343 | } 344 | html[data-theme="dark"] .CodeMirror span.cm-number { 345 | color: var(--purple); 346 | } 347 | html[data-theme="dark"] .CodeMirror span.cm-variable { 348 | color: var(--green); 349 | } 350 | html[data-theme="dark"] .CodeMirror span.cm-variable-2 { 351 | color: var(--white); 352 | } 353 | html[data-theme="dark"] .CodeMirror span.cm-def { 354 | color: var(--green); 355 | } 356 | html[data-theme="dark"] .CodeMirror span.cm-operator { 357 | color: var(--pink); 358 | } 359 | html[data-theme="dark"] .CodeMirror span.cm-keyword { 360 | color: var(--pink); 361 | } 362 | html[data-theme="dark"] .CodeMirror span.cm-atom { 363 | color: var(--purple); 364 | } 365 | html[data-theme="dark"] .CodeMirror span.cm-meta { 366 | color: var(--white); 367 | } 368 | html[data-theme="dark"] .CodeMirror span.cm-tag { 369 | color: var(--pink); 370 | } 371 | html[data-theme="dark"] .CodeMirror span.cm-attribute { 372 | color: var(--green); 373 | } 374 | html[data-theme="dark"] .CodeMirror span.cm-qualifier { 375 | color: var(--green); 376 | } 377 | html[data-theme="dark"] .CodeMirror span.cm-property { 378 | color: var(--cyan); 379 | } 380 | html[data-theme="dark"] .CodeMirror span.cm-builtin { 381 | color: var(--green); 382 | } 383 | html[data-theme="dark"] .CodeMirror span.cm-variable-3, 384 | html[data-theme="dark"] .CodeMirror span.cm-type { 385 | color: var(--orange); 386 | } 387 | 388 | html[data-theme="dark"] .CodeMirror .CodeMirror-activeline-background { 389 | background: rgba(255, 255, 255, 0.1); 390 | } 391 | html[data-theme="dark"] .CodeMirror .CodeMirror-matchingbracket { 392 | text-decoration: underline; 393 | color: var(--white) !important; 394 | } 395 | 396 | html[data-theme="dark"] #right-sidebar pre.CodeMirror-line { 397 | background: transparent; 398 | } 399 | 400 | /* Fixes logseq calculator mode to line up with our spacing */ 401 | .extensions__code-calc { 402 | padding: 28px 0 0.25em; 403 | background: var(--light-background); 404 | line-height: 1.2; 405 | } 406 | 407 | .extensions__code-calc-output-line { 408 | height: 16.8px !important; 409 | padding-right: 5px; 410 | } 411 | 412 | /* Changes all icons to the same color */ 413 | .ti { 414 | color: var(--ls-icon-color); 415 | } 416 | 417 | /* Changes sidebar link colors to the same color as the icons */ 418 | .left-sidebar-inner a.item > span { 419 | color: var(--ls-icon-color); 420 | } 421 | 422 | /* Menu and dropdown styling */ 423 | .menu-links-wrapper, 424 | .menu-link { 425 | background-color: var(--ls-menu-color); 426 | } 427 | 428 | .menu-link:hover { 429 | background-color: var(--ls-menu-hover-color); 430 | } 431 | 432 | .menu-link.chosen { 433 | background-color: var(--ls-menu-hover-color); 434 | } 435 | 436 | .dropdown-wrapper { 437 | border: 1px solid; 438 | border-color: var(--ls-border-color); 439 | } 440 | 441 | /* Changes the look of the progress bar */ 442 | progress { 443 | vertical-align: middle; 444 | border-radius: 8px; 445 | height: 0.7em; 446 | border: 1px solid var(--ls-border-color); 447 | overflow: hidden; 448 | } 449 | 450 | progress::-webkit-progress-bar { 451 | background: var(--ls-tertiary-background-color); 452 | } 453 | 454 | progress::-webkit-progress-value { 455 | background: var(--green); 456 | } 457 | 458 | /* Dim done/canceled tasks instead of a strike */ 459 | .canceled, .cancelled, .done { 460 | opacity: 0.5; 461 | text-decoration: none; 462 | } 463 | 464 | .editor-inner .uniline-block:is(.h1,.h2), .ls-block :is(h1,h2) { 465 | border-bottom: none; 466 | } 467 | 468 | /* Make "New page" button opaque */ 469 | html[data-theme="dark"] .new-page-link { 470 | background: var(--background); 471 | opacity: 1; 472 | } 473 | --------------------------------------------------------------------------------