├── LICENSE ├── README.md ├── cover.png ├── manifest.json ├── retro-windows-dark.png ├── retro-windows-light.png ├── screenshot.png ├── theme.css └── versions.json /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 codeisconfusing 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 | ## Retro Windows theme 2 | 3 | Give your notes a nostalgic journey back to the early 1990s computing era. This theme recreates the classic Windows 3.1 aesthetic with its iconic gray interface, 3D-effect buttons, and pixelated charm. Available in both light and dark variants, it combines vintage visual appeal with modern note-taking functionality. Perfect for users who appreciate computing history or simply want a unique, visually distinctive Obsidian experience. 4 | 5 | --- 6 | 7 | ![Screenshots](cover.png) 8 | 9 | A nostalgic Obsidian theme that brings back the classic look and feel of Windows 3.1. 10 | 11 | ## Features 12 | 13 | - **Authentic Windows 3.1 Aesthetics**: Classic gray interface, 3D-effect buttons, blue title bars, and pixelated charm 14 | - **Dual Theme Support**: Choose between light and dark variants 15 | - **Color-Coded Folders**: Easily distinguish between different folders with the classic color scheme 16 | - **Classic Typography**: Uses "MS Sans Serif" and "Courier New" fonts for that authentic feel 17 | - **Styled UI Elements**: Specially designed scrollbars, buttons, and windows that mimic the Windows 3.1 interface 18 | - **Markdown Formatting**: Custom styling for code blocks, headings, lists, and other markdown elements 19 | 20 | ## Installation 21 | 22 | 1. Open Obsidian Settings 23 | 2. Navigate to Appearance → Themes 24 | 3. Click "Manage" and search for "Retro Windows" 25 | 4. Click "Install and use" 26 | 27 | ## Manual Installation 28 | 29 | 1. Download the `theme.css` file 30 | 2. Copy it to your vault's `.obsidian/themes/retro-windows/` directory 31 | 3. Open Obsidian Settings → Appearance → Themes and select "Retro Windows" 32 | 33 | ## Screenshots 34 | 35 | ![Light Theme](retro-windows-light.png) 36 | ![Dark Theme](retro-windows-dark.png) 37 | 38 | ## Customization 39 | 40 | The theme includes variables at the top of the CSS file that can be adjusted to customize colors, fonts, and other elements. 41 | I may add support for Style Settings plugin in the future. 42 | 43 | ## Optional Fonts & Plugins 44 | ### Fonts 45 | - **Text font** Atkinson Hyperlegible: https://fonts.google.com/specimen/Atkinson+Hyperlegible 46 | - **Monospace font** JetBrains Mono: https://www.jetbrains.com/lp/mono/ 47 | - Interface font is just Obsidian default. 48 | 49 | ### Plugins 50 | **Iconize** for icons beside note folders: https://github.com/FlorianWoelki/obsidian-iconize 51 | 52 | ## Credits 53 | 54 | Thanks to Reddit user "jwintyo" for his coloured folders code. 55 | 56 | ## License 57 | 58 | MIT License 59 | -------------------------------------------------------------------------------- /cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeisconfusing/retro-windows-obsidian/8385eb564c61a509c5f0598b992f5c00383b5919/cover.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Retro Windows", 3 | "version": "1.2.0", 4 | "minAppVersion": "1.0.0", 5 | "author": "codeisconfusing", 6 | "authorUrl": "https://github.com/codeisconfusing" 7 | } 8 | -------------------------------------------------------------------------------- /retro-windows-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeisconfusing/retro-windows-obsidian/8385eb564c61a509c5f0598b992f5c00383b5919/retro-windows-dark.png -------------------------------------------------------------------------------- /retro-windows-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeisconfusing/retro-windows-obsidian/8385eb564c61a509c5f0598b992f5c00383b5919/retro-windows-light.png -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeisconfusing/retro-windows-obsidian/8385eb564c61a509c5f0598b992f5c00383b5919/screenshot.png -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | /* Base variables and common elements */ 2 | body { 3 | /*--font-text-theme: "MS Sans Serif", Arial, sans-serif;*/ 4 | --window-border: 2px solid #000; 5 | 6 | /* Header colors - shared across themes */ 7 | --h1-color: #8470A6; /* purple */ 8 | --h2-color: #507A9E; /* blue */ 9 | --h3-color: #5A8D76; /* green */ 10 | --h4-color: #A67A5B; /* orange */ 11 | --h5-color: #A19C6C; /* yellow */ 12 | --h6-color: #6C8299; /* steel blue */ 13 | 14 | /* Formatting colors - shared but overridden per theme */ 15 | --bold-color: #61a181; /* green */ 16 | --italic-color: #95c2f0; /* blue */ 17 | --text-highlight-bg: #746119; /* yellow */ 18 | } 19 | 20 | /* Light theme variables */ 21 | .theme-light { 22 | --window-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff; 23 | 24 | /* Background colors */ 25 | --background-primary: #ffffff; /* Note background - off-white */ 26 | --background-secondary: #ececec; /* Sidebar background - light gray */ 27 | --background-secondary-alt: #d4d0c8; /* Classic Win 3.1 gray for panels */ 28 | --background-tertiary: #c0c0c0; /* Classic Win 3.1 gray for UI elements */ 29 | 30 | /* Title bar */ 31 | --titlebar-background: #3c8000; /* Classic Win 3.1 blue */ 32 | --titlebar-text: #ffffff; /* White text on blue */ 33 | 34 | /* Text colors */ 35 | --text-normal: #000000; /* Black text for good contrast */ 36 | --text-muted: #333333; /* Dark gray for secondary text */ 37 | --text-faint: #666666; /* Medium gray for tertiary text */ 38 | 39 | /* Interactive elements */ 40 | --text-accent: #008015; /* Win 3.1 blue for accents */ 41 | --interactive-normal: #d4d0c8; /* Folder/button background */ 42 | --interactive-hover: #e6e6e6; /* Hover state */ 43 | --interactive-accent: #000080; /* Selected state - Win 3.1 blue */ 44 | --interactive-accent-hover: #0000aa; /* Hover on selected - darker blue */ 45 | 46 | /* Buttons */ 47 | --button-background: #d4d0c8; /* Classic Win 3.1 folder color */ 48 | --button-text: #000000; /* Black text on buttons */ 49 | } 50 | 51 | /* Dark theme variables */ 52 | .theme-dark { 53 | --window-shadow: inset -1px -1px #3a3a3a, inset 1px 1px #888888, inset -2px -2px #555, inset 2px 2px #666; 54 | 55 | /* Background colors */ 56 | --background-primary: #1e1e1e; /* Note background - dark gray */ 57 | --background-secondary: #2d2d2d; /* Sidebar background - darker gray */ 58 | --background-secondary-alt: #3a3a3a; /* Dark version of Win 3.1 gray for panels */ 59 | --background-tertiary: #444444; /* Dark version of Win 3.1 gray for UI elements */ 60 | 61 | /* Title bar */ 62 | --titlebar-background: #000080; /* Classic Win 3.1 blue */ 63 | --titlebar-text: #ffffff; /* White text on blue */ 64 | 65 | /* Text colors */ 66 | --text-normal: #e0e0e0; /* Light gray text for good contrast */ 67 | --text-muted: #b0b0b0; /* Medium gray for secondary text */ 68 | --text-faint: #888888; /* Light gray for tertiary text */ 69 | 70 | /* Interactive elements */ 71 | --text-accent: #8cb4ff; /* Lighter blue for accents */ 72 | --interactive-normal: #3a3a3a; /* Folder/button background */ 73 | --interactive-hover: #505050; /* Hover state */ 74 | --interactive-accent: #4f6fb0; /* Selected state - darker Win 3.1 blue */ 75 | --interactive-accent-hover: #6989d0; /* Hover on selected - lighter blue */ 76 | 77 | /* Buttons */ 78 | --button-background: #3a3a3a; /* Dark version of Win 3.1 folder color */ 79 | --button-text: #e0e0e0; /* Light text on buttons */ 80 | 81 | /* Dark theme specific overrides */ 82 | --bold-color: #7fc9a0; /* green */ 83 | --italic-color: #7fb0e0; /* blue */ 84 | --text-highlight-bg: #5a4820; /* yellow */ 85 | } 86 | 87 | /* Make windows look like Windows 3.1 windows - shared styling */ 88 | .workspace-leaf { 89 | border: var(--window-border); 90 | box-shadow: var(--window-shadow); 91 | } 92 | 93 | .workspace-leaf-header { 94 | background-color: var(--titlebar-background); 95 | color: var(--titlebar-text); 96 | font-weight: bold; 97 | height: 20px; 98 | padding: 2px 4px; 99 | } 100 | 101 | /* Buttons with 3D effect - theme-specific styling */ 102 | button, 103 | .clickable-icon { 104 | background-color: var(--button-background); 105 | color: var(--button-text); 106 | border: 1px solid #000; 107 | padding: 2px 6px; 108 | } 109 | 110 | /* Light theme button styling */ 111 | .theme-light button, 112 | .theme-light .clickable-icon { 113 | box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 114 | } 115 | 116 | .theme-light button:active, 117 | .theme-light .clickable-icon:active { 118 | box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px grey, inset -2px -2px #dfdfdf; 119 | } 120 | 121 | /* Dark theme button styling */ 122 | .theme-dark button, 123 | .theme-dark .clickable-icon { 124 | box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #666, inset -2px -2px #333, inset 2px 2px #555; 125 | } 126 | 127 | .theme-dark button:active, 128 | .theme-dark .clickable-icon:active { 129 | box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #666, inset 2px 2px #333, inset -2px -2px #555; 130 | } 131 | 132 | /* Ensure icons in buttons have good contrast - shared */ 133 | button svg, 134 | .clickable-icon svg { 135 | color: var(--button-text); 136 | } 137 | 138 | /* Improve contrast for hover states - shared */ 139 | /*button:hover, 140 | .clickable-icon:hover { 141 | background-color: var(--interactive-hover); 142 | box-shadow: inset 1px 1px var(--window-shadow); 143 | }*/ 144 | 145 | /* Hover States - Shared */ 146 | button:hover { 147 | background-color: var(--interactive-hover); 148 | } 149 | .cm-link:hover { 150 | text-decoration: underline; /* For links */ 151 | color: var(--text-accent-hover); /* Optional: Add a hover color for links */ 152 | } 153 | 154 | /* Light Theme Specific Hover */ 155 | .theme-light button:hover { 156 | box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf; 157 | } 158 | 159 | /* Dark Theme Specific Hover */ 160 | .theme-dark button:hover { 161 | box-shadow: inset -1px -1px #3a3a3a, inset 1px 1px #888888; 162 | } 163 | 164 | 165 | /* Editor area styling - shared */ 166 | .cm-s-obsidian { 167 | font-family: "Courier New", monospace; 168 | line-height: 1.5; 169 | color: var(--text-normal); 170 | background-color: var(--background-primary); 171 | } 172 | 173 | /* Headings - shared */ 174 | /*.cm-header { 175 | font-weight: bold; 176 | color: var(--titlebar-background); 177 | }*/ 178 | 179 | /* Headings - Shared (Reading and Editing Modes) */ 180 | .cm-header, /* Editing Mode */ 181 | h1, h2, h3, h4, h5, h6 { /* Reading Mode */ 182 | font-weight: bold; 183 | } 184 | 185 | /* Reading Mode Specific (HTML Headings) */ 186 | h1 { 187 | color: var(--h1-color); 188 | } 189 | h2 { 190 | color: var(--h2-color); 191 | } 192 | h3 { 193 | color: var(--h3-color); 194 | } 195 | h4 { 196 | color: var(--h4-color); 197 | } 198 | h5 { 199 | color: var(--h5-color); 200 | } 201 | h6 { 202 | color: var(--h6-color); 203 | } 204 | 205 | /* Editing Mode Specific (CodeMirror Headings) */ 206 | .cm-header-1 { 207 | color: var(--h1-color); 208 | } 209 | .cm-header-2 { 210 | color: var(--h2-color); 211 | } 212 | .cm-header-3 { 213 | color: var(--h3-color); 214 | } 215 | .cm-header-4 { 216 | color: var(--h4-color); 217 | } 218 | .cm-header-5 { 219 | color: var(--h5-color); 220 | } 221 | .cm-header-6 { 222 | color: var(--h6-color); 223 | } 224 | 225 | 226 | /* Links - theme specific */ 227 | .theme-light .cm-link, 228 | .theme-light .cm-hmd-internal-link { 229 | color: #0000ff; 230 | text-decoration: underline; 231 | } 232 | 233 | .theme-dark .cm-link, 234 | .theme-dark .cm-hmd-internal-link { 235 | color: #8cb4ff; 236 | text-decoration: underline; 237 | } 238 | 239 | /* Dropdown menus - shared */ 240 | .menu { 241 | background-color: var(--background-tertiary); 242 | border: var(--window-border); 243 | box-shadow: var(--window-shadow); 244 | } 245 | 246 | .menu-item { 247 | color: var(--text-normal); 248 | padding: 4px 8px; 249 | } 250 | 251 | .menu-item:hover { 252 | background-color: var(--titlebar-background); 253 | color: var(--titlebar-text); 254 | } 255 | 256 | /* Separator in menus - shared */ 257 | .menu-separator { 258 | border-bottom: 1px solid #808080; 259 | margin: 4px 0; 260 | } 261 | 262 | /* Modal dialogs - shared */ 263 | .is-phone .modal .modal-title { 264 | display: block; 265 | text-align: center; 266 | overflow: hidden; 267 | text-overflow: ellipsis; 268 | white-space: nowrap; 269 | max-width: 70vw; 270 | } 271 | 272 | .modal { 273 | background-color: var(--background-tertiary); 274 | border: var(--window-border); 275 | box-shadow: var(--window-shadow); 276 | } 277 | 278 | .modal-title { 279 | color: var(--titlebar-text); 280 | margin-left: auto; 281 | margin-right: auto; 282 | padding: 4px 8px; 283 | font-weight: bold; 284 | } 285 | 286 | .modal-content { 287 | padding: 8px; 288 | color: var(--text-normal); 289 | } 290 | 291 | /* Dialog buttons at bottom - shared */ 292 | .modal-button-container { 293 | display: flex; 294 | justify-content: flex-end; 295 | gap: 8px; 296 | padding: 8px; 297 | } 298 | 299 | /* Status bar at the bottom - shared */ 300 | .status-bar { 301 | background-color: var(--background-tertiary); 302 | border-top: 1px solid #808080; 303 | color: var(--text-normal); 304 | height: 22px; 305 | padding: 0 4px; 306 | } 307 | 308 | .status-bar-item { 309 | padding: 0 4px; 310 | } 311 | 312 | /* Status bar buttons - shared */ 313 | .status-bar-item button { 314 | height: 18px; 315 | padding: 0 4px; 316 | } 317 | 318 | /* Windows 3.1 style scrollbars - shared structure */ 319 | ::-webkit-scrollbar { 320 | width: 16px; 321 | height: 16px; 322 | } 323 | 324 | ::-webkit-scrollbar-track { 325 | background-color: var(--background-tertiary); 326 | } 327 | 328 | ::-webkit-scrollbar-thumb { 329 | background-color: var(--background-tertiary); 330 | border: 1px solid #000; 331 | } 332 | 333 | ::-webkit-scrollbar-button { 334 | background-color: var(--background-tertiary); 335 | border: 1px solid #000; 336 | width: 16px; 337 | height: 16px; 338 | } 339 | 340 | /* Theme-specific scrollbar styling */ 341 | /* Light Scrollbars */ 342 | 343 | 344 | 345 | .theme-light ::-webkit-scrollbar-thumb, 346 | .theme-light ::-webkit-scrollbar-button { 347 | box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 348 | } 349 | 350 | .theme-light ::-webkit-scrollbar-button:active { 351 | box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px grey, inset -2px -2px #dfdfdf; 352 | } 353 | 354 | .theme-dark ::-webkit-scrollbar-thumb, 355 | .theme-dark ::-webkit-scrollbar-button { 356 | box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #666, inset -2px -2px #333, inset 2px 2px #555; 357 | } 358 | 359 | .theme-dark ::-webkit-scrollbar-button:active { 360 | box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #666, inset 2px 2px #333, inset -2px -2px #555; 361 | } 362 | 363 | /* Light Tabs styling */ 364 | .theme-light .workspace-tab-header { 365 | background-color: var(--background-tertiary); 366 | color: var(--text-normal); 367 | border: 1px solid #000; 368 | box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf; 369 | border-radius: 5px; /* Ensure all corners align */ 370 | } 371 | 372 | .theme-light .workspace-tab-header.is-active { 373 | background-color: var(--background-secondary); 374 | box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px grey, inset -2px -2px #dfdfdf; 375 | border-radius: 5px; 376 | } 377 | 378 | /* Dark Tabs styling */ 379 | .theme-dark .workspace-tab-header { 380 | background-color: var(--background-tertiary); 381 | color: var(--text-normal); 382 | border: 1px solid #000; 383 | box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #666, inset -2px -2px #333, inset 2px 2px #555; 384 | border-radius: 5px; 385 | } 386 | 387 | .theme-dark .workspace-tab-header.is-active { 388 | background-color: var(--background-secondary); 389 | box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #666, inset 2px 2px #333, inset -2px -2px #555; 390 | border-radius: 5px; 391 | } 392 | 393 | /* fix bottom edge of active tabs https://github.com/codeisconfusing/retro-windows-obsidian/issues/1 394 | & https://www.reddit.com/r/ObsidianMD/comments/1j2ulat/comment/mfzfqrt/ 395 | thanks u/AccomplishedLife7782 / https://github.com/Gonzalo-D-Sales */ 396 | .workspace-split.mod-root .workspace-tab-header::before, 397 | .workspace-split.mod-root .workspace-tab-header::after { 398 | display: none; 399 | } 400 | 401 | /* Code blocks - theme specific */ 402 | /*.theme-light pre, 403 | .theme-light code { 404 | background-color: #f0f0f0; 405 | color: #0b6e4f; 406 | border: 1px solid #c0c0c0; 407 | font-family: "Courier New", monospace; 408 | } 409 | 410 | .theme-light .cm-inline-code { 411 | background-color: #f0f0f0; 412 | color: #0b6e4f; 413 | padding: 0 4px; 414 | border-radius: 3px; 415 | } 416 | 417 | .theme-dark pre, 418 | .theme-dark code { 419 | background-color: #2a2a2a; 420 | color: #6fcf9f; 421 | border: 1px solid #555555; 422 | font-family: "Courier New", monospace; 423 | } 424 | 425 | .theme-dark .cm-inline-code { 426 | background-color: #2a2a2a; 427 | color: #6fcf9f; 428 | padding: 0 4px; 429 | border-radius: 3px; 430 | }*/ 431 | 432 | /* Code blocks - theme specific */ 433 | .theme-light pre, 434 | .theme-light code { 435 | background-color: #f0f0f0; 436 | color: #0b6e4f; 437 | border: 1px solid #c0c0c0; 438 | font-family: "Courier New", monospace; 439 | padding: 8px; 440 | border-radius: 5px; 441 | } 442 | 443 | .theme-light .cm-inline-code { 444 | background-color: #f0f0f0; 445 | color: #0b6e4f; 446 | padding: 2px 6px; 447 | border-radius: 3px; 448 | } 449 | 450 | .theme-dark pre, 451 | .theme-dark code { 452 | background-color: #2a2a2a; 453 | color: #6fcf9f; 454 | border: 1px solid #555555; 455 | font-family: "Courier New", monospace; 456 | padding: 8px; 457 | border-radius: 5px; 458 | } 459 | 460 | .theme-dark .cm-inline-code { 461 | background-color: #2a2a2a; 462 | color: #6fcf9f; 463 | padding: 2px 6px; 464 | border-radius: 3px; 465 | } 466 | 467 | 468 | /* Properties mods - theme specific */ 469 | .theme-light .metadata-container { 470 | border: 1px solid #000000; 471 | padding: 1em 1em 0.5em 2em; 472 | border-radius: 5px; 473 | background: #d4d0c8 474 | } 475 | 476 | /* Properties mods for dark theme */ 477 | .theme-dark .metadata-container { 478 | border: 1px solid #666666; 479 | padding: 1em 1em 0.5em 2em; 480 | border-radius: 5px; 481 | background: #3a3a3a; 482 | } 483 | 484 | /* Dataview column wrapping and coloring - theme specific */ 485 | .theme-light .table-view-table>tbody>tr>td { 486 | white-space: pre-wrap !important; 487 | background-color: #ccccff1f !important; 488 | padding: 10px !important; 489 | } 490 | 491 | .theme-dark .table-view-table>tbody>tr>td { 492 | white-space: pre-wrap !important; 493 | background-color: #33335f !important; 494 | padding: 10px !important; 495 | } 496 | 497 | /* Light theme folder colors */ 498 | .theme-light { 499 | --folder-color-1: #965D5D; /* red */ 500 | --folder-color-2: #8470A6; /* purple */ 501 | --folder-color-3: #507A9E; /* blue */ 502 | --folder-color-4: #5A8D76; /* green */ 503 | --folder-color-5: #A19C6C; /* yellow */ 504 | --folder-color-6: #A67A5B; /* orange */ 505 | --folder-color-7: #96707E; /* pink */ 506 | --folder-color-8: #5B8B9E; /* sky blue */ 507 | --folder-color-9: #6B8C6B; /* mint */ 508 | --folder-color-10: #8B7E6D; /* taupe */ 509 | --folder-color-11: #8D6B83; /* mauve */ 510 | --folder-color-12: #6C8299; /* steel blue */ 511 | } 512 | 513 | /* Dark theme folder colors - brightened for better contrast */ 514 | .theme-dark { 515 | --folder-color-1: #c78080; /* red */ 516 | --folder-color-2: #a992d0; /* purple */ 517 | --folder-color-3: #7aa3c9; /* blue */ 518 | --folder-color-4: #7fb59a; /* green */ 519 | --folder-color-5: #c9c48e; /* yellow */ 520 | --folder-color-6: #d19e7d; /* orange */ 521 | --folder-color-7: #c093a6; /* pink */ 522 | --folder-color-8: #7db3c9; /* sky blue */ 523 | --folder-color-9: #8eb98e; /* mint */ 524 | --folder-color-10: #b3a68f; /* taupe */ 525 | --folder-color-11: #b38da8; /* mauve */ 526 | --folder-color-12: #8eabc0; /* steel blue */ 527 | } 528 | 529 | /* Shared folder styling structure */ 530 | .nav-files-container > div > .nav-folder:nth-child(6n + 1) { --folder-color: var(--folder-color-1); } 531 | .nav-files-container > div > .nav-folder:nth-child(6n + 2) { --folder-color: var(--folder-color-2); } 532 | .nav-files-container > div > .nav-folder:nth-child(6n + 3) { --folder-color: var(--folder-color-3); } 533 | .nav-files-container > div > .nav-folder:nth-child(6n + 4) { --folder-color: var(--folder-color-4); } 534 | .nav-files-container > div > .nav-folder:nth-child(6n + 5) { --folder-color: var(--folder-color-5); } 535 | .nav-files-container > div > .nav-folder:nth-child(6n + 6) { --folder-color: var(--folder-color-6); } 536 | .nav-files-container > div > .nav-folder:nth-child(12n + 7) { --folder-color: var(--folder-color-7); } 537 | .nav-files-container > div > .nav-folder:nth-child(12n + 8) { --folder-color: var(--folder-color-8); } 538 | .nav-files-container > div > .nav-folder:nth-child(12n + 9) { --folder-color: var(--folder-color-9); } 539 | .nav-files-container > div > .nav-folder:nth-child(12n + 10) { --folder-color: var(--folder-color-10); } 540 | .nav-files-container > div > .nav-folder:nth-child(12n + 11) { --folder-color: var(--folder-color-11); } 541 | .nav-files-container > div > .nav-folder:nth-child(12n + 12) { --folder-color: var(--folder-color-12); } 542 | 543 | /* Theme-specific folder borders */ 544 | .theme-light .nav-files-container > div > .nav-folder { 545 | border: 1px solid #c0c0c0; 546 | border-left: 4px solid var(--folder-color); 547 | border-radius: var(--radius-s); 548 | } 549 | 550 | .theme-dark .nav-files-container > div > .nav-folder { 551 | border: 1px solid #555555; 552 | border-left: 4px solid var(--folder-color); 553 | border-radius: var(--radius-s); 554 | } 555 | 556 | .nav-files-container > div > .nav-folder + .nav-folder { 557 | margin-top: var(--size-2-2); 558 | } 559 | 560 | .nav-folder-title { 561 | color: var(--folder-color); 562 | font-weight: var(--font-bold); 563 | } 564 | 565 | /* TABLES */ 566 | th { 567 | border: 1px solid var(--background-tertiary) !important; 568 | } 569 | 570 | td { 571 | border: 1px solid var(--background-tertiary) !important; 572 | } 573 | 574 | thead { 575 | border-bottom: 4px solid var(--background-tertiary); 576 | } 577 | 578 | /* Calendar Styling */ 579 | #calendar-container .day:hover { 580 | background-color: var(--interactive-hover); 581 | } 582 | #calendar-container .today { 583 | font-weight: 700; 584 | background-color: var(--interactive-accent); 585 | color: var(--titlebar-text); 586 | } -------------------------------------------------------------------------------- /versions.json: -------------------------------------------------------------------------------- 1 | { 2 | "1.0.0": "1.0.0" 3 | } --------------------------------------------------------------------------------