├── .github └── FUNDING.yml ├── Block Highlights ├── README.md ├── dark.png ├── highlights.css └── light.png ├── Bullet Threading ├── README.md ├── bullet-threading.css └── bullet.gif ├── Custom Formats ├── README.md ├── custom-formats.css └── custom-formats.png ├── Hide Topbar ├── README.md ├── hide-topbar.css ├── hide.png └── show.png ├── Main Width Limit ├── README.md ├── limited.png ├── main-width-limit.css └── unlimited.png ├── README.md ├── Reorder Page Areas ├── README.md ├── reorder-areas.css └── reorder-areas.png ├── Strikethrough Done ├── README.md ├── strikethrough.png └── striketrough.css ├── Tag Colors (Dark Mode) ├── README.md ├── default.png ├── enhanced.png └── tag-colors-darkmode.css └── tag-colors-darkmode.css /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: rcvd # Replace with up to 4 GitHub Sponsors-enabled usernames 4 | e.g., [user1, user2] 5 | patreon: # Replace with a single Patreon username 6 | open_collective: # Replace with a single Open Collective username 7 | ko_fi: # Replace with a single Ko-fi username 8 | tidelift: # Replace with a single Tidelift platform-name/package-name 9 | e.g., npm/babel 10 | community_bridge: # Replace with a single Community Bridge project-name 11 | e.g., cloud-foundry 12 | liberapay: # Replace with a single Liberapay username 13 | issuehunt: # Replace with a single IssueHunt username 14 | otechie: # Replace with a single Otechie username 15 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name 16 | e.g., cloud-foundry 17 | custom: 18 | ['https://goedel.io','https://www.buymeacoffee.com/rcvdio','https://flattr.com/@rcvd','https://paypal.me/rcvd'] 19 | # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 20 | -------------------------------------------------------------------------------- /Block Highlights/README.md: -------------------------------------------------------------------------------- 1 | # Block Highlights 2 | This CSS snippet adds new tags for block highlights supporting light and dark mode. The tags are faded when not hovered to not disturb the experience. 3 | - Pink: `#.hp` or `#.pink` 4 | - Red: `#.hr` or `#.red` 5 | - Orange: `#.ho` or `#.orange` 6 | - Brown: `#.hbr` or `#.brown` 7 | - Yellow: `#.hy` or `#.yellow` 8 | - Green: `#.hg` or `#.green` 9 | - Turquoise: `#.ht` or `#.turquoise` 10 | - Steelblue: `#.hs` or `#.steelblue` 11 | - Blue: `#.hb` or `#.blue` 12 | - Purple: `#.hpu` or `#.purple` 13 | - Violet: `#.hv` or `#.violet` 14 | - Rose: `#.hro` or `#.rose` 15 | 16 | 17 | ![Block Highlights in Light Mode](light.png) 18 | ![Block Highlights in Dark Mode](dark.png) 19 | 20 | 21 | Just add [this snippet](https://github.com/rcvd/Tana-CSS-Snippets/blob/afbaf17a2c86512ebe4cd5b3163c0de90439b0fa/Block%20Highlights/highlights.css) using a browser plugin like stylus (Firefox or Chrome) or cascadea (Safari). 22 | -------------------------------------------------------------------------------- /Block Highlights/dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Block Highlights/dark.png -------------------------------------------------------------------------------- /Block Highlights/highlights.css: -------------------------------------------------------------------------------- 1 | div[data-tag-name=".hp"] > .contentSide > div > .contentLine, 2 | div[data-tag-name=".pink"] > .contentSide > div > .contentLine { 3 | background-color: #fbe9f2; 4 | } 5 | 6 | div[data-tag-name=".hr"] > .contentSide > div > .contentLine, 7 | div[data-tag-name=".red"] > .contentSide > div > .contentLine { 8 | background-color: #f8eaec; 9 | } 10 | 11 | div[data-tag-name=".ho"] > .contentSide > div > .contentLine, 12 | div[data-tag-name=".orange"] > .contentSide > div > .contentLine { 13 | background-color: #ffebd0; 14 | } 15 | 16 | div[data-tag-name=".hbr"] > .contentSide > div > .contentLine, 17 | div[data-tag-name=".brown"] > .contentSide > div > .contentLine { 18 | background-color: #f8ecd7; 19 | } 20 | 21 | div[data-tag-name=".hy"] > .contentSide > div > .contentLine, 22 | div[data-tag-name=".yellow"] > .contentSide > div > .contentLine { 23 | background-color: #f5efc4; 24 | } 25 | 26 | div[data-tag-name=".hg"] > .contentSide > div > .contentLine, 27 | div[data-tag-name=".green"] > .contentSide > div > .contentLine { 28 | background-color: #ecf0d4; 29 | } 30 | 31 | div[data-tag-name=".ht"] > .contentSide > div > .contentLine, 32 | div[data-tag-name=".turqoise"] > .contentSide > div > .contentLine { 33 | background-color: #d7f4eb; 34 | } 35 | 36 | div[data-tag-name=".hs"] > .contentSide > div > .contentLine, 37 | div[data-tag-name=".steelblue"] > .contentSide > div > .contentLine { 38 | background-color: #e6eef7; 39 | } 40 | 41 | div[data-tag-name=".hb"] > .contentSide > div > .contentLine, 42 | div[data-tag-name=".blue"] > .contentSide > div > .contentLine { 43 | background-color: #e3eeff; 44 | } 45 | 46 | div[data-tag-name=".hpu"] > .contentSide > div > .contentLine, 47 | div[data-tag-name=".purple"] > .contentSide > div > .contentLine { 48 | background-color: #fbe9f2; 49 | } 50 | 51 | div[data-tag-name=".hv"] > .contentSide > div > .contentLine, 52 | div[data-tag-name=".violet"] > .contentSide > div > .contentLine { 53 | background-color: #f4ebf6; 54 | } 55 | 56 | div[data-tag-name=".hro"] > .contentSide > div > .contentLine, 57 | div[data-tag-name=".rose"] > .contentSide > div > .contentLine { 58 | background-color: #fee7f9; 59 | } 60 | 61 | span[data-tag='.pink'], 62 | span[data-tag='.red'], 63 | span[data-tag='.orange'], 64 | span[data-tag='.brown'], 65 | span[data-tag='.yellow'], 66 | span[data-tag='.green'], 67 | span[data-tag='.turquoise'], 68 | span[data-tag='.steelblue'], 69 | span[data-tag='.blue'], 70 | span[data-tag='.purple'], 71 | span[data-tag='.violet'], 72 | span[data-tag='.rose'], 73 | span[data-tag*='.h'] { 74 | opacity: 0.2; 75 | } 76 | 77 | span[data-tag='.pink']:hover, 78 | span[data-tag='.red']:hover, 79 | span[data-tag='.orange']:hover, 80 | span[data-tag='.brown']:hover, 81 | span[data-tag='.yellow']:hover, 82 | span[data-tag='.green']:hover, 83 | span[data-tag='.turquoise']:hover, 84 | span[data-tag='.steelblue']:hover, 85 | span[data-tag='.blue']:hover, 86 | span[data-tag='.purple']:hover, 87 | span[data-tag='.violet']:hover, 88 | span[data-tag='.rose']:hover, 89 | span[data-tag*='.h']:hover { 90 | opacity: 1; 91 | } 92 | 93 | html.isDarkMode div[data-tag-name=".hp"] > .contentSide > div > .contentLine, 94 | html.isDarkMode div[data-tag-name=".pink"] > .contentSide > div > .contentLine { 95 | background-color: #ee0085; 96 | color: white; 97 | } 98 | 99 | html.isDarkMode div[data-tag-name=".hr"] > .contentSide > div > .contentLine, 100 | html.isDarkMode div[data-tag-name=".red"] > .contentSide > div > .contentLine { 101 | background-color: #d83853; 102 | color: white; 103 | } 104 | 105 | html.isDarkMode div[data-tag-name=".ho"] > .contentSide > div > .contentLine, 106 | html.isDarkMode div[data-tag-name=".orange"] > .contentSide > div > .contentLine { 107 | background-color: #b85d00; 108 | color: white; 109 | } 110 | 111 | html.isDarkMode div[data-tag-name=".hbr"] > .contentSide > div > .contentLine, 112 | html.isDarkMode div[data-tag-name=".brown"] > .contentSide > div > .contentLine { 113 | background-color: #a96600; 114 | color: white; 115 | } 116 | 117 | html.isDarkMode div[data-tag-name=".hy"] > .contentSide > div > .contentLine, 118 | html.isDarkMode div[data-tag-name=".yellow"] > .contentSide > div > .contentLine { 119 | background-color: #887500; 120 | color: white; 121 | } 122 | 123 | html.isDarkMode div[data-tag-name=".hg"] > .contentSide > div > .contentLine, 124 | html.isDarkMode div[data-tag-name=".green"] > .contentSide > div > .contentLine { 125 | background-color: #667f00; 126 | color: white; 127 | } 128 | 129 | html.isDarkMode div[data-tag-name=".ht"] > .contentSide > div > .contentLine, 130 | html.isDarkMode div[data-tag-name=".turqoise"] > .contentSide > div > .contentLine { 131 | background-color: #008b59; 132 | color: white; 133 | } 134 | 135 | html.isDarkMode div[data-tag-name=".hs"] > .contentSide > div > .contentLine, 136 | html.isDarkMode div[data-tag-name=".steelblue"] > .contentSide > div > .contentLine { 137 | background-color: #007bda; 138 | color: white; 139 | } 140 | 141 | html.isDarkMode div[data-tag-name=".hb"] > .contentSide > div > .contentLine, 142 | html.isDarkMode div[data-tag-name=".blue"] > .contentSide > div > .contentLine { 143 | background-color: #006bff; 144 | color: white; 145 | } 146 | 147 | html.isDarkMode div[data-tag-name=".hpu"] > .contentSide > div > .contentLine, 148 | html.isDarkMode div[data-tag-name=".purple"] > .contentSide > div > .contentLine { 149 | background-color: #8b59e1; 150 | color: white; 151 | } 152 | 153 | html.isDarkMode div[data-tag-name=".hv"] > .contentSide > div > .contentLine, 154 | html.isDarkMode div[data-tag-name=".violet"] > .contentSide > div > .contentLine { 155 | background-color: #b048c6; 156 | color: white; 157 | } 158 | 159 | html.isDarkMode div[data-tag-name=".hro"] > .contentSide > div > .contentLine, 160 | html.isDarkMode div[data-tag-name=".rose"] > .contentSide > div > .contentLine { 161 | background-color: #d514b4; 162 | color: white; 163 | } -------------------------------------------------------------------------------- /Block Highlights/light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Block Highlights/light.png -------------------------------------------------------------------------------- /Bullet Threading/README.md: -------------------------------------------------------------------------------- 1 | # Bullet Threading 2 | This CSS snippet highlights the path to the focused bullet. 3 | 4 | ![Original content width](bullet.gif) 5 | 6 | Just add [this snippet](https://github.com/rcvd/Tana-CSS-Snippets/blob/484edbcd8456af410cdcb590771458330d826a39/Bullet%20Threading/bullet-threading.css) using a browser plugin like stylus (Firefox or Chrome) or cascadea (Safari). 7 | -------------------------------------------------------------------------------- /Bullet Threading/bullet-threading.css: -------------------------------------------------------------------------------- 1 | div.bulletAndContent:has(div.bulletAndContent:focus-within)>div>button.bullet:after { 2 | background-color: red; 3 | } 4 | 5 | div.bulletAndContent:has(div.bulletAndContent:focus-within)>.bulletSide.bulletSideExpanded:after { 6 | background-color: red; 7 | } 8 | 9 | div.bulletAndContent:focus-within>div>button.bullet:after { 10 | background-color: red; 11 | } -------------------------------------------------------------------------------- /Bullet Threading/bullet.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Bullet Threading/bullet.gif -------------------------------------------------------------------------------- /Custom Formats/README.md: -------------------------------------------------------------------------------- 1 | # Custom Formats 2 | This CSS snippet adds new tags for quotes and headings. The tags are faded when not hovered to not disturb the experience. 3 | 4 | ![Tags for quotes and headings](custom-formats.png) 5 | 6 | Just add [this snippet](https://github.com/rcvd/Tana-CSS-Snippets/blob/d76806b4d3f4674482da29150a19e3624429bede/Custom%20Formats/custom-formats.css) using a browser plugin like stylus (Firefox or Chrome) or cascadea (Safari). 7 | -------------------------------------------------------------------------------- /Custom Formats/custom-formats.css: -------------------------------------------------------------------------------- 1 | div[data-tag-name=".quote"] > .contentSide { 2 | border-left: 2px solid var(--colorEditorText); 3 | padding-left: 8px; 4 | font-style: italic; 5 | } 6 | 7 | div[data-tag-name=".h1"] > .contentSide > div > .contentLine { 8 | font-size: calc(1.2rem * 1.25 * 1.25); 9 | font-weight: 700; 10 | } 11 | 12 | div[data-tag-name=".h2"] > .contentSide > div > .contentLine { 13 | font-size: calc(1.2rem * 1.25); 14 | font-weight: 600; 15 | } 16 | 17 | div[data-tag-name=".h3"] > .contentSide > div > .contentLine { 18 | font-size: calc(1.2rem); 19 | font-weight: 600; 20 | } 21 | 22 | span[data-tag='.quote'], 23 | span[data-tag*='.h'] { 24 | opacity: 0.2; 25 | } 26 | 27 | span[data-tag='.quote']:hover, 28 | span[data-tag*='.h']:hover { 29 | opacity: 1; 30 | } 31 | -------------------------------------------------------------------------------- /Custom Formats/custom-formats.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Custom Formats/custom-formats.png -------------------------------------------------------------------------------- /Hide Topbar/README.md: -------------------------------------------------------------------------------- 1 | # Hide Topbar 2 | This CSS snippets hides the topbar, please make sure you know all relevant keyboard shortcuts! 3 | 4 | ![Original content width](hide.png) 5 | 6 | ![Limited content width](show.png) 7 | 8 | Just add [this snippet](https://github.com/rcvd/Tana-CSS-Snippets/blob/9c0459b1d15e652199218f23375c4c8165658c93/Hide%20Topbar/hide-topbar.css) using a browser plugin like stylus (Firefox or Chrome) or cascadea (Safari). 9 | -------------------------------------------------------------------------------- /Hide Topbar/hide-topbar.css: -------------------------------------------------------------------------------- 1 | .Application-module_mainUIContainer__PInTR { 2 | padding-top: 0; 3 | } 4 | 5 | .TopBar-module_topBar__a-A3U { 6 | display: none; 7 | } -------------------------------------------------------------------------------- /Hide Topbar/hide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Hide Topbar/hide.png -------------------------------------------------------------------------------- /Hide Topbar/show.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Hide Topbar/show.png -------------------------------------------------------------------------------- /Main Width Limit/README.md: -------------------------------------------------------------------------------- 1 | # Limit Main Content Width 2 | This CSS snippets limits the main content width to 800px to increase the readability. 3 | 4 | ![Original content width](unlimited.png) 5 | 6 | ![Limited content width](limited.png) 7 | 8 | Just add [this snippet](https://github.com/rcvd/Tana-CSS-Snippets/blob/8dda4bb059bb846ee6b7a36edea2f80af8e68194/Main%20Width%20Limit/main-width-limit.css) using a browser plugin like stylus (Firefox or Chrome) or cascadea (Safari). 9 | -------------------------------------------------------------------------------- /Main Width Limit/limited.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Main Width Limit/limited.png -------------------------------------------------------------------------------- /Main Width Limit/main-width-limit.css: -------------------------------------------------------------------------------- 1 | div.bulletAndContent, 2 | div.contentSide { 3 | max-width: 800px; 4 | } -------------------------------------------------------------------------------- /Main Width Limit/unlimited.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Main Width Limit/unlimited.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tana-CSS-Snippets 2 | A repository with useful CSS snippets improving Tana's already awesome UI. 3 | 4 | - Block Highlights: Tags for block highlights in various colors 5 | - Bullet Threading: Highlights the path to the current focused bullet 6 | - Custom Formats: Tags for h1-h3 headings and quotes 7 | - Hide Topbar: Hides the topbar (handle with care) 8 | - Main Width Limit: Limiting the main content width to 800px to improve the readability 9 | - Strikethrough Done: Strikes a todo once you finished it 10 | - Tag Colors (Dark Mode): Custom tag colors for dark mode 11 | 12 | ## If you want to support my work 13 | - [Become a GitHub Sponsor](https://github.com/sponsors/rcvd) 14 | - [Buy Me a Coffee](https://www.buymeacoffee.com/rcvdio) 15 | - [Become a supporter on gödel.io](https://www.goedel.io/subscribe?utm_medium=web&utm_source=subscribe-widget&utm_content=47299057) 16 | - [Flattr](https://flattr.com/@rcvd) 17 | - [Paypal](https://paypal.me/rcvd) 18 | 19 | ## Feature Requests, Bugs and Feedback 20 | If you have an idea for a new feature or find a bug, file it under [Issues](https://github.com/rcvd/Tana-CSS-Snippets/issues) with a short description and an screenshot. 21 | Any other feedback can be send to alex@goedel.io 22 | -------------------------------------------------------------------------------- /Reorder Page Areas/README.md: -------------------------------------------------------------------------------- 1 | # Reorder Areas on Daily Notes Page 2 | 3 | This CSS snippet allows reordering the different elements (fields, content, references) of the daily notes page (tagged with #day). This allows putting the references first, for example. 4 | 5 | ![Reorderd areas showing references first](reorder-areas.png) 6 | 7 | Just add [this snippet](https://github.com/rcvd/Tana-CSS-Snippets/blob/a2747a4eca8c2b68ea6429ade955dfbd924c0f96/Reorder%20Page%20Areas/reorder-areas.css) using a browser plugin like stylus (Firefox or Chrome) or cascadea (Safari). 8 | -------------------------------------------------------------------------------- /Reorder Page Areas/reorder-areas.css: -------------------------------------------------------------------------------- 1 | /* References */ 2 | :has(h1 span[data-tag="day"]) .RelatedContent_el__VPLFU { 3 | order: 1; 4 | margin-top: 0; 5 | margin-bottom: 2rem; 6 | } 7 | 8 | /* Content */ 9 | :has(h1 span[data-tag="day"]) .panelContent { 10 | order: 2; 11 | } 12 | 13 | /* Fields */ 14 | :has(h1 span[data-tag="day"]) .AssociatedData_el__Z-I-d { 15 | order: 3; 16 | } 17 | -------------------------------------------------------------------------------- /Reorder Page Areas/reorder-areas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Reorder Page Areas/reorder-areas.png -------------------------------------------------------------------------------- /Strikethrough Done/README.md: -------------------------------------------------------------------------------- 1 | # Striketrough Done Todos 2 | This CSS snippets limits the main content width to 800px to increase the readability. 3 | 4 | ![Original content width](strikethrough.png) 5 | 6 | Just add [this snippet](https://github.com/rcvd/Tana-CSS-Snippets/blob/7a9b0fdc3822258637703f948b970cf78a073c2b/Strikethrough%20Done/striketrough.css) using a browser plugin like stylus (Firefox or Chrome) or cascadea (Safari). 7 | -------------------------------------------------------------------------------- /Strikethrough Done/strikethrough.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Strikethrough Done/strikethrough.png -------------------------------------------------------------------------------- /Strikethrough Done/striketrough.css: -------------------------------------------------------------------------------- 1 | .itemdone-checkbox .listContentItem div { 2 | text-decoration: line-through; 3 | } -------------------------------------------------------------------------------- /Tag Colors (Dark Mode)/README.md: -------------------------------------------------------------------------------- 1 | # Tag Colors for Dark Mode 2 | This CSS snippets replaces the various different tag colors (which are very bright) with something more convenient for dark mode. 3 | 4 | ![Tana's default colors](default.png) 5 | 6 | ![Enhanced Colors](enhanced.png) 7 | 8 | Just add [this snippet](https://github.com/rcvd/Tana-CSS-Snippets/blob/205054d4ec4cfcbfacb643632c63109ff83e18b5/Tag%20Colors%20(Dark%20Mode)/tag-colors-darkmode.css) using a browser plugin like stylus (Firefox or Chrome) or cascadea (Safari). 9 | -------------------------------------------------------------------------------- /Tag Colors (Dark Mode)/default.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Tag Colors (Dark Mode)/default.png -------------------------------------------------------------------------------- /Tag Colors (Dark Mode)/enhanced.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rcvd/Tana-CSS-Snippets/5bea39c0c77b56b313e845cb2f2f4df350d05a72/Tag Colors (Dark Mode)/enhanced.png -------------------------------------------------------------------------------- /Tag Colors (Dark Mode)/tag-colors-darkmode.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: dark) { 2 | /* Pink Tags */ 3 | span[style="--templateColorDimmed:#fbe9f2; --templateColor:#ee0085;"] { 4 | --templateColor: #fbe9f2 !important; 5 | --templateColorDimmed: #ee0085 !important; 6 | } 7 | 8 | /* Red Tags */ 9 | span[style="--templateColorDimmed:#f8eaec; --templateColor:#d83853;"] { 10 | --templateColor: #f8eaec !important; 11 | --templateColorDimmed: #d83853 !important; 12 | } 13 | 14 | /* Orange Tags */ 15 | span[style="--templateColorDimmed:#ffebd0; --templateColor:#b85d00;"] { 16 | --templateColor: #ffebd0 !important; 17 | --templateColorDimmed: #b85d00 !important; 18 | } 19 | 20 | /* Brown Tags */ 21 | span[style="--templateColorDimmed:#f8ecd7; --templateColor:#a96600;"] { 22 | --templateColor: #f8ecd7 !important; 23 | --templateColorDimmed: #a96600 !important; 24 | } 25 | 26 | /* Yellow Tags */ 27 | span[style="--templateColorDimmed:#f5efc4; --templateColor:#887500;"] { 28 | --templateColor: #f5efc4 !important; 29 | --templateColorDimmed: #887500 !important; 30 | } 31 | 32 | /* Green Tags */ 33 | span[style="--templateColorDimmed:#ecf0d4; --templateColor:#667f00;"] { 34 | --templateColor: #ecf0d4 !important; 35 | --templateColorDimmed: #667f00 !important; 36 | } 37 | 38 | /* Turquoise Tags */ 39 | span[style="--templateColorDimmed:#d7f4eb; --templateColor:#008b59;"] { 40 | --templateColor: #d7f4eb !important; 41 | --templateColorDimmed: #008b59 !important; 42 | } 43 | 44 | /* Steel Blue Tags */ 45 | span[style="--templateColorDimmed:#e6eef7; --templateColor:#007bda;"] { 46 | --templateColor: #e6eef7 !important; 47 | --templateColorDimmed: #007bda !important; 48 | } 49 | 50 | /* Blue Tags */ 51 | span[style="--templateColorDimmed:#e3eeff; --templateColor:#006bff;"] { 52 | --templateColor: #e3eeff !important; 53 | --templateColorDimmed: #006bff !important; 54 | } 55 | 56 | /* Purple Tags */ 57 | span[style="--templateColorDimmed:#f0ebf8; --templateColor:#8b59e1;"] { 58 | --templateColor: #fbe9f2 !important; 59 | --templateColorDimmed: #8b59e1 !important; 60 | } 61 | 62 | /* Violet Tags */ 63 | span[style="--templateColorDimmed:#f4ebf6; --templateColor:#b048c6;"] { 64 | --templateColor: #f4ebf6 !important; 65 | --templateColorDimmed: #b048c6 !important; 66 | } 67 | 68 | /* Rose Tags */ 69 | span[style="--templateColorDimmed:#fee7f9; --templateColor:#d514b4;"] { 70 | --templateColor: #fee7f9 !important; 71 | --templateColorDimmed: #d514b4 !important; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /tag-colors-darkmode.css: -------------------------------------------------------------------------------- 1 | /* Pink Tags */ 2 | span[style="--templateColorDimmed:#fbe9f2; --templateColor:#ee0085;"] { 3 | --templateColor: #fbe9f2 !important; 4 | --templateColorDimmed: #ee0085 !important; 5 | } 6 | 7 | /* Red Tags */ 8 | span[style="--templateColorDimmed:#f8eaec; --templateColor:#d83853;"] { 9 | --templateColor: #f8eaec !important; 10 | --templateColorDimmed: #d83853 !important; 11 | } 12 | 13 | /* Orange Tags */ 14 | span[style="--templateColorDimmed:#ffebd0; --templateColor:#b85d00;"] { 15 | --templateColor: #ffebd0 !important; 16 | --templateColorDimmed: #b85d00 !important; 17 | } 18 | 19 | /* Brown Tags */ 20 | span[style="--templateColorDimmed:#f8ecd7; --templateColor:#a96600;"] { 21 | --templateColor: #f8ecd7 !important; 22 | --templateColorDimmed: #a96600 !important; 23 | } 24 | 25 | /* Yellow Tags */ 26 | span[style="--templateColorDimmed:#f5efc4; --templateColor:#887500;"] { 27 | --templateColor: #f5efc4 !important; 28 | --templateColorDimmed: #887500 !important; 29 | } 30 | 31 | /* Green Tags */ 32 | span[style="--templateColorDimmed:#ecf0d4; --templateColor:#667f00;"] { 33 | --templateColor: #ecf0d4 !important; 34 | --templateColorDimmed: #667f00 !important; 35 | } 36 | 37 | /* Turquoise Tags */ 38 | span[style="--templateColorDimmed:#d7f4eb; --templateColor:#008b59;"] { 39 | --templateColor: #d7f4eb !important; 40 | --templateColorDimmed: #008b59 !important; 41 | } 42 | 43 | /* Steel Blue Tags */ 44 | span[style="--templateColorDimmed:#e6eef7; --templateColor:#007bda;"] { 45 | --templateColor: #e6eef7 !important; 46 | --templateColorDimmed: #007bda !important; 47 | } 48 | 49 | /* Blue Tags */ 50 | span[style="--templateColorDimmed:#e3eeff; --templateColor:#006bff;"] { 51 | --templateColor: #e3eeff !important; 52 | --templateColorDimmed: #006bff !important; 53 | } 54 | 55 | /* Purple Tags */ 56 | span[style="--templateColorDimmed:#f0ebf8; --templateColor:#8b59e1;"] { 57 | --templateColor: #fbe9f2 !important; 58 | --templateColorDimmed: #8b59e1 !important; 59 | } 60 | 61 | /* Violet Tags */ 62 | span[style="--templateColorDimmed:#f4ebf6; --templateColor:#b048c6;"] { 63 | --templateColor: #f4ebf6 !important; 64 | --templateColorDimmed: #b048c6 !important; 65 | } 66 | 67 | /* Rose Tags */ 68 | span[style="--templateColorDimmed:#fee7f9; --templateColor:#d514b4;"] { 69 | --templateColor: #fee7f9 !important; 70 | --templateColorDimmed: #d514b4 !important; 71 | } 72 | --------------------------------------------------------------------------------