├── LICENSE ├── README.md ├── README_zh.md ├── media ├── pic1.png ├── pic1_zh.png ├── pic2.png ├── pic3.png ├── pic4.png └── pic5.png ├── rainbow.css └── rainbow ├── NotoSansSC-Medium.otf └── SourceCodePro-Regular.ttf /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Gary Zhang 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 | # typora-theme-rainbow 2 | 3 | English | [简体中文](./README_zh.md) 4 | 5 | [Click](https://github.com/thezbm/typora-theme-rainbow) to visit on *Github*. 6 | 7 | ## About Rainbow 8 | 9 | > A **colorful** and **neat** *Typora* theme. 10 | 11 | Inspired by themes: 12 | 13 | + [Liquid](https://github.com/Fentaniao/Liquid) 14 | + [Maize](https://github.com/BEATREE/typora-maize-theme) 15 | + [Pie](https://github.com/kevinzhao2233/typora-theme-pie) 16 | 17 | Issues are very welcome on *GitHub*. 18 | 19 | ## Donate 20 | 21 | ![pic5](./media/pic5.png) 22 | 23 | Every little helps. 24 | 25 | ## Features 26 | 27 | + Well-designed color scheme 28 | + Tidy fonts 29 | + Blockquotes with the :rainbow: emojis 30 | + Image blocks and code blocks with shadow 31 | + Links and tables with mouse hover effect 32 | + Checkboxes with smooth transition effect 33 | 34 | ## How to install 35 | 36 | 1. Download the **Rainbow.zip** from the [Releases](https://github.com/thezbm/typora-theme-rainbow/releases) page and unzip it. 37 | 2. Open Theme Folder in *Typora* from `Preference Panel` → `Appearance` section. 38 | 1. Copy **rainbow.css** and the **rainbow** folder into the newly opened folder. 39 | 2. Restart *Typora*, then select it from `Themes` menu. 40 | 41 | ## Thumbnails 42 | 43 | ![pic1](./media/pic1.png) 44 | 45 | ![pic2](./media/pic2.png) 46 | 47 | ![pic3](./media/pic3.png) 48 | 49 | ![pic4](./media/pic4.png) 50 | -------------------------------------------------------------------------------- /README_zh.md: -------------------------------------------------------------------------------- 1 | # typora-theme-rainbow 2 | 3 | [English](./README.md) | 简体中文 4 | 5 | [点击此处](https://github.com/thezbm/typora-theme-rainbow)在*GitHub*上访问。 6 | 7 | ## 关于Rainbow 8 | 9 | > 一个**色彩丰富**并且**干净整洁**的*Typora*主题。 10 | 11 | 以下主题提供了灵感: 12 | 13 | + [Liquid](https://github.com/Fentaniao/Liquid) 14 | + [Maize](https://github.com/BEATREE/typora-maize-theme) 15 | + [Pie](https://github.com/kevinzhao2233/typora-theme-pie) 16 | 17 | 欢迎在*GitHub*上提Issue。 18 | 19 | ## 捐赠 20 | 21 | ![pic5](./media/pic5.png) 22 | 23 | 一分钱也是对我莫大的支持。 24 | 25 | ## 特性 26 | 27 | + 精心设计的配色方案 28 | + 整洁的字体 29 | + 引用块带有 :rainbow: 符号 30 | + 图片和代码块带有阴影样式 31 | + 链接和图标带有鼠标悬停效果 32 | + 清单列表带有顺滑的动画效果 33 | 34 | ## 如何安装 35 | 36 | 1. Download the **Rainbow.zip** from the [Releases](https://github.com/thezbm/typora-theme-rainbow/releases) page and unzip it. 37 | 2. Open Theme Folder in *Typora* from `Preference Panel` → `Appearance` section. 38 | 3. Copy **rainbow.css** and the **rainbow** folder into the newly opened folder. 39 | 4. Restart *Typora*, then select it from `Themes` menu. 40 | 41 | ## Thumbnails 42 | 43 | ![pic1](./media/pic1_zh.png) 44 | 45 | ![pic2](./media/pic2.png) 46 | 47 | ![pic3](./media/pic3.png) 48 | 49 | ![pic4](./media/pic4.png) 50 | -------------------------------------------------------------------------------- /media/pic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thezbm/typora-theme-rainbow/91a646ac099899b24cf306713d2d124c63de9c9d/media/pic1.png -------------------------------------------------------------------------------- /media/pic1_zh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thezbm/typora-theme-rainbow/91a646ac099899b24cf306713d2d124c63de9c9d/media/pic1_zh.png -------------------------------------------------------------------------------- /media/pic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thezbm/typora-theme-rainbow/91a646ac099899b24cf306713d2d124c63de9c9d/media/pic2.png -------------------------------------------------------------------------------- /media/pic3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thezbm/typora-theme-rainbow/91a646ac099899b24cf306713d2d124c63de9c9d/media/pic3.png -------------------------------------------------------------------------------- /media/pic4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thezbm/typora-theme-rainbow/91a646ac099899b24cf306713d2d124c63de9c9d/media/pic4.png -------------------------------------------------------------------------------- /media/pic5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thezbm/typora-theme-rainbow/91a646ac099899b24cf306713d2d124c63de9c9d/media/pic5.png -------------------------------------------------------------------------------- /rainbow.css: -------------------------------------------------------------------------------- 1 | /* 2 | fonts initalization 3 | */ 4 | @import url(https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap); 5 | @import url(https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@500&display=swap); 6 | @font-face { 7 | font-family: "Source Code Pro Regular"; 8 | src: url(./rainbow/SourceCodePro-Regular.ttf); 9 | } 10 | @font-face { 11 | font-family: "Noto Sans SC Medium"; 12 | src: url(./rainbow/NotoSansSC-Medium.otf); 13 | } 14 | 15 | @page { 16 | size: A4; 17 | margin: 8mm 0mm; 18 | } 19 | 20 | /* 21 | root variables including colors, font-familys and a shadow style 22 | */ 23 | :root { 24 | --h-border-color: rgb(255, 191, 191); 25 | --h-bg-color: rgb(255, 232, 232); 26 | --table-border-color: rgb(255, 235, 211); 27 | --th-bg-color: rgb(255, 243, 228); 28 | --tr-bg-color: rgb(255, 249, 242); 29 | --tr-hover-bg-color: rgb(254, 255, 230); 30 | --code-bg-color: rgb(247, 247, 247); 31 | --del-color: rgb(151, 151, 151); 32 | --selection-bg-color: rgb(235, 227, 255); 33 | --block-shadow: 0.15rem 0.15rem 0.5rem rgb(150, 150, 150); 34 | --sans-serif-font: "Noto Sans SC Medium", "Noto Sans SC", sans-serif; 35 | --monospace-font: "Source Code Pro Regular", "Source Code Pro", monospace; 36 | } 37 | 38 | html { 39 | font-size: 16px; 40 | } 41 | 42 | 43 | #write { 44 | font-family: var(--sans-serif-font); 45 | max-width: 60rem; 46 | padding-left: 2rem; 47 | padding-right: 2rem; 48 | } 49 | 50 | /* 51 | yaml header settings 52 | */ 53 | #write pre.md-meta-block { 54 | font-family: var(--monospace-font); 55 | font-size: 1rem; 56 | text-align: left; 57 | padding: 0.6rem; 58 | color: rgb(134, 134, 134); 59 | background-color: var(--code-bg-color); 60 | border-radius: 0.4rem; 61 | } 62 | 63 | /* 64 | headers settings 65 | */ 66 | #write h1 { 67 | font-size: 2.2rem; 68 | text-align: center; 69 | text-shadow: 0.15rem 0.15rem 0.3rem rgb(187, 187, 187); 70 | } 71 | #write h2 { 72 | font-size: 1.8rem; 73 | margin-top: 1.8rem; 74 | margin-left: -1.5rem; 75 | margin-right: -1.5rem; 76 | background-color: var(--h-bg-color); 77 | padding-left: 1rem; 78 | padding-right: 1rem; 79 | border-left: 0.5rem solid var(--h-border-color); 80 | border-radius: 0.4rem; 81 | } 82 | #write h3 { 83 | font-size: 1.6rem; 84 | text-decoration: underline double var(--h-border-color) 0.15rem; 85 | } 86 | #write h4 { 87 | text-decoration: underline dotted var(--h-border-color) 0.2rem; 88 | } 89 | 90 | /* 91 | tables settings 92 | */ 93 | #write table { 94 | border-collapse: collapse; 95 | border: 0.25rem solid var(--table-border-color); 96 | } 97 | #write table th { 98 | background-color: var(--th-bg-color); 99 | } 100 | #write table th, td { 101 | text-align: center; 102 | border: 0.13rem dashed var(--table-border-color); 103 | padding: 0.5rem; 104 | } 105 | #write table tr:nth-child(even) { 106 | background-color: var(--tr-bg-color); 107 | } 108 | #write table tr:hover { 109 | background-color: var(--tr-hover-bg-color); 110 | } 111 | 112 | /* 113 | checkboxes settings 114 | */ 115 | #write .task-list-item input[type = "checkbox"] { 116 | width: 0; 117 | height: 0; 118 | } 119 | #write .task-list-item input[type = "checkbox"]::before, #write input[type = "checkbox"]:checked::before { 120 | content: ""; 121 | display: inline-block; 122 | vertical-align: middle; 123 | position: relative; 124 | left: -0.15rem; 125 | top: -0.41rem; 126 | width: 0.8rem; 127 | height: 0.8rem; 128 | border: 0.08rem solid var(--del-color); 129 | border-radius: 50%; 130 | transition: all 0.2s; 131 | } 132 | #write .task-list-item input[type = "checkbox"]:checked::before { 133 | padding: 0.12rem; 134 | background-clip: content-box; 135 | background-color: black; 136 | } 137 | #write .task-list-item input[type = "checkbox"]:checked + p { 138 | text-decoration: line-through; 139 | color: var(--del-color); 140 | } 141 | #write input[type='checkbox']:hover::before { 142 | transition: all 0.2s; 143 | background-color: rgb(228, 228, 228); 144 | } 145 | 146 | /* 147 | blockquotes settings 148 | */ 149 | #write blockquote { 150 | color:rgb(102, 102, 102); 151 | border-left: 0.25rem solid rgb(169, 202, 255); 152 | padding: 0.5rem 1rem 0.6rem 1rem; 153 | } 154 | #write blockquote::before { 155 | display: block; 156 | height: 2rem; 157 | width: 1.5rem; 158 | content: "🌈"; 159 | font-size: 1.2rem; 160 | } 161 | 162 | /* 163 | horizontal rules settings 164 | */ 165 | #write hr { 166 | margin-top: 2rem; 167 | margin-bottom: 2rem; 168 | background-color: rgb(226, 226, 226); 169 | height: 0.13rem; 170 | border: 0; 171 | } 172 | 173 | #write p { 174 | font-size: 1rem; 175 | line-height: 1.6rem; 176 | } 177 | 178 | /* 179 | code blocks settings 180 | */ 181 | #write .md-fences { 182 | font-family: var(--monospace-font); 183 | font-size: 1rem; 184 | padding: 0.6rem; 185 | background-color: var(--code-bg-color); 186 | border-radius: 0.4rem; 187 | box-shadow: var(--block-shadow); 188 | } 189 | #write .cm-s-inner .CodeMirror-gutters { 190 | border: none; 191 | } 192 | #write .cm-s-inner .CodeMirror-linenumber { 193 | color: rgb(212, 212, 212); 194 | } 195 | #write .cm-s-inner .cm-keyword { 196 | color: rgb(204, 35, 35); 197 | } 198 | #write .cm-s-inner .cm-number { 199 | color: rgb(27, 57, 226); 200 | } 201 | #write .cm-s-inner .cm-def { 202 | color: rgb(146, 50, 255); 203 | } 204 | #write .cm-s-inner .cm-operator { 205 | color: rgb(204, 35, 35); 206 | } 207 | #write .cm-s-inner .cm-variable2 { 208 | color: rgb(38, 129, 219); 209 | } 210 | #write .cm-s-inner .cm-variable3 { 211 | color: rgb(204, 35, 35); 212 | } 213 | #write .cm-s-inner .cm-comment { 214 | color: rgb(18, 129, 18); 215 | } 216 | #write .cm-s-inner .cm-string { 217 | color: rgb(18, 129, 18); 218 | } 219 | #write .cm-s-inner .cm-builtin { 220 | color: rgb(218, 135, 12); 221 | } 222 | #write .cm-tag { 223 | color: rgb(139, 10, 10); 224 | } 225 | 226 | /* 227 | formulas settings 228 | */ 229 | #write mjx-container { 230 | font-size: 1.1rem; 231 | } 232 | 233 | /* 234 | tooltips settings 235 | */ 236 | #write .code-tooltip { 237 | box-shadow: 0.1rem 0.1rem 0.2rem rgb(150, 150, 150); 238 | border-radius: 0.2rem; 239 | margin-top: 0.3rem; 240 | } 241 | 242 | /* 243 | selected texts in code blocks settings 244 | */ 245 | #write .CodeMirror-selected, #write .CodeMirror-selectedtext, #write .in-text-selection { 246 | background-color: var(--selection-bg-color) !important; 247 | } 248 | 249 | /* 250 | diagrams settings 251 | */ 252 | #write pre[lang=’sequence’], #write pre[lang=’flow’], #write pre[lang=’mermaid’] { 253 | background-color: var(--code-bg-color); 254 | border-radius: 0.4rem; 255 | box-shadow: var(--block-shadow); 256 | } 257 | 258 | /* 259 | inline codes settings 260 | */ 261 | #write code { 262 | font-family: var(--monospace-font); 263 | margin-left: 0.25rem; 264 | margin-right: 0.25rem; 265 | padding: 0.05rem 0.3rem; 266 | background-color: var(--code-bg-color); 267 | border-radius: 0.4rem; 268 | box-shadow: 0.13rem 0.13rem 0.26rem rgb(197, 197, 197); 269 | } 270 | 271 | /* 272 | urls settings 273 | */ 274 | #write a { 275 | color: rgb(31, 117, 255); 276 | } 277 | #write a:hover { 278 | color: rgb(108, 164, 255); 279 | } 280 | 281 | /* 282 | images settings 283 | */ 284 | #write img { 285 | display: block; 286 | margin: 0 auto; 287 | border: 0; 288 | border-radius: 5px; 289 | box-shadow: var(--block-shadow); 290 | } 291 | 292 | /* 293 | highlights settings 294 | */ 295 | #write mark { 296 | background-color: rgb(252, 255, 200); 297 | } 298 | 299 | /* 300 | deletes settings 301 | */ 302 | #write del { 303 | color: var(--del-color); 304 | } 305 | 306 | /* 307 | selected texts settings 308 | */ 309 | #write ::selection { 310 | background-color: var(--selection-bg-color); 311 | } -------------------------------------------------------------------------------- /rainbow/NotoSansSC-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thezbm/typora-theme-rainbow/91a646ac099899b24cf306713d2d124c63de9c9d/rainbow/NotoSansSC-Medium.otf -------------------------------------------------------------------------------- /rainbow/SourceCodePro-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thezbm/typora-theme-rainbow/91a646ac099899b24cf306713d2d124c63de9c9d/rainbow/SourceCodePro-Regular.ttf --------------------------------------------------------------------------------