├── icon.png ├── eink-plus-dark.png ├── eink-plus-light.png ├── README.md ├── package.json ├── LICENSE └── theme.css /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/candideu/logseq-eink-plus/HEAD/icon.png -------------------------------------------------------------------------------- /eink-plus-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/candideu/logseq-eink-plus/HEAD/eink-plus-dark.png -------------------------------------------------------------------------------- /eink-plus-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/candideu/logseq-eink-plus/HEAD/eink-plus-light.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [High Contrast e-ink Plus Theme for Logseq](https://github.com/candideu/logseq-eink-plus) 2 | 3 | Get into your writing groove with this sleek, minimal, high contrast theme. 4 | 5 | This theme extends [DiamondYuan's eink theme](https://github.com/DiamondYuan/logseq-eink-theme) by providing a dark mode and other enhancements. 6 | 7 | ## Dark Mode 8 | 9 | ![image](eink-plus-dark.png) 10 | 11 | ## Light Mode 12 | 13 | ![image](eink-plus-light.png) 14 | 15 | PRs are welcome! 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "e-ink-plus", 3 | "version": "0.0.1", 4 | "repository": "git@github.com:candideu/logseq-eink-plus.git", 5 | "author": "Candide, DiamondYuan ", 6 | "description": "A high-contrast, desaturated, and minimal theme", 7 | "license": "MIT", 8 | "logseq": { 9 | "themes": [ 10 | { 11 | "name": "e-ink plus", 12 | "url": "theme.css", 13 | "description": "A high-contrast, desaturated, and minimal theme" 14 | } 15 | ], 16 | "id": "logseq-eink-plus-theme", 17 | "title": "High Contrast e-ink Plus Theme", 18 | "icon": "icon.png" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Candide U 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 | -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | /* Dark theme global variables */ 2 | 3 | html[data-theme="dark"], 4 | .dark-theme { 5 | background-color: black; 6 | --ls-primary-background-color: black; 7 | --ls-secondary-background-color: #1c1c1c; 8 | --ls-tertiary-background-color: #121212; 9 | --ls-quaternary-background-color: #5a5a5a; 10 | 11 | --ls-table-tr-even-background-color: #3f3f3f48; 12 | 13 | --ls-block-properties-background-color: #3e3e3eab; 14 | --ls-page-properties-background-color: #3e3e3e; 15 | --ls-block-ref-link-text-color: #767676; 16 | 17 | --ls-border-color: white; 18 | --ls-secondary-border-color: white; 19 | --ls-tertiary-border-color: rgba(255, 255, 255, 0.1); 20 | 21 | --ls-guideline-color: white; 22 | 23 | --ls-primary-text-color: white; 24 | --ls-secondary-text-color: white; 25 | --ls-title-text-color: white; 26 | --ls-link-text-color: #bbbbbb; 27 | --ls-header-button-background: white; 28 | 29 | --ls-block-bullet-border-color: #585858; 30 | --ls-block-bullet-color: #919191; 31 | --ls-block-highlight-color: #4b4b4b; 32 | 33 | --ls-selection-text-color: #fff; 34 | 35 | --ls-page-checkbox-color: #a0a0a0; 36 | 37 | --ls-page-inline-code-bg-color: #2a2a2a; 38 | 39 | --ls-scrollbar-foreground-color: #5f5f5f; 40 | 41 | --ls-cloze-text-color: #bcbcbc; 42 | 43 | --ls-pie-bg-color: #3b3b3b; 44 | --ls-pie-fg-color: #696969; 45 | --ls-focus-ring-color: rgba(119, 119, 119, 0.5); 46 | 47 | --color-level-4: #6c6c6c; 48 | --color-level-5: #7d7d7d; 49 | --color-level-6: #8e8e8e; 50 | } 51 | 52 | /* Page reference */ 53 | 54 | .page-reference .bracket { 55 | opacity: 0.9; 56 | } 57 | 58 | html[data-theme="light"] .page-ref { 59 | color: black; 60 | } 61 | html[data-theme="dark"] .page-ref { 62 | color: white; 63 | } 64 | 65 | /* Right sidebar */ 66 | 67 | div#right-sidebar { 68 | transition: all 0s; 69 | -webkit-transition: all 0s; 70 | } 71 | 72 | /* Settings Menu */ 73 | 74 | html[data-theme="dark"] .cp__header a, 75 | html[data-theme="dark"] .cp__header button, 76 | html[data-theme="dark"] .cp__right-sidebar-topbar button { 77 | opacity: 1; 78 | } 79 | 80 | html[data-theme="light"] .cp__header .chosen a { 81 | color: white; 82 | opacity: 1; 83 | } 84 | html[data-theme="dark"] .cp__header .chosen a { 85 | color: black; 86 | opacity: 1; 87 | } 88 | 89 | html[data-theme="light"] .cp__header a:hover { 90 | color: black; 91 | background: white; 92 | } 93 | html[data-theme="dark"] .cp__header a:hover { 94 | color: white; 95 | background: black; 96 | } 97 | 98 | /* Highlights */ 99 | 100 | html[data-theme="light"] mark { 101 | background: rgba(0, 0, 0, 0.06); 102 | color: black; 103 | } 104 | html[data-theme="dark"] mark { 105 | background: rgba(255, 255, 255, 0.307); 106 | color: white; 107 | } 108 | 109 | /* Highlight search term in searches */ 110 | 111 | html[data-theme="light"] .chosen mark { 112 | background: white; 113 | color: rgba(0, 0, 0, 0.7); 114 | } 115 | 116 | html[data-theme="dark"] .chosen mark { 117 | background: black; 118 | color: rgba(255, 255, 255, 0.936); 119 | } 120 | 121 | /* Text area */ 122 | 123 | html[data-theme="light"] textarea::selection { 124 | background-color: black !important; 125 | color: white !important; 126 | } 127 | html[data-theme="light"] ::selection { 128 | background-color: black !important; 129 | color: white !important; 130 | } 131 | 132 | html[data-theme="dark"] textarea::selection { 133 | background-color: white !important; 134 | color: black !important; 135 | } 136 | html[data-theme="dark"] ::selection { 137 | background-color: white !important; 138 | color: black !important; 139 | } 140 | 141 | /* Bullet container bullets */ 142 | 143 | html[data-theme="light"] .bullet-container .bullet { 144 | background-color: black; 145 | } 146 | 147 | html[data-theme="light"] .bullet-container.as-order-list.typed-list .bullet { 148 | /*numbered lists*/ 149 | background-color: none; 150 | color: black; 151 | } 152 | 153 | html[data-theme="dark"] .bullet-container .bullet { 154 | background-color: white; 155 | } 156 | 157 | html[data-theme="dark"] .bullet-container.as-order-list.typed-list .bullet { 158 | /*numbered lists*/ 159 | background-color: none; 160 | color: white; 161 | } 162 | 163 | /* SVG icons */ 164 | 165 | html[data-theme="light"] svg { 166 | color: black !important; 167 | } 168 | html[data-theme="dark"] svg { 169 | color: white !important; 170 | } 171 | 172 | /* Repo name */ 173 | 174 | html[data-theme="light"] #repo-name { 175 | color: black !important; 176 | } 177 | html[data-theme="dark"] #repo-name { 178 | color: white !important; 179 | } 180 | 181 | /* Settings menu dropdown div */ 182 | 183 | html[data-theme="dark"] .dropdown-wrapper { 184 | border: 1px solid white !important; 185 | } 186 | 187 | /* Search box and modals */ 188 | 189 | html[data-theme="light"] .search-ac { 190 | border: 1px solid black !important; 191 | border-radius: 0px; 192 | } 193 | html[data-theme="dark"] .search-ac { 194 | border: 1px solid white !important; 195 | border-radius: 0px; 196 | } 197 | html[data-theme="light"] .absolute-modal { 198 | border-radius: 0px; 199 | border: 1px solid black; 200 | border-top: none; 201 | } 202 | html[data-theme="dark"] .absolute-modal { 203 | border-radius: 0px; 204 | border: 1px solid white; 205 | border-top: none; 206 | } 207 | html[data-theme="light"] .ui__ac-group-name { 208 | color: black !important; 209 | } 210 | html[data-theme="dark"] .ui__ac-group-name { 211 | color: white !important; 212 | } 213 | html[data-theme="light"] a.chosen { 214 | background-color: black !important; 215 | color: white !important; 216 | } 217 | html[data-theme="dark"] a.chosen { 218 | background-color: white !important; 219 | color: black !important; 220 | } 221 | html[data-theme="light"] a.chosen p { 222 | color: white !important; 223 | } 224 | html[data-theme="light"] a.chosen p, 225 | html[data-theme="light"] a.chosen .breadcrumb.block-parents a, 226 | html[data-theme="light"] a.chosen .breadcrumb.block-parents svg { 227 | color: white !important; 228 | } 229 | html[data-theme="dark"] a.chosen p, 230 | html[data-theme="dark"] a.chosen .breadcrumb.block-parents a, 231 | html[data-theme="dark"] a.chosen .breadcrumb.block-parents svg { 232 | color: black !important; 233 | } 234 | 235 | /* --- */ 236 | 237 | .menu-link { 238 | border-radius: 0px !important; 239 | } 240 | html[data-theme="light"] .selected { 241 | background-color: black !important; 242 | color: white !important; 243 | } 244 | html[data-theme="dark"] .selected { 245 | background-color: white !important; 246 | color: black !important; 247 | } 248 | html[data-theme="light"] .selected a { 249 | color: white !important; 250 | } 251 | html[data-theme="dark"] .selected a { 252 | color: black !important; 253 | } 254 | html[data-theme="light"] .selected .bullet { 255 | background-color: white !important; 256 | } 257 | html[data-theme="dark"] .selected .bullet { 258 | background-color: black !important; 259 | } 260 | 261 | html[data-theme="light"] .selected .bracket { 262 | color: white !important; 263 | } 264 | html[data-theme="dark"] .selected .bracket { 265 | color: black !important; 266 | } 267 | 268 | /* Right sidebar */ 269 | 270 | html[data-theme="light"] .cp__right-sidebar .open { 271 | border-left: 1px solid black !important; 272 | } 273 | html[data-theme="dark"] .cp__right-sidebar .open { 274 | border-left: 1px solid white !important; 275 | } 276 | 277 | /* Link hover */ 278 | 279 | html[data-theme="light"] .menu-link:hover { 280 | background-color: black !important; 281 | color: white !important; 282 | } 283 | html[data-theme="dark"] .menu-link:hover { 284 | background-color: white !important; 285 | color: black !important; 286 | } 287 | 288 | /* Checkboxes */ 289 | 290 | html[data-theme="light"] .form-checkbox, 291 | html[data-theme="light"] .form-radio { 292 | background-color: white; 293 | border: solid black 1px; 294 | color: black; 295 | } 296 | 297 | html[data-theme="light"] .form-checkbox:checked { 298 | background-color: black; 299 | } 300 | 301 | /* --- */ 302 | 303 | html[data-theme="light"] .content .color-level { 304 | border: 1px solid black !important; 305 | background: white; 306 | } 307 | html[data-theme="dark"] .content .color-level { 308 | border: 1px solid white !important; 309 | background: black; 310 | } 311 | 312 | /* Context menu */ 313 | 314 | html[data-theme="light"] .custom-context-menu { 315 | border: 1px solid black !important; 316 | } 317 | html[data-theme="dark"] .custom-context-menu { 318 | border: 1px solid white !important; 319 | } 320 | 321 | /* Blockquote */ 322 | 323 | html[data-theme="light"] blockquote { 324 | border: 1px dashed black !important; 325 | border-left: 2px solid black !important; 326 | background-color: white; 327 | } 328 | html[data-theme="dark"] blockquote { 329 | border: 1px dashed white !important; 330 | border-left: 2px solid white !important; 331 | background-color: black; 332 | } 333 | 334 | /* Code Blocks */ 335 | .cm-s-solarized.cm-s-light { 336 | background-color: white; 337 | border: black solid 1px; 338 | } 339 | 340 | .cm-s-solarized.cm-s-dark { 341 | background-color: black; 342 | border: white solid 1px; 343 | } 344 | 345 | html[data-theme="light"] .extensions__code-lang { 346 | border: black 1px solid; 347 | } 348 | 349 | html[data-theme="dark"] .extensions__code-lang { 350 | border: white 1px solid; 351 | } 352 | 353 | .cm-s-solarized.cm-s-light .CodeMirror-gutters { 354 | background-color: var(--ls-secondary-background-color); 355 | } 356 | 357 | .cm-s-solarized.cm-s-dark .CodeMirror-gutters { 358 | background-color: var(--ls-secondary-background-color); 359 | } 360 | 361 | /* ScrollBar */ 362 | 363 | html[data-theme="light"] html ::-webkit-scrollbar { 364 | border-left: 1px solid black; 365 | } 366 | html[data-theme="dark"] html ::-webkit-scrollbar { 367 | border-left: 1px solid white; 368 | } 369 | 370 | html[data-theme="light"] html ::-webkit-scrollbar-thumb { 371 | background-color: black !important; 372 | } 373 | html[data-theme="dark"] html ::-webkit-scrollbar-thumb { 374 | background-color: white !important; 375 | } 376 | 377 | /* SideBar */ 378 | 379 | html[data-theme="light"] #right-sidebar-container { 380 | border-left: 1px solid black !important; 381 | } 382 | html[data-theme="dark"] #right-sidebar-container { 383 | border-left: 1px solid white !important; 384 | } 385 | 386 | html[data-theme="light"] .sidebar-item { 387 | box-shadow: none; 388 | border-bottom: 1px solid black !important; 389 | } 390 | html[data-theme="dark"] .sidebar-item { 391 | box-shadow: none; 392 | border-bottom: 1px solid white !important; 393 | } 394 | 395 | html[data-theme="light"] .pt-4 { 396 | padding: 1rem; 397 | border: 1px solid black !important; 398 | } 399 | html[data-theme="dark"] .pt-4 { 400 | padding: 1rem; 401 | border: 1px solid white !important; 402 | } 403 | 404 | /* Editor */ 405 | 406 | .white-theme, 407 | html[data-theme="light"] { 408 | --ls-guideline-color: rgba(00, 00, 00, 0.7); 409 | } 410 | 411 | /* --- */ 412 | .white-theme, 413 | html[data-theme="light"] { 414 | --ls-link-text-color: rgba(00, 00, 00, 0.7); 415 | } 416 | 417 | .open-block-ref-link { 418 | opacity: 1; 419 | border: 1px solid var(--ls-link-text-color); 420 | } 421 | 422 | /* Flashcards */ 423 | html[data-theme="light"] div[data-refs-self*='"card"'] { 424 | border: black solid 1px; 425 | } 426 | html[data-theme="dark"] div[data-refs-self*='"card"'] { 427 | border: white solid 1px; 428 | } 429 | 430 | /*notifications*/ 431 | html[data-theme="dark"] .ui__notifications .notification-area { 432 | border: white 1px solid; 433 | } 434 | 435 | html[data-theme="light"] .ui__notifications .notification-area { 436 | border: black 1px solid; 437 | } 438 | 439 | /* Popper */ 440 | .tippy-popper[x-placement^="top"] [x-arrow] { 441 | border: none; 442 | } 443 | 444 | .tippy-popper[x-placement^="top"] [x-arrow].arrow-small { 445 | border: none; 446 | } 447 | 448 | .tippy-popper[x-placement^="bottom"] [x-arrow] { 449 | border: none; 450 | } 451 | 452 | .tippy-popper[x-placement^="bottom"] [x-arrow].arrow-small { 453 | border: none; 454 | } 455 | 456 | .tippy-tooltip { 457 | border: 1px solid rgba(00, 00, 00, 0.7); 458 | } 459 | 460 | html[data-theme="light"] .cp__palette-main .chosen { 461 | background-color: black !important; 462 | } 463 | html[data-theme="dark"] .cp__palette-main .chosen { 464 | background-color: white !important; 465 | } 466 | html[data-theme="light"] .cp__palette-main .chosen code:first-child { 467 | color: white; 468 | opacity: 1; 469 | } 470 | html[data-theme="dark"] .cp__palette-main .chosen code:first-child { 471 | color: black; 472 | opacity: 1; 473 | } 474 | html[data-theme="light"] .ui__modal-panel { 475 | border: 1px solid black !important; 476 | } 477 | html[data-theme="dark"] .ui__modal-panel { 478 | border: 1px solid white !important; 479 | background-color: black; 480 | } 481 | 482 | html[data-theme="light"] .cp__palette-main code:nth-child(2) { 483 | background: rgba(00, 00, 00, 0.3); 484 | color: white; 485 | } 486 | html[data-theme="dark"] .cp__palette-main code:nth-child(2) { 487 | background: rgba(255, 255, 255, 0.3); 488 | color: black; 489 | } 490 | 491 | html[data-theme="light"] .cp__palette-main .chosen code:nth-child(2) { 492 | background: white; 493 | color: black; 494 | } 495 | html[data-theme="dark"] .cp__palette-main .chosen code:nth-child(2) { 496 | background: black; 497 | color: white; 498 | } 499 | --------------------------------------------------------------------------------