├── README.md ├── custom.css ├── harmony-demo-black.png ├── harmony-demo-white.png ├── logo.png └── package.json /README.md: -------------------------------------------------------------------------------- 1 | ![ukraine](https://github.githubassets.com/images/icons/emoji/unicode/1f1fa-1f1e6.png) UKRAINE [IS BEING ATTACKED](https://twitter.com/MFA_Ukraine) BY RUSSIAN ARMY. CIVILIANS ARE GETTING KILLED. RESIDENTIAL AREAS ARE GETTING BOMBED. 2 | 3 | - Help Ukraine via [National Bank of Ukraine](https://bank.gov.ua/en/news/all/natsionalniy-bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-armiyi) 4 | - Help Ukraine via [SaveLife](https://savelife.in.ua/en/donate/) fund 5 | - More info on [war.ukraine.ua](https://war.ukraine.ua/) 6 | 7 | # Harmony theme for [Logseq](https://github.com/logseq/logseq) 8 | 9 | Minimalistic custom dark and white themes keeping the classic approach of the standard Logseq theme. 10 | 11 | ![](https://github.com/dmytrodubinin/Harmony-theme-for-Logseq/blob/main/logo.png) 12 | 13 | 14 | ## Features 15 | 16 | - modern design with pleasing to the eyes 17 | - beautiful minimalistic tags with simple animations 18 | - internal and external links are more distinguishable 19 | - custom code blocks style 20 | - and many more... 21 | 22 | ![Dark Theme](harmony-demo-black.png) 23 | ![White Theme](harmony-demo-white.png) 24 | 25 | ## Installation (marketplace) 26 | 27 | 1. Open Plugins menu and open Marketplace 28 | 2. In Themes tabs search Harmony theme 29 | 30 | ## Installation (local) 31 | 32 | 1. Download `custom.css` file 33 | 2. Find file `custom.css` in your Logseq repo (in `logseq` folder) and replace with downloaded file 34 | -------------------------------------------------------------------------------- /custom.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap"); 3 | 4 | :root { 5 | --ls-font-family: "Roboto", sans-serif; 6 | --verse: 185, 100%; 7 | --warn: 46, 74%; 8 | --important: 338, 80%; 9 | --tip: 209, 87%; 10 | --note: 210, 9%; 11 | --caution: 376, 100%; 12 | --pinned: 224, 88%; 13 | --example: 213, 20%; 14 | } 15 | 16 | .dark-theme, 17 | html[data-theme="dark"] { 18 | --ls-primary-background-color: #21232b; 19 | --ls-secondary-background-color: #282a33; 20 | --ls-tertiary-background-color: rgba(40, 42, 51, 0.95); 21 | --ls-quaternary-background-color: rgb(40, 42, 51, 0.75); 22 | --ls-table-tr-even-background-color: rgba(255, 255, 255, 0.05); 23 | --ls-active-primary-color: var(--ls-secondary-background-color); 24 | --ls-active-secondary-color: #eeffff; 25 | --ls-page-properties-background-color: var(--ls-secondary-background-color); 26 | --ls-block-properties-background-color: var(--ls-primary-background-color); 27 | --ls-block-ref-link-text-color: var(--ls-link-text-color); 28 | --ls-search-background-color: var(--ls-secondary-background-color); 29 | --ls-border-color: var(--ls-primary-text-color); 30 | --ls-secondary-border-color: var(--ls-primary-text-color); 31 | --ls-guideline-color: rgba(255, 255, 255, 0.3); 32 | --ls-menu-hover-color: var(--ls-secondary-background-color); 33 | --ls-primary-text-color: rgba(255, 255, 255, 0.87); 34 | --ls-secondary-text-color: rgba(255, 255, 255, 0.6); 35 | --ls-title-text-color: var(--ls-primary-text-color); 36 | --ls-link-text-color: #b2ccdf; 37 | --ls-link-text-hover-color: #fff; 38 | --ls-link-ref-text-color: var(--ls-link-text-color); 39 | --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color); 40 | --ls-tag-text-color: var(--ls-link-text-color); 41 | --ls-tag-text-hover-color: var(--ls-link-text-hover-color); 42 | --ls-slide-background-color: var(--ls-primary-background-color); 43 | --ls-block-bullet-border-color: rgba(255, 255, 255, 0.25); 44 | --ls-block-bullet-color: var(--ls-link-text-color); 45 | --ls-block-highlight-color: rgba(255, 255, 255, 0.1); 46 | --ls-selection-background-color: rgba(255, 255, 255, 0.1); 47 | --ls-page-checkbox-color: rgba(255, 255, 255, 0.1); 48 | --ls-page-checkbox-border-color: var(--ls-primary-text-color); 49 | --ls-page-blockquote-color: var(--ls-primary-text-color); 50 | --ls-page-blockquote-bg-color: var(--ls-secondary-background-color); 51 | --ls-page-blockquote-border-color: var(--ls-border-color); 52 | --ls-page-inline-code-color: var(--ls-primary-text-color); 53 | --ls-page-inline-code-bg-color: rgba(255, 255, 255, 0.2); 54 | --ls-page-title-size: 2rem; 55 | --ls-scrollbar-foreground-color: rgba(255, 255, 255, 0.15); 56 | --ls-scrollbar-background-color: var(--ls-primary-background-color); 57 | --ls-scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.3); 58 | --ls-head-text-color: var(--ls-link-text-color); 59 | --ls-icon-color: var(--ls-link-text-color); 60 | --ls-search-icon-color: var(--ls-link-text-color); 61 | --ls-a-chosen-bg: var(--ls-secondary-background-color); 62 | --ls-right-sidebar-code-bg-color: var(--ls-page-inline-code-bg-color); 63 | --color-level-1: var(--ls-secondary-background-color); 64 | --color-level-2: var(--ls-tertiary-background-color); 65 | --color-level-3: var(--ls-quaternary-background-color); 66 | } 67 | 68 | .white-theme, 69 | html[data-theme="light"] { 70 | --ls-primary-background-color: #fafafa; 71 | --ls-secondary-background-color: #ededed; 72 | --ls-tertiary-background-color: rgba(237, 237, 237, 0.9); 73 | --ls-quaternary-background-color: rgba(237, 237, 237, 0.75); 74 | --ls-page-title-size: 2rem; 75 | --ls-title-text-color: var(--ls-primary-text-color); 76 | --ls-page-properties-background-color: var(--ls-secondary-background-color); 77 | --ls-block-properties-background-color: var(--ls-secondary-background-color); 78 | --ls-block-ref-link-text-color: var(--ls-link-text-color); 79 | --ls-search-background-color: var(--ls-secondary-background-color); 80 | --ls-page-inline-code-color: var(--ls-primary-text-color); 81 | --ls-page-inline-code-bg-color: rgba(0, 0, 0, 0.2); 82 | --ls-page-title-size: 2rem; 83 | --ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.2); 84 | --ls-scrollbar-background-color: var(--ls-primary-background-color); 85 | --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.3); 86 | --ls-head-text-color: var(--ls-link-text-color); 87 | --ls-icon-color: var(--ls-link-text-color); 88 | --ls-search-icon-color: var(--ls-link-text-color); 89 | --ls-a-chosen-bg: var(--ls-secondary-background-color); 90 | --ls-selection-background-color: rgba(0, 0, 0, 0.1); 91 | --ls-block-highlight-color: rgba(0, 0, 0, 0.05); 92 | } 93 | 94 | /* Container */ 95 | #main-content-container:focus-visible { 96 | outline-color: transparent; 97 | } 98 | 99 | /* Command Palette */ 100 | .cp__palette-main .chosen { 101 | background: transparent; 102 | } 103 | 104 | /* Heading */ 105 | .ls-block h5 { 106 | font-size: 1em; 107 | } 108 | 109 | /* submit button in calendar etc */ 110 | .bg-indigo-600 { 111 | background-color: var(--ls-link-text-color); 112 | color: var(--ls-primary-background-color); 113 | } 114 | 115 | .dark-theme .hover\:bg-indigo-700:hover, 116 | .hover\:bg-indigo-500:hover { 117 | background-color: var(--ls-primary-text-color); 118 | } 119 | 120 | /* pre */ 121 | .hljs { 122 | background: transparent; 123 | } 124 | 125 | /* hints */ 126 | .dark-theme .Tooltip__label { 127 | width: 11ch; 128 | border: 1px solid var(--ls-primary-text-color); 129 | background: var(--ls-secondary-background-color); 130 | } 131 | 132 | .dark-theme .Tooltip__label::after { 133 | border-bottom-color: var(--ls-primary-text-color); 134 | } 135 | 136 | /* block references link count mark */ 137 | a.open-block-ref-link { 138 | color: var(--ls-primary-background-color); 139 | background-color: var(--ls-link-text-color); 140 | } 141 | 142 | /* bold font */ 143 | .dark-theme b, 144 | .dark-theme strong { 145 | color: #fff; 146 | } 147 | 148 | /* brackets in links */ 149 | .page-reference .bracket { 150 | opacity: 0.5; 151 | color: var(--ls-link-text-color); 152 | } 153 | 154 | /* === Highlights === */ 155 | mark { 156 | background: rgba(255, 255, 255, 0.8); 157 | color: var(--ls-primary-background-color); 158 | padding: 2px 4px; 159 | border-radius: 3px; 160 | font-size: 14px; 161 | } 162 | .white-theme mark { 163 | background: rgba(0, 0, 0, 0.5); 164 | } 165 | 166 | /* fix color page-reference when mark text */ 167 | mark .page-ref, 168 | mark .page-reference .bracket { 169 | color: var(--ls-primary-background-color); 170 | font-weight: bold; 171 | } 172 | 173 | /* === Menu Links === */ 174 | a.menu-link.chosen { 175 | background-color: var(--ls-selection-background-color); 176 | } 177 | 178 | /* === Checkbox === */ 179 | .form-checkbox { 180 | top: 0; 181 | background-color: var(--ls-primary-background-color); 182 | border: 1px solid rgba(255, 255, 255, 0.5); 183 | } 184 | .dark-theme .form-checkbox { 185 | border: 1px solid rgba(255, 255, 255, 0.5); 186 | } 187 | .white-theme .form-checkbox { 188 | border: 1px solid rgba(0, 0, 0, 0.5); 189 | } 190 | 191 | .form-checkbox:checked { 192 | border-color: rgba(255, 255, 255, 0.5); 193 | background-color: var(--ls-primary-background-color); 194 | } 195 | .dark-theme .form-checkbox:checked { 196 | border-color: rgba(255, 255, 255, 0.5); 197 | background-color: var(--ls-primary-background-color); 198 | } 199 | 200 | .white-theme .form-checkbox:checked { 201 | border-color: rgba(0, 0, 0, 0.5); 202 | background-color: var(--ls-link-text-color); 203 | } 204 | 205 | .dark-theme .form-checkbox:focus { 206 | border-color: rgba(255, 255, 255, 0.5); 207 | } 208 | 209 | .dark-theme .form-checkbox:checked:focus { 210 | background-color: inherit; 211 | border-color: rgba(255, 255, 255, 0.5); 212 | } 213 | 214 | .form-checkbox:hover { 215 | transform: scale(1.2); 216 | } 217 | 218 | /* === Marker for Task Status === */ 219 | .marker-switch { 220 | font-size: 0.75rem; 221 | margin-right: 6px; 222 | margin-left: 2px; 223 | border-radius: 0; 224 | font-weight: 500; 225 | display: inline-block; 226 | text-align: center; 227 | height: 16px; 228 | opacity: 1; 229 | padding: 0.1rem 0.25rem 0.1rem 0.25rem; 230 | border: 1px solid; 231 | line-height: 1; 232 | cursor: pointer; 233 | } 234 | .dark-theme .marker-switch { 235 | color: rgba(255, 255, 255, 0.5); 236 | } 237 | .white-theme .marker-switch { 238 | color: rgba(0, 0, 0, 0.5); 239 | } 240 | 241 | /* === Filters === */ 242 | .filters button:focus { 243 | outline: none; 244 | } 245 | 246 | /* === External Links === */ 247 | a.external-link { 248 | border-bottom: 0px; 249 | } 250 | a.external-link:after { 251 | background-color: var(--ls-link-text-color); 252 | bottom: -2px; 253 | content: ""; 254 | display: inline-block; 255 | height: 14px; 256 | left: -1px; 257 | margin: 0 1px 0 5px; 258 | mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGDSURBVHgBtZaNcYMwDIUfGzgbqBuUDcwkaTdoJ4AN0gmaTNJu0GyQdILSCUjRIa6yMT+x4d29O7CNPmMLmQzryYhZ39hIDChbX1vflPn+2JqwoigA8t20fsEKogCslrZ6C6iG/UhAo/qLwBhCpCzc2T+OjNu1PquxB0TqpIK8e33k3Rdw3zJKnyqIVe2VtF1UW4b/PW0QuawaaDyYH5iBVyQCSQA2ALvJPRRQT8QgUdUEjPWs+r6QqHIGlsPdv/1UMIuuNJ3Fh4UwI8+WcAvAZQxEcJNCm2ZgOYZVpodRCPaAYblqxP0MK4wv42sA9oGJzPRLEQez8oDBfILwhHl1eAuOcL/RgZ48mF+uqhnY3dI1b781zHgBl8AKuSZEiOCe1KF2P/V1UiQBa6+Ps7OBu4w2FQi4308RmJDWCePH02K9qSCcQLuRcTncZbaIFKH7HPRe8ptmYp4A/0bUCO93lDhgg2U/RqPlag3o4toYK0JXmvoM1fW0QuIhmmEezvoVJ+sPourrpWEel2gAAAAASUVORK5CYII="); 259 | -webkit-mask-box-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGDSURBVHgBtZaNcYMwDIUfGzgbqBuUDcwkaTdoJ4AN0gmaTNJu0GyQdILSCUjRIa6yMT+x4d29O7CNPmMLmQzryYhZ39hIDChbX1vflPn+2JqwoigA8t20fsEKogCslrZ6C6iG/UhAo/qLwBhCpCzc2T+OjNu1PquxB0TqpIK8e33k3Rdw3zJKnyqIVe2VtF1UW4b/PW0QuawaaDyYH5iBVyQCSQA2ALvJPRRQT8QgUdUEjPWs+r6QqHIGlsPdv/1UMIuuNJ3Fh4UwI8+WcAvAZQxEcJNCm2ZgOYZVpodRCPaAYblqxP0MK4wv42sA9oGJzPRLEQez8oDBfILwhHl1eAuOcL/RgZ48mF+uqhnY3dI1b781zHgBl8AKuSZEiOCe1KF2P/V1UiQBa6+Ps7OBu4w2FQi4308RmJDWCePH02K9qSCcQLuRcTncZbaIFKH7HPRe8ptmYp4A/0bUCO93lDhgg2U/RqPlag3o4toYK0JXmvoM1fW0QuIhmmEezvoVJ+sPourrpWEel2gAAAAASUVORK5CYII="); 260 | mask-position: center; 261 | -webkit-mask-box-position: center; 262 | mask-repeat: no-repeat; 263 | -webkit-mask-box-repeat: no-repeat; 264 | mask-size: 14px 14px; 265 | -webkit-mask-box-size: 14px 14px; 266 | object-fit: cover; 267 | position: relative; 268 | transition: 0.3s; 269 | width: 14px; 270 | } 271 | 272 | a.external-link:hover:after { 273 | background-color: var(--ls-link-text-hover-color); 274 | } 275 | 276 | /* === Tags === */ 277 | a.tag[data-ref] { 278 | color: var(--ls-primary-background-color); 279 | background: var(--ls-link-text-color); 280 | border-radius: 0.5rem 0rem; 281 | font-size: 0.75rem; 282 | font-weight: bold; 283 | letter-spacing: 0.05em; 284 | line-height: 0.75rem; 285 | padding: 0.2rem 0.3rem; 286 | transition: 0.3s; 287 | white-space: nowrap; 288 | } 289 | 290 | a.tag[data-ref]:hover { 291 | opacity: 1; 292 | background-color: var(--ls-link-text-hover-color); 293 | border-radius: 0rem 0.5rem; 294 | } 295 | 296 | /* === Inline code === */ 297 | :not(pre) > code { 298 | padding: 2px 5px !important; 299 | background-color: var(--ls-page-inline-code-bg-color); 300 | } 301 | 302 | /* === Code Calc result position fix === */ 303 | 304 | .extensions__code-calc { 305 | top: 11px; 306 | padding: 0 0.75em; 307 | } 308 | 309 | /* === CodeMirror === */ 310 | .CodeMirror { 311 | font-family: "Fira Code", monospace; 312 | line-height: 1.2; 313 | background: var(--ls-secondary-background-color); 314 | } 315 | 316 | .CodeMirror-hscrollbar { 317 | cursor: default; 318 | } 319 | 320 | .cm-s-solarized.cm-s-dark, 321 | .cm-s-solarized.cm-s-light { 322 | color: var(--ls-primary-text-color); 323 | background-color: var(--ls-primary-background-color); 324 | border: 7px solid var(--ls-secondary-background-color); 325 | border-radius: 5px; 326 | text-shadow: none; 327 | } 328 | .CodeMirror-gutters { 329 | background-color: #f7f7f7; 330 | } 331 | .cm-s-solarized.cm-s-dark .CodeMirror-gutters { 332 | background-color: rgba(40, 42, 51, 0.5); 333 | } 334 | .cm-s-solarized.cm-s-light .CodeMirror-gutters { 335 | background-color: rgba(237, 237, 237, 0.5); 336 | } 337 | 338 | .CodeMirror pre.CodeMirror-line { 339 | line-height: 18px; 340 | } 341 | 342 | .CodeMirror-linenumber { 343 | color: var(--ls-primary-text-color); 344 | opacity: 0.5; 345 | text-shadow: none; 346 | } 347 | 348 | .cm-s-solarized.cm-s-dark .CodeMirror-linenumber { 349 | color: var(--ls-primary-text-color); 350 | opacity: 0.5; 351 | text-shadow: none; 352 | } 353 | 354 | .extensions__code-lang { 355 | background: var(--ls-secondary-background-color); 356 | border: none; 357 | } 358 | 359 | .extensions__code .code-editor { 360 | margin-top: 0; 361 | } 362 | 363 | .cm-s-solarized.cm-s-dark div.CodeMirror-selected { 364 | background: var(--ls-selection-background-color); 365 | } 366 | .cm-s-solarized.cm-s-light div.CodeMirror-selected { 367 | background: var(--ls-selection-background-color); 368 | } 369 | 370 | .CodeMirror-selected { 371 | background: var(--ls-selection-background-color); 372 | } 373 | .CodeMirror-focused .CodeMirror-selected { 374 | background: var(--ls-selection-background-color); 375 | } 376 | 377 | /* === Admonitionblock: Tip, Note, etc. === */ 378 | 379 | /* Decrease margins around block */ 380 | .admonitionblock { 381 | margin: 0.5rem 0; 382 | } 383 | 384 | /* Decrease padding of icon */ 385 | .admonition-icon { 386 | border: transparent; 387 | } 388 | .admonition-icon > svg { 389 | background-color: transparent !important; 390 | } 391 | 392 | .svg-shadow.note, 393 | .svg-shadow.tip, 394 | .svg-shadow.important, 395 | .svg-shadow.note, 396 | .svg-shadow.caution, 397 | .svg-shadow.pinned, 398 | .svg-shadow.warning { 399 | filter: none; 400 | } 401 | 402 | svg.tip { 403 | color: var(--ls-primary-text-color); 404 | } 405 | 406 | .admonitionblock > .pr-4 { 407 | padding-right: 0.5rem; 408 | } 409 | 410 | .admonitionblock, 411 | .verse, 412 | pre.pre-wrap-white-space { 413 | border: 1px solid transparent; 414 | border-radius: 5px; 415 | padding: 1.5rem 1.5rem; 416 | } 417 | 418 | /*quote*/ 419 | blockquote { 420 | border-radius: 5px; 421 | padding: 1.5rem 1.5rem; 422 | margin: 0.5rem 0; 423 | } 424 | html[data-theme="light"] blockquote { 425 | background-color: hsl(var(--note), 86%, 0.3); 426 | } 427 | 428 | /*note*/ 429 | html[data-theme="light"] .note, 430 | html[data-theme="light"] .admonitionblock.note { 431 | background-color: hsl(var(--note), 86%, 0.3); 432 | border-color: hsl(var(--note), 86%, 0.1); 433 | } 434 | html[data-theme="dark"] .note, 435 | html[data-theme="dark"] .admonitionblock.note { 436 | background-color: hsl(var(--note), 86%, 0.05); 437 | border-color: hsl(var(--note), 86%, 0.05); 438 | } 439 | 440 | /*tip*/ 441 | html[data-theme="light"] .admonitionblock.tip { 442 | background-color: hsl(var(--tip), 73%, 0.1); 443 | border-color: hsl(var(--tip), 73%, 0.08); 444 | } 445 | html[data-theme="dark"] .admonitionblock.tip { 446 | background-color: hsl(var(--tip), 73%, 0.05); 447 | border-color: hsl(var(--tip), 73%, 0.05); 448 | color: hsl(var(--tip), 73%, 0.5); 449 | } 450 | html[data-theme="dark"] .admonitionblock.tip .is-paragraph { 451 | color: var(--ls-primary-text-color); 452 | } 453 | 454 | /*important*/ 455 | html[data-theme="light"] .important, 456 | html[data-theme="light"] .admonitionblock.important { 457 | background-color: hsl(var(--important), 80%, 0.1); 458 | border-color: hsl(var(--important), 80%, 0.06); 459 | } 460 | html[data-theme="dark"] .important, 461 | html[data-theme="dark"] .admonitionblock.important { 462 | background-color: hsl(var(--important), 80%, 0.05); 463 | border-color: hsl(var(--important), 80%, 0.05); 464 | color: hsl(var(--important), 74%, 0.5); 465 | } 466 | html[data-theme="dark"] .admonitionblock.important .is-paragraph { 467 | color: var(--ls-primary-text-color); 468 | } 469 | 470 | /*caution*/ 471 | html[data-theme="light"] .caution, 472 | html[data-theme="light"] .admonitionblock.caution { 473 | background-color: hsl(var(--caution), 84%, 0.1); 474 | border-color: hsl(var(--caution), 84%, 0.1); 475 | } 476 | html[data-theme="dark"] .caution, 477 | html[data-theme="dark"] .admonitionblock.caution { 478 | background-color: hsl(var(--caution), 84%, 0.05); 479 | border-color: hsl(var(--caution), 84%, 0.05); 480 | color: hsl(var(--caution), 84%, 0.5); 481 | } 482 | html[data-theme="dark"] .admonitionblock.caution .is-paragraph { 483 | color: var(--ls-primary-text-color); 484 | } 485 | 486 | /*pinned*/ 487 | html[data-theme="light"] .pinned, 488 | html[data-theme="light"] .admonitionblock.pinned { 489 | background-color: hsl(var(--pinned), 80%, 0.1); 490 | border-color: hsl(var(--pinned), 80%, 0.1); 491 | } 492 | html[data-theme="dark"] .pinned, 493 | html[data-theme="dark"] .admonitionblock.pinned { 494 | background-color: hsl(var(--pinned), 80%, 0.05); 495 | border-color: hsl(var(--pinned), 80%, 0.05); 496 | color: hsl(var(--pinned), 80%, 0.5); 497 | } 498 | html[data-theme="dark"] .admonitionblock.pinned .is-paragraph { 499 | color: var(--ls-primary-text-color); 500 | } 501 | 502 | /*warning*/ 503 | html[data-theme="light"] .warning, 504 | html[data-theme="light"] .admonitionblock.warning { 505 | background-color: hsl(var(--warn), 82%, 0.15); 506 | border-color: hsl(var(--warn), 82%, 0.1); 507 | } 508 | html[data-theme="dark"] .warning, 509 | html[data-theme="dark"] .admonitionblock.warning { 510 | background-color: hsl(var(--warn), 82%, 0.05); 511 | border-color: hsl(var(--warn), 82%, 0.05); 512 | color: hsl(var(--warn), 82%, 0.5); 513 | } 514 | html[data-theme="dark"] .admonitionblock.warning .is-paragraph { 515 | color: var(--ls-primary-text-color); 516 | } 517 | 518 | /* === Embed block === */ 519 | 520 | /* center text */ 521 | .color-level.embed-block.bg-base-2 > .px-3.pt-1.pb-2 { 522 | padding: 0.25rem; 523 | } 524 | 525 | /* === Mobile Devices === */ 526 | @media screen and (max-width: 480px) { 527 | h1.title { 528 | font-size: 24px; 529 | } 530 | .ls-block h1 { 531 | font-size: 1.5em; 532 | min-height: 1.5em; 533 | } 534 | .ls-block h2 { 535 | font-size: 1.17em; 536 | min-height: 1.17em; 537 | } 538 | .ls-block h3 { 539 | font-size: 1.12em; 540 | min-height: 1.12em; 541 | } 542 | .ls-block h4 { 543 | font-size: 1.05em; 544 | min-height: 1.05em; 545 | } 546 | .ls-block h5 { 547 | font-size: 1em; 548 | min-height: 1em; 549 | } 550 | } 551 | 552 | /* === Custom Plugin Styles === */ 553 | 554 | /* Tabs */ 555 | .logseq-tab > .border { 556 | border: none; 557 | } 558 | -------------------------------------------------------------------------------- /harmony-demo-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dmytrodubinin/Harmony-theme-for-Logseq/be81c474e8499b50748851efa7d4b000ae256905/harmony-demo-black.png -------------------------------------------------------------------------------- /harmony-demo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dmytrodubinin/Harmony-theme-for-Logseq/be81c474e8499b50748851efa7d4b000ae256905/harmony-demo-white.png -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dmytrodubinin/Harmony-theme-for-Logseq/be81c474e8499b50748851efa7d4b000ae256905/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "logseq-harmony-theme", 3 | "version": "1.0.2", 4 | "author": "dmytrodubinin", 5 | "description": "Minimalistic custom dark and white themes keeping the classic approach of the standard Logseq theme.", 6 | "main": "./custom.css", 7 | "logseq": { 8 | "icon": "./logo.png", 9 | "themes": [ 10 | { 11 | "name": "Harmony Theme", 12 | "url": "./custom.css", 13 | "description": "Minimalistic custom dark and white themes keeping the classic approach of the standard Logseq theme." 14 | } 15 | ] 16 | } 17 | } 18 | --------------------------------------------------------------------------------