├── LICENSE ├── README.md ├── dark.png ├── light.png └── obsidian.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Alexander Rink 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 | # obsidian_things 2 | A minimal and clean theme for [Obsidian](https://obsidian.md) 3 | 4 | Heavily inspired by [Things](https://culturedcode.com/things/). 5 | 6 | ![obsidian_things - Light Theme](light.png) 7 | 8 | ![obsidian_things - Dark Theme](dark.png) 9 | 10 | 11 | WORK IN PROGRESS / FEEDBACK AND BUG REPORTS APPRECIATED 12 | -------------------------------------------------------------------------------- /dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/obsidian_things/dc92a073fc01926e1aa545b0b5519cda3ef1c5a8/dark.png -------------------------------------------------------------------------------- /light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/obsidian_things/dc92a073fc01926e1aa545b0b5519cda3ef1c5a8/light.png -------------------------------------------------------------------------------- /obsidian.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 3 | --font-monospace: 'SF Mono', Consolas, monaco, monospace;; 4 | } 5 | 6 | .theme-light { 7 | --background-code: #f0f1f4; 8 | --background-secondary: #f5f6f8; 9 | --background-tag: #c3e1d3; 10 | --background-primary: #ffffff; 11 | --text-accent: #1f7ee6; 12 | --text-accent-hover: #1f7ee6; 13 | --text-code: #797d84; 14 | --text-faint: #a5a9ad; 15 | --text-highlight-bg: #f8e594; 16 | --text-highlight-fg: #3f3a26; 17 | --icons-color: #a8acb3; 18 | --text-muted: #363a3e; 19 | --text-selection: #c9e0ff; 20 | --text-tag: #1e7d57; 21 | --horizontal-line: #e6e8ec; 22 | --text-blue: #0062c1; 23 | --background-quick: #f2f3f5; 24 | --interactive-accent: #0062c1; 25 | --interactive-accent-hover: #0062c1; 26 | --interactive-accent-rgb: 0,98,193; 27 | --scrollbar-bg: rgba(0,0,0,0); 28 | --scrollbar-active-thumb-bg: #7f7f7f; 29 | --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1); 30 | --input-color: #d9dde4; 31 | --sidebar-selected-bg: #dce0e7; 32 | } 33 | 34 | .theme-dark { 35 | --background-code: #353535; 36 | --background-secondary: #1c1c1c; 37 | --background-tag: #307155; 38 | --background-primary: #262626; 39 | --text-accent: #66a9fa; 40 | --text-accent-hover: #66a9fa; 41 | --text-code: #797d84; 42 | --text-faint: #6a6a6a; 43 | --text-highlight-bg: #4f482a; 44 | --text-highlight-fg: #ffe691; 45 | --icons-color: #a8acb3; 46 | --text-muted: #d1d2d1; 47 | --text-selection: #276cbd; 48 | --text-tag: #e9f5f1; 49 | --horizontal-line: #67acfe; 50 | --text-blue: #67acfe; 51 | --background-quick: #262626; 52 | --interactive-accent: #0062c1; 53 | --interactive-accent-hover: #0062c1; 54 | --interactive-accent-rgb: 0,98,193; 55 | --scrollbar-bg: rgba(0,0,0,0); 56 | --scrollbar-active-thumb-bg: #7f7f7f; 57 | --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1); 58 | --input-color: #515151; 59 | --sidebar-selected-bg: #393939; 60 | } 61 | 62 | /* Fix Font sizes */ 63 | html, 64 | body, 65 | .search-empty-state, 66 | .page-title, 67 | .cm-header-1, 68 | .cm-header-2, 69 | .cm-header-3, 70 | .cm-header-4, 71 | .cm-header-5, 72 | .cm-header-6, 73 | .cm-s-obsidian pre.HyperMD-codeblock, 74 | .markdown-preview-view h1, 75 | .markdown-preview-view h2, 76 | .markdown-preview-view h3, 77 | .markdown-preview-view h4, 78 | .markdown-preview-view h5, 79 | .markdown-preview-view h6, 80 | .markdown-preview-view code { 81 | font-size: 15px; 82 | line-height: 26px; 83 | } 84 | 85 | /* Fix all font-family settings to use the the font variables */ 86 | button { 87 | font-family: var(--default-font); 88 | } 89 | 90 | input[type="text"], 91 | input[type="email"], 92 | input[type="password"], 93 | input[type="number"] { 94 | font-family: var(--default-font); 95 | } 96 | 97 | .dropdown { 98 | font-family: var(--default-font); 99 | } 100 | 101 | .suggestion-hotkey { 102 | font-family: var(--font-monospace); 103 | } 104 | 105 | .hidden-token { 106 | font-family: var(--font-monospace); 107 | } 108 | 109 | .CodeMirror span.hmd-hidden-token.cm-formatting-code, 110 | .CodeMirror span.hmd-hidden-token.cm-formatting-em, 111 | .CodeMirror span.hmd-hidden-token.cm-formatting-link, 112 | .CodeMirror span.hmd-hidden-token.cm-formatting-strikethrough, 113 | .CodeMirror span.hmd-hidden-token.cm-formatting-strong { 114 | font-family: var(--font-monospace); 115 | } 116 | 117 | .cm-s-obsidian.CodeMirror .HyperMD-hover > .HyperMD-hover-content code, 118 | .cm-s-obsidian .hmd-fold-html-stub, 119 | .cm-s-obsidian .hmd-fold-code-stub, 120 | .cm-s-obsidian .cm-formatting-code, 121 | .cm-s-obsidian .cm-hmd-frontmatter, 122 | .cm-s-obsidian .cm-hmd-orgmode-markup, 123 | .cm-s-obsidian .cm-inline-code, 124 | .cm-s-obsidian .cm-math, 125 | .cm-s-obsidian .CodeMirror-linewidget kbd, 126 | .cm-s-obsidian .HyperMD-codeblock, 127 | .cm-s-obsidian .HyperMD-hr, 128 | .cm-s-obsidian .hmd-fold-html kbd, 129 | .cm-s-obsidian span.hmd-fold-math-placeholder{ 130 | font-family: var(--font-monospace); 131 | } 132 | 133 | .cm-s-obsidian span.cm-url { 134 | color: var(--text-faint); 135 | text-decoration: none; 136 | } 137 | 138 | span.cm-formatting.cm-formatting-image.cm-image.cm-image-marker, 139 | span.cm-formatting.cm-formatting-image.cm-image.cm-image-alt-text.cm-link, 140 | .cm-s-obsidian pre.HyperMD-footnote span.cm-hmd-footnote { 141 | color: var(--text-faint); 142 | } 143 | 144 | span.cm-image.cm-image-alt-text.cm-link { 145 | color: var(--text-muted); 146 | } 147 | 148 | .cm-s-obsidian .cm-formatting-hashtag { 149 | font-family: var(--default-font); 150 | } 151 | 152 | .editor { 153 | font-family: var(--font-monospace); 154 | } 155 | 156 | .setting-hotkey { 157 | font-family: var(--font-monospace); 158 | } 159 | 160 | .top-titlebar-text { 161 | font-family: var(--font-monospace); 162 | } 163 | 164 | .splash-brand-name { 165 | font-family: var(--font-monospace); 166 | } 167 | 168 | /* Format tags */ 169 | .cm-s-obsidian span.cm-hashtag { 170 | color: var(--text-tag); 171 | background-color: var(--background-tag); 172 | font-size: 14px; 173 | text-decoration: none; 174 | padding-bottom: 1px; 175 | padding-top: 1px; 176 | } 177 | 178 | .cm-s-obsidian span.cm-hashtag-begin { 179 | border-bottom-left-radius: 20px; 180 | border-top-left-radius: 20px; 181 | padding-left: 10px; 182 | } 183 | 184 | .cm-s-obsidian span.cm-hashtag-end { 185 | border-bottom-right-radius: 20px; 186 | border-top-right-radius: 20px; 187 | padding-right: 10px; 188 | } 189 | 190 | .cm-s-obsidian span.cm-inline-code { 191 | color: var(--text-code); 192 | font-size: 90%; 193 | } 194 | 195 | .cm-s-obsidian pre.HyperMD-codeblock { 196 | background-color: var(--background-code); 197 | color: var(--text-code); 198 | font-size: 90%; 199 | } 200 | 201 | /* PREVIEW */ 202 | a.tag { 203 | color: var(--text-tag); 204 | background-color: var(--background-tag); 205 | font-size: 14px; 206 | padding-bottom: 1px; 207 | padding-top: 1px; 208 | text-decoration: none; 209 | border-radius: 20px; 210 | padding-left: 10px; 211 | padding-right: 10px; 212 | } 213 | 214 | .markdown-preview-view pre { 215 | background-color: var(--background-code); 216 | color: var(--text-code); 217 | padding: 1em; 218 | margin: 0.5em 0; 219 | } 220 | 221 | .markdown-preview-view mark { 222 | padding: 2px; 223 | padding-left: 5px; 224 | padding-right: 5px; 225 | background-color: var(--text-highlight-bg); 226 | color: var(--text-highlight-fg); 227 | } 228 | 229 | .markdown-preview-view code { 230 | background-color: var(--background-code); 231 | color: var(--text-code); 232 | font-size: 90%; 233 | } 234 | 235 | :not(pre) > code[class*="language-"], pre[class*="language-"] { 236 | background-color: var(--background-code); 237 | } 238 | 239 | a { 240 | color: var(--text-accent); 241 | text-decoration: none; 242 | } 243 | 244 | .external-link { 245 | background-image: none; 246 | padding-right: 0px; 247 | } 248 | 249 | 250 | /* Markdown Headings */ 251 | .markdown-preview-view h1, 252 | .markdown-preview-view h2 253 | { 254 | margin-bottom: 5px; 255 | margin-top: 10px; 256 | } 257 | 258 | .markdown-preview-view h3, 259 | .markdown-preview-view h4, 260 | .markdown-preview-view h5, 261 | .markdown-preview-view h6 { 262 | font-size: inherit; 263 | line-height: 24px; 264 | margin-bottom: 0px; 265 | margin-top: 4px; 266 | font-weight: 600; 267 | } 268 | 269 | .markdown-preview-view h6 { 270 | line-height: 16px; 271 | } 272 | 273 | .markdown-preview-view h1 { 274 | font-size: 23px; 275 | line-height: 24px; 276 | margin-top: 30px; 277 | margin-bottom: 16px; 278 | font-weight: 600; 279 | } 280 | 281 | .markdown-preview-view h2 { 282 | color: var(--text-blue); 283 | border-bottom: 1px solid var(--horizontal-line); 284 | font-size: 14px; 285 | line-height: 24px; 286 | font-weight: 700; 287 | } 288 | 289 | .markdown-preview-view h4 { 290 | font-style: italic; 291 | } 292 | 293 | .markdown-preview-view h5 { 294 | font-style: italic; 295 | font-weight: 300; 296 | } 297 | 298 | .markdown-preview-view h6 { 299 | color: inherit; 300 | } 301 | 302 | .markdown-preview-view input[type=checkbox]:checked { 303 | background-color: var(--text-accent); 304 | } 305 | 306 | .markdown-preview-view .task-list-item-checkbox { 307 | top: -1px; 308 | } 309 | 310 | .nav-folder.mod-root > .nav-file-title, .nav-folder.mod-root > .nav-folder-title { 311 | font-size: 14px; 312 | font-weight: 500; 313 | } 314 | 315 | .nav-file-title-content, .nav-folder-title-content { 316 | padding: 0px; 317 | } 318 | 319 | .nav-folder-collapse-indicator { 320 | color: var(--icons-color); 321 | top: 0px; 322 | } 323 | 324 | 325 | /* Fix round borders */ 326 | .workspace-tab-container-after.is-after-active .workspace-tab-header-inner, 327 | .workspace-tab-header.is-after-active .workspace-tab-header-inner { 328 | border-bottom-left-radius: 0px; 329 | } 330 | 331 | .workspace-tab-container-before.is-before-active .workspace-tab-header-inner, 332 | .workspace-tab-header.is-before-active .workspace-tab-header-inner { 333 | border-bottom-right-radius: 0px; 334 | } 335 | 336 | .workspace-split.mod-left-split .workspace-tabs .workspace-leaf { 337 | border-top-left-radius: 0px; 338 | } 339 | 340 | .workspace-split.mod-right-split .workspace-tabs .workspace-leaf { 341 | border-top-right-radius: 0px; 342 | } 343 | 344 | .workspace-tab-header.is-active { 345 | border-radius: 0px; 346 | } 347 | 348 | .nav-folder.mod-root > .nav-file-title, 349 | .nav-folder.mod-root > .nav-folder-title, 350 | .view-header-title { 351 | font-size: 14px; 352 | } 353 | 354 | .view-action, 355 | .nav-action-button { 356 | color: var(--text-faint); 357 | 358 | } 359 | 360 | .view-action:hover, 361 | .nav-action-button:hover { 362 | color: var(--text-normal); 363 | } 364 | 365 | .status-bar { 366 | font-size: 12px; 367 | } 368 | 369 | .workspace-leaf-content .view-header-title { 370 | color: var(--text-faint); 371 | } 372 | 373 | .workspace-leaf.mod-active .view-header { 374 | height: 30px; 375 | border: none; 376 | } 377 | 378 | .view-header { 379 | border: none; 380 | height: 30px; 381 | } 382 | 383 | .view-content { 384 | height: calc(100% - 34px); 385 | } 386 | 387 | .theme-light .prompt { 388 | background-color: var(--background-quick); 389 | box-shadow: 0px 0px 25px var(--text-faint); 390 | } 391 | 392 | .theme-dark .prompt { 393 | background-color: var(--background-quick); 394 | box-shadow: 0px 0px 25px var(--background-secondary-alt); 395 | } 396 | input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover, input[type="text"]:active, input[type="email"]:active, input[type="password"]:active, input[type="number"]:active, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus { 397 | background-color: var(--input-color); 398 | border-color: var(--input-color); 399 | font-size: 14px; 400 | } 401 | 402 | 403 | 404 | .suggestion-item.is-selected { 405 | background-color: var(--text-selection); 406 | border-radius: 5px; 407 | } 408 | 409 | .suggestion-item { 410 | font-size: 14px; 411 | padding: 4px; 412 | } 413 | 414 | .workspace-leaf-resize-handle { 415 | background-color: inherit; 416 | } 417 | 418 | .workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content { 419 | padding-right: 0px; 420 | } 421 | 422 | .markdown-preview-view blockquote { 423 | border-radius: 0px; 424 | border: 0px solid var(--background-modifier-border); 425 | border-left-width: 5px; 426 | padding: 10px; 427 | background-color: inherit; 428 | font-weight: 600; 429 | } 430 | 431 | .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { 432 | background: inherit; 433 | } 434 | 435 | .markdown-preview-view hr { 436 | border: none; 437 | border-top: 1px solid ; 438 | border-color: var(--horizontal-line); 439 | } 440 | 441 | .cm-s-obsidian pre.HyperMD-footnote { 442 | font-size: inherit; 443 | padding-left: inherit; 444 | } 445 | 446 | .workspace-tab-header { 447 | border-radius: 0px; 448 | } 449 | 450 | .view-header { 451 | border-radius: 0px; 452 | } 453 | 454 | .workspace-split.mod-root > .workspace-leaf:first-of-type .workspace-leaf-content { 455 | border-top-left-radius: 0px; 456 | } 457 | 458 | .workspace-split.mod-root > .workspace-leaf:last-of-type .workspace-leaf-content { 459 | border-top-right-radius: 0px; 460 | } 461 | 462 | .cm-s-obsidian span.cm-formatting-math { 463 | color: var(--text-muted); 464 | font-weight: inherit; 465 | } 466 | 467 | .CodeMirror .cm-inline-code, .CodeMirror .cm-math { 468 | color: inherit; 469 | } 470 | 471 | .cm-s-obsidian span.cm-math, .cm-s-obsidian span.hmd-fold-math-placeholder { 472 | font-style: normal; 473 | font-size: 90%; 474 | } 475 | .view-header-title-container:after, .workspace-leaf.mod-active .view-header-title-container:after, .workspace-split.mod-root > .workspace-leaf:first-of-type:last-of-type.mod-active .view-header-title-container:after { 476 | background: none; 477 | } 478 | 479 | .list-item-ending-flair, .search-result-count, .search-result-file-title:hover, .list-item:hover .list-item-ending-flair { 480 | background-color: inherit; 481 | color: var(--text-faint); 482 | font-weight: 600; 483 | } 484 | 485 | .footnotes ol { 486 | padding-inline-start: 15px; 487 | } 488 | 489 | .workspace-leaf-content[data-type='search'] .nav-action-button.is-active, .workspace-leaf-content[data-type='backlink'] .nav-action-button.is-active { 490 | background-color: inherit; 491 | color: var(--text-normal); 492 | font-weight: 600; 493 | } 494 | 495 | .modal-bg { 496 | background-color: inherit; 497 | } 498 | 499 | .view-actions { 500 | padding: none; 501 | padding-top: 2px; 502 | } 503 | 504 | .CodeMirror-vscrollbar { 505 | overflow: auto; 506 | } 507 | 508 | .vertical-tab-nav-item.is-active { 509 | border-left-color: none; 510 | border-left: 0px; 511 | } 512 | 513 | .dropdown { 514 | background-image: url('data:image/svg+xml;charset=utf-8, '); 515 | background-size: 1em auto, 100%; 516 | border: 1px solid var(--interactive-accent); 517 | } 518 | .search-result-file-matched-text { 519 | color: var(--text-highlight-fg); 520 | } 521 | 522 | .markdown-preview-view .internal-link { 523 | text-decoration: none; 524 | } 525 | 526 | .nav-file.is-active > .nav-file-title, .nav-file.is-active > .nav-folder-title, .nav-file.is-active > .nav-folder-collapse-indicator, .nav-folder.is-active > .nav-file-title, .nav-folder.is-active > .nav-folder-title, .nav-folder.is-active > .nav-folder-collapse-indicator { 527 | background-color: var(--sidebar-selected-bg); 528 | } 529 | 530 | .pane-clickable-item:hover, .side-dock-collapsible-section-header:hover { 531 | background-color: var(--sidebar-selected-bg); 532 | } 533 | 534 | .workspace-split.mod-left-split > .workspace-leaf-resize-handle, .workspace-split.mod-right-split > .workspace-leaf-resize-handle { 535 | background-color: var(--background-secondary-alt); 536 | } 537 | 538 | .view-header-icon { 539 | color: var(--text-faint); 540 | } --------------------------------------------------------------------------------