├── .gitattributes ├── title.png ├── example_full.png ├── (TEMPLATE) Daily (Vanilla).md ├── (TEMPLATE) Daily.md ├── LICENSE ├── README.md └── Daily Note Themes.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CyanVoxel/Obsidian-Daily-Themes/HEAD/title.png -------------------------------------------------------------------------------- /example_full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CyanVoxel/Obsidian-Daily-Themes/HEAD/example_full.png -------------------------------------------------------------------------------- /(TEMPLATE) Daily (Vanilla).md: -------------------------------------------------------------------------------- 1 | --- 2 | date: {{date}}T{{time}} 3 | tags: [Daily] 4 | cssclasses: [daily, {{date:dddd}}] 5 | --- 6 | # DAILY NOTE 7 | ### *{{date:dddd, MMMM Do, YYYY}}* 8 | 9 | ## Journal 10 | ... 11 | 12 | ## Ongoing Tasks 13 | - [ ] Task 1 14 | - [ ] Task 2 15 | - [ ] Task 3 -------------------------------------------------------------------------------- /(TEMPLATE) Daily.md: -------------------------------------------------------------------------------- 1 | --- 2 | date: <%tp.date.now("YYYY-MM-DD")%>T<%tp.date.now("HH:mm")%> 3 | tags: 4 | - Daily 5 | cssclasses: 6 | - daily 7 | <% "- " + tp.date.now("dddd", 0, tp.file.title, "YYYYMMDD").toLowerCase() %> 8 | --- 9 | # DAILY NOTE 10 | ## <% tp.date.now("dddd, MMMM Do, YYYY", 0, tp.file.title, "YYYYMMDD") %> 11 | *** 12 | ### Journal 13 | #### TIME 14 | Customize this template to your liking! 15 | ... 16 | *** 17 | ### Tasks 18 | - [ ] Task 1 19 | - [ ] Task 2 20 | - [ ] Task 3 -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Travis Abendshien 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-Daily-Themes v1.1.0 2 | ## A Series of Daily Theme CSS Snippets for Obsidian. 3 | 4 | ![](title.png) 5 | 6 | These are a set of 7 main CSS classes that can be used to apply individual color 7 | schemes to daily notes for each day of the week. These as well as the included template can be used with the [Templater](https://github.com/SilentVoid13/Templater) plugin to create some automatically-themed daily notes inside your Obsidian vault! 8 | 9 | ***The template references your note's filename to get the date and expects a "YYYYMMDD" naming format!*** If you don't wish to use this format, you could either customize the template using [Moment.js](https://momentjs.com/) formatting, or grab the old version of the template that doesn't rely on the filename, but can only reference the current date [here](https://github.com/CyanVoxel/Obsidian-Daily-Themes/blob/bb1bc8866c18739c3b8a263986496c184a2666a5/(TEMPLATE)%20Daily.md?plain=1). 10 | 11 | To customize the colors for each day, just swap out the colors values under 12 | the main "day of the week" classes. 13 | 14 | 15 | 16 | *NOTE:* By default, this snippet relies on the [Bai Jamjuree](https://fonts.google.com/specimen/Bai+Jamjuree) or 17 | [JetBrainsMono Nerd Font Mono](https://www.jetbrains.com/lp/mono/) fonts. If you don't wish to use these, then just 18 | change or remove those font-family lines from the snippet. 19 | -------------------------------------------------------------------------------- /Daily Note Themes.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------------------------------------------------ 2 | Daily Note Themes by CyanVoxel v1.0.5 3 | 4 | These are a set of 7 main CSS classes that can be used to apply individual color 5 | schemes to daily notes for each day of the week. 6 | To customize the colors for each day, just swamp out the colors values under 7 | the main "day of the week" classes. 8 | 9 | NOTE: By default, this snippet relies on the "Bai Jamjuree" or 10 | "JetBrainsMono Nerd Font Mono" fonts. If you don't wish to use these, then just 11 | change or remove those font-family lines from this snippet. 12 | 13 | ------------------------------------------------------------------------------*/ 14 | :root { 15 | --highlight: #ffffff; 16 | --primary: #aaaaaa; 17 | --dark: #333333; 18 | } 19 | 20 | .daily { 21 | --dark: var(--dark); 22 | color: var(--highlight); 23 | background-color: var(--dark); 24 | --text-normal: var(--highlight); 25 | --text-muted: var(--highlight); 26 | --text-faint: var(--highlight); 27 | --checklist-done-color: var(--highlight); 28 | --metadata-label-text-color: var(--highlight); 29 | --metadata-input-text-color: var(--highlight); 30 | --tag-color: var(--dark); 31 | --tag-background: var(--primary); 32 | --hr-color: var(--primary); 33 | --blockquote-border-color: var(--primary); 34 | --interactive-accent: var(--primary); 35 | --collapse-icon-color-collapsed: var(--primary); 36 | --checkbox-color: var(--primary); 37 | --checkbox-marker-color: var(--dark); 38 | --checkbox-color-hover: var(--highlight); 39 | --checkbox-border-color: var(--highlight); 40 | --list-marker-color: var(--highlight); 41 | --code-background: black; 42 | --code-normal: var(--primary); 43 | 44 | --background-modifier-border-focus: var(--primary); 45 | --background-modifier-border: color-mix(in srgb, var(--highlight) 60%, transparent); 46 | --background-modifier-hover: color-mix(in srgb, var(--highlight) 60%, transparent); 47 | --pill-cover-hover: color-mix(in srgb, var(--highlight) 60%, transparent); 48 | } 49 | 50 | .sunday, .Sunday { 51 | --highlight: #f39caa; 52 | --primary: #f6466f; 53 | --dark: #2d0916; 54 | } 55 | .monday, .Monday { 56 | --highlight: #fcadaa; 57 | --primary: #f65848; 58 | --dark: #3c0e0b; 59 | } 60 | .tuesday, .Tuesday { 61 | --highlight: #aedbfa; 62 | --primary: #3b87f0; 63 | --dark: #070615; 64 | } 65 | .wednesday, .Wednesday { 66 | --highlight: #fff3c4; 67 | --primary: #ffd63d; 68 | --dark: #2c1404; 69 | } 70 | .thursday, .Thursday { 71 | --highlight: #f7b79b; 72 | --primary: #ed6022; 73 | --dark: #210b04; 74 | } 75 | .friday, .Friday { 76 | --highlight: #e9f9b7; 77 | --primary: #92e649; 78 | --dark: #192108; 79 | } 80 | .saturday, .Saturday{ 81 | --highlight: #f39caa; 82 | --primary: #e22c3c; 83 | --dark: #100305; 84 | } 85 | 86 | .daily :is(h1, .HyperMD-header.HyperMD-header-1) { 87 | color: var(--primary); 88 | text-align: center; 89 | font-size: 60px; 90 | font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono", "JetBrains Mono"; 91 | padding: 0 !important; 92 | } 93 | .daily :is(h2, .HyperMD-header.HyperMD-header-2) { 94 | color: var(--highlight); 95 | text-align: center; 96 | font-size: 30px; 97 | font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono", "JetBrains Mono"; 98 | font-style: italic; 99 | padding: 0 !important; 100 | } 101 | .daily :is(h3, .HyperMD-header.HyperMD-header-3) { 102 | color: var(--primary); 103 | text-align: center; 104 | 105 | font-size: 32px; 106 | font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono", "JetBrains Mono"; 107 | padding-top: 0; 108 | } 109 | .daily :is(h4, .HyperMD-header.HyperMD-header-4) { 110 | background-color: var(--primary); 111 | color: var(--dark); 112 | /* border-color: var(--primary); */ 113 | /* font-family: "JetBrainsMono Nerd Font Mono", "JetBrains Mono", monospace; */ 114 | font-weight: 900; 115 | margin-bottom: 0; 116 | padding-top: 0; 117 | font-size: 20px; 118 | width: fit-content; 119 | padding-left: 6px; 120 | padding-right: 6px; 121 | /* border: solid; */ 122 | border-radius: 8px; 123 | /* border-width: 2px; */ 124 | word-wrap: normal; 125 | } 126 | .daily p { 127 | margin-top: 4px; 128 | margin-bottom: 4px; 129 | } 130 | .daily :is(a:link, .cm-hmd-internal-link) { 131 | color: var(--primary); 132 | } 133 | .daily :is(a:hover, .cm-hmd-internal-link:hover) { 134 | color: var(--highlight); 135 | } 136 | .daily hr { 137 | margin-top: 20px !important; 138 | margin-bottom: 20px !important; 139 | } 140 | 141 | .daily img { 142 | display: block !important; 143 | margin-left: auto !important; 144 | margin-right: auto !important; 145 | } 146 | 147 | :is(.sunday, .Sunday, 148 | .monday, .Monday, 149 | .tuesday, .Tuesday, 150 | .wednesday, .Wednesday, 151 | .thursday, .Thursday, 152 | .friday, .Friday, 153 | .saturday, .Saturday 154 | ) 155 | svg { 156 | color: color-mix(in srgb, var(--highlight) 60%, transparent); 157 | } 158 | --------------------------------------------------------------------------------