├── LICENSE ├── Native Themes ├── Aquamarine │ ├── aquamarine.css │ └── preview.jpg ├── Battery-Saver-Dark-Mode │ ├── Battery-Saver-Dark-Mode.css │ └── preview.jpg ├── Brilliance │ ├── brilliance.css │ └── preview.png ├── Chapter-List-View │ ├── Chapter-List-View.css │ └── preview.png ├── CutePink │ ├── cutepink.css │ └── preview.png ├── Dark-Pre-Overhaul │ ├── dark-pre-overhaul.css │ ├── preview1.png │ └── preview2.png ├── DarkNight │ ├── darknight.css │ ├── preview1.png │ └── preview2.png ├── DarkPink │ ├── darkpink.css │ └── preview.jpg ├── Dracula │ ├── dracula.css │ └── preview.jpg ├── E-Ink │ ├── e-ink.css │ └── preview.jpg ├── Light │ ├── light.css │ └── preview.png ├── No-Colorscape │ ├── no-colorscape.css │ ├── preview-1.png │ └── preview-2.png ├── Nord │ ├── nord.css │ └── preview.png ├── Overseerr │ ├── overseerr.css │ └── preview.jpg └── Solarized │ ├── preview.jpg │ └── solarized.css ├── README.md └── Style Injected Themes └── Plex-like ├── preview.png └── style.scss /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /Native Themes/Aquamarine/aquamarine.css: -------------------------------------------------------------------------------- 1 | :root .bg-aquamarine { 2 | 3 | /* Main Colors variables*/ 4 | --color-scheme: dark; 5 | --primary-color: #e47d0d; 6 | --primary-color-dark-shade: #CD700B; 7 | --primary-color-darker-shade: #CD700B; 8 | --primary-color-darkest-shade: #9F5709; 9 | --nav-tab-border: rgba(228, 125, 13, .7); 10 | --error-color: #f05050; 11 | --bs-body-bg: #275d74; 12 | --body-text-color: #F8F8F2; 13 | --btn-icon-filter: invert(1) grayscale(100%) brightness(200%); 14 | 15 | 16 | /* Scrollbar */ 17 | --primary-color-scrollbar: rgba(182, 182, 187, 0.5);; 18 | 19 | /* Navbar */ 20 | --navbar-bg-color: rgba(7, 30, 56,.4); 21 | --navbar-text-color: #bac5cc; 22 | --navbar-fa-icon-color: #bac5cc; 23 | --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1); 24 | 25 | /* Side Nav */ 26 | --side-nav-bg-color: rgba(19, 47, 62,.4); 27 | --side-nav-mobile-bg-color: rgba(19, 47, 62, .4); 28 | --side-nav-openclose-transition: .15s ease-in-out; 29 | --side-nav-box-shadow: rgba(0,0,0,.5); 30 | --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%); 31 | --side-nav-hover-text-color: #F8F8F2; 32 | --side-nav-hover-bg-color: rgba(182, 182, 187, 0.5); 33 | --side-nav-color: #F8F8F2; 34 | --side-nav-border-radius: 5px; 35 | --side-nav-border: none; 36 | --side-nav-border-closed: none; 37 | --side-nav-border-transition: .5s ease-in-out; 38 | --side-nav-companion-bar-transistion: .15s linear; 39 | --side-nav-bg-color-transition: .5s ease-in-out; 40 | --side-nav-closed-bg-color: transparent; 41 | --side-nav-item-active-color: #e47d0d; 42 | --side-nav-item-active-text-color: #F8F8F2; 43 | --side-nav-active-bg-color: rgba(182, 182, 187, 0.5); 44 | --side-nav-overlay-color: #6272a4; 45 | 46 | /* Inputs */ 47 | --input-bg-color: rgba(40, 42, 54, .5); 48 | --input-bg-readonly-color: rgba(182, 182, 187, 0.8); 49 | --input-focused-border-color: #ccc; 50 | --input-text-color: #fff; 51 | --input-placeholder-color: #aeaeae; 52 | --input-border-color: #ccc; 53 | --input-focus-boxshadow-color: rgb(255 255 255 / 50%); 54 | --input-range-color: var(--primary-color); 55 | --input-range-active-color: var(--primary-color-darker-shade); 56 | 57 | /* Buttons */ 58 | --btn-focus-boxshadow-color: rgb(255 255 255 / 50%); 59 | --btn-primary-text-color: #F8F8F2; 60 | --btn-primary-bg-color: var(--primary-color); 61 | --btn-primary-border-color: var(--primary-color); 62 | --btn-primary-hover-text-color: #F8F8F2; 63 | --btn-primary-hover-bg-color: #CD700B; 64 | --btn-primary-hover-border-color: rgb(255 255 255 / 50%); 65 | --btn-alt-bg-color: #424c72; 66 | --btn-alt-border-color: #444f75; 67 | --btn-alt-hover-bg-color: #3b4466; 68 | --btn-alt-focus-bg-color: #343c59; 69 | --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%); 70 | --btn-fa-icon-color: #F8F8F2; 71 | --btn-disabled-bg-color: #282a36; 72 | --btn-disabled-text-color: #F8F8F2; 73 | --btn-disabled-border-color: #6c757d; 74 | 75 | /* Nav */ 76 | --nav-tab-border-color: var(--nav-tab-border); 77 | --nav-tab-text-color: var(--body-text-color); 78 | --nav-tab-bg-color: var(--primary-color); 79 | --nav-tab-hover-border-color: var(--primary-color); 80 | --nav-tab-active-text-color: #F8F8F2; 81 | --nav-tab-border-hover-color: transparent; 82 | --nav-tab-hover-text-color: var(--body-text-color); 83 | --nav-tab-hover-bg-color: transparent; 84 | --nav-tab-border-top: var(--nav-tab-border); 85 | --nav-tab-border-left: var(--nav-tab-border); 86 | --nav-tab-border-bottom: var(--nav-tab-border); 87 | --nav-tab-border-right: var(--nav-tab-border); 88 | --nav-tab-hover-border-top: var(--nav-tab-border); 89 | --nav-tab-hover-border-left: var(--nav-tab-border); 90 | --nav-tab-hover-border-bottom: var(--bs-body-bg); 91 | --nav-tab-hover-border-right: var(--nav-tab-border); 92 | --nav-tab-active-hover-bg-color: var(--primary-color); 93 | 94 | --nav-link-bg-color: var(--primary-color); 95 | --nav-link-active-text-color: #F8F8F2; 96 | --nav-link-text-color: #F8F8F2; 97 | 98 | --nav-header-text-color: #F8F8F2; 99 | --nav-header-bg-color: RGB(68, 71, 90); 100 | 101 | /* Toasts */ 102 | --toast-success-bg-color: rgba(39, 194, 76, .9); 103 | --toast-error-bg-color: #f05050; 104 | --toast-info-bg-color: #8BE9FD; 105 | --toast-warning-bg-color: #FFB86C; 106 | 107 | /* Checkboxes */ 108 | --checkbox-checked-bg-color: var(--primary-color); 109 | --checkbox-border-color: var(--input-focused-border-color); 110 | --checkbox-focus-border-color: var(--primary-color); 111 | --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%); 112 | 113 | /* Tagbadge */ 114 | --tagbadge-border-color: rgba(239, 239, 239, .125); 115 | --tagbadge-text-color: var(--body-text-color); 116 | --tagbadge-bg-color: var(--nav-tab-hover-bg-color); 117 | --tagbadge-filled-border-color: rgba(239, 239, 239, .125); 118 | --tagbadge-filled-text-color: var(--body-text-color); 119 | --tagbadge-filled-bg-color: var(--primary-color); 120 | 121 | /* List items */ 122 | --list-group-item-text-color: var(--body-text-color); 123 | --list-group-item-bg-color: #282a36; 124 | --list-group-item-border-color: rgba(239, 239, 239, .125); 125 | --list-group-hover-text-color: #F8F8F2; 126 | --list-group-hover-bg-color: rgb(22, 27, 34); 127 | --list-group-active-border-color: none; 128 | 129 | /* Popover */ 130 | --popover-body-bg-color: var(--navbar-bg-color); 131 | --popover-body-text-color: var(--navbar-text-color); 132 | --popover-outerarrow-color: transparent; 133 | --popover-arrow-color: transparent; 134 | --popover-bg-color: black; 135 | --popover-border-color: black; 136 | 137 | /* Pagination */ 138 | --pagination-active-link-border-color: var(--primary-color); 139 | --pagination-active-link-bg-color: var(--primary-color); 140 | --pagination-active-link-text-color: #F8F8F2; 141 | --pagination-link-border-color: rgba(68, 71, 90, .125); 142 | --pagination-link-text-color: #F8F8F2; 143 | --pagination-link-bg-color: rgba(1, 4, 9, .5); 144 | --pagination-focus-border-color: var(--primary-color); 145 | --pagination-link-hover-color: var(--primary-color); 146 | 147 | /* Progress */ 148 | --progress-striped-animated-color: linear-gradient(45deg, rgba(74,198,148, .75) 25%, rgba(51, 138, 103, .75) 25%, rgba(51, 138, 103, .75) 50%, rgba(74,198,148, .75) 50%, rgba(74,198,148, .75) 75%, rgba(51, 138, 103, .75) 75%, rgba(51, 138, 103, .75)); 149 | --progress-bg-color: var(--nav-header-bg-color); 150 | --progress-bar-color: var(--primary-color-dark-shade); 151 | 152 | /* Dropdown */ 153 | --dropdown-item-hover-text-color: #F8F8F2; 154 | --dropdown-item-hover-bg-color: var(--primary-color-dark-shade); 155 | --dropdown-item-text-color: var(--navbar-text-color); 156 | --dropdown-item-bg-color: var(--navbar-bg-color); 157 | --dropdown-overlay-color: rgba(0,0,0,.5); 158 | 159 | /* Accordion */ 160 | --accordion-header-text-color: #F8F8F2; 161 | --accordion-header-bg-color: rgba(182, 182, 187, 0.8); 162 | --accordion-body-bg-color: rgba(182, 182, 187, 0.5); 163 | --accordion-body-border-color: rgba(182, 182, 187, 0.5); 164 | --accordion-body-text-color: var(--body-text-color); 165 | --accordion-header-collapsed-text-color: #F8F8F2; 166 | --accordion-header-collapsed-bg-color: rgba(17, 46, 62, .6); 167 | --accordion-button-focus-border-color: unset; 168 | --accordion-button-focus-box-shadow: unset; 169 | --accordion-active-body-bg-color: #44475a; 170 | 171 | /* Breadcrumb */ 172 | --breadcrumb-bg-color: #292d32; 173 | --breadcrumb-item-text-color: var(--body-text-color); 174 | 175 | /* Rating star */ 176 | --ratingstar-color: #bd93f9; 177 | --ratingstar-star-empty: #b0c4de; 178 | --ratingstar-star-filled: var(--primary-color); 179 | 180 | /* Global */ 181 | --hr-color: rgba(239, 239, 239, .125); 182 | --accent-bg-color: rgba(1, 4, 9, .5); 183 | --accent-text-color: lightgrey; 184 | --grid-breakpoints-xs: $grid-breakpoint-xs; 185 | --grid-breakpoints-sm: $grid-breakpoint-sm; 186 | --grid-breakpoints-md: $grid-breakpoint-md; 187 | --grid-breakpoints-lg: $grid-breakpoint-lg; 188 | --grid-breakpoints-xl: $grid-breakpoint-xl; 189 | --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif; 190 | --brand-font-family: "Spartan", sans-serif; 191 | 192 | /* Card */ 193 | --card-bg-color: rgba(40,42,54,.5); 194 | --card-text-color: var(--body-text-color); 195 | --card-border-width: 2px 2px 2px 2px; 196 | --card-border-style: solid; 197 | --card-border-color: rgba(142, 145, 149, 0.1);/ 198 | --card-progress-bar-color: var(--primary-color); 199 | --card-overlay-bg-color: rgba(0, 0, 0, 0); 200 | --card-overlay-hover-bg-color: rgba(0, 0, 0, .2); 201 | 202 | /* Slider */ 203 | --slider-text-color: #F8F8F2; 204 | 205 | 206 | /* Manga Reader */ 207 | --manga-reader-overlay-filter: blur(10px); 208 | --manga-reader-overlay-bg-color: rgba(0,0,0,.5); 209 | --manga-reader-overlay-text-color: #F8F8F2; 210 | --manga-reader-bg-color: black; 211 | --manga-reader-next-highlight-bg-color: rgba(80,250,123, .5); 212 | --manga-reader-prev-highlight-bg-color: rgba(98,114,164, .5); 213 | 214 | /* Radios */ 215 | --radio-accent-color: var(--primary-color); 216 | --radio-hover-accent-color: var(--primary-color); 217 | --radio-focus-boxshadow-color: rgb(255 255 255 / 50%); 218 | 219 | /* Carousel */ 220 | --carousel-header-text-color: var(--body-text-color); 221 | --carousel-header-text-decoration: none; 222 | --carousel-hover-header-text-decoration: none; 223 | 224 | /** Drawer */ 225 | --drawer-background-color: black; 226 | --drawer-bg-color: #44475a; 227 | --drawer-text-color: #F8F8F2; 228 | 229 | /** Event Widget */ 230 | --event-widget-bg-color: rgb(1, 4, 9); 231 | --event-widget-item-bg-color: rgb(1, 4, 9); 232 | --event-widget-text-color: var(--body-text-color); 233 | --event-widget-item-border-color: rgba(53, 53, 53, .5); 234 | --event-widget-border-color: rgba(1, 4, 9, .5); 235 | 236 | /* Search */ 237 | --search-result-text-lite-color: initial; 238 | 239 | /* Bulk Selection */ 240 | --bulk-selection-text-color: var(--navbar-text-color); 241 | --bulk-selection-highlight-text-color: var(--primary-color); 242 | 243 | /* Card list */ 244 | --card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 1%, rgba(0,0,0,0) 100%); 245 | } 246 | 247 | /* Otherwise Progressbar stays green, bug is reported. */ 248 | .progress-bar { 249 | background-color: #e47d0d !important; 250 | } 251 | -------------------------------------------------------------------------------- /Native Themes/Aquamarine/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/Aquamarine/preview.jpg -------------------------------------------------------------------------------- /Native Themes/Battery-Saver-Dark-Mode/Battery-Saver-Dark-Mode.css: -------------------------------------------------------------------------------- 1 | /* Default styles for Kavita */ 2 | :root .bg-Battery-Saver-Dark-Mode { 3 | --color-scheme: dark; 4 | /* Base colors */ 5 | --primary-color: #4ac69496; 6 | --primary-color-dark-shade: #3b9e7683; 7 | --primary-color-darker-shade: #338a6781; 8 | --primary-color-darkest-shade: #25624a85; 9 | --error-color: #BD362F; 10 | --bs-body-bg: #1a1a1f; 11 | --body-text-color: #969696; 12 | --btn-icon-filter: invert(1) grayscale(100%) brightness(200%); 13 | --primary-color-scrollbar: rgba(74, 198, 148, 0.493); 14 | --text-muted-color: #686868; 15 | --white-replacement: #a7a7a7; 16 | 17 | /* New Color scheme */ 18 | --secondary-color: #101113; 19 | 20 | /* Meta and Globals */ 21 | --theme-color: black; 22 | --color-scheme: dark; 23 | --tile-color: var(--primary-color); 24 | 25 | 26 | /* Navbar */ 27 | --navbar-bg-color: black; 28 | --navbar-text-color: var(--white-replacement); 29 | --navbar-fa-icon-color: var(--white-replacement); 30 | --navbar-btn-hover-outline-color: var(--primary-color); 31 | 32 | /* Inputs */ 33 | --input-bg-color: var(--bs-body-bg); 34 | --input-bg-readonly-color: #434648; 35 | --input-focused-border-color: #ccc; 36 | --input-text-color: var(--white-replacement); 37 | --input-placeholder-color: #aeaeae; 38 | --input-border-color: #ccc; 39 | --input-focus-boxshadow-color: rgb(255 255 255 / 50%); 40 | 41 | /* Buttons */ 42 | --btn-focus-boxshadow-color: rgb(255 255 255 / 50%); 43 | --btn-primary-text-color: var(--white-replacement); 44 | --btn-primary-bg-color: var(--primary-color); 45 | --btn-primary-border-color: var(--primary-color); 46 | --btn-primary-hover-text-color: var(--white-replacement); 47 | --btn-primary-hover-bg-color: var(--primary-color-darker-shade); 48 | --btn-primary-hover-border-color: var(--primary-color-darker-shade); 49 | --btn-alt-bg-color: #424c72; 50 | --btn-alt-border-color: #444f75; 51 | --btn-alt-hover-bg-color: #3b4466; 52 | --btn-alt-focus-bg-color: #343c59; 53 | --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%); 54 | --btn-fa-icon-color: var(--white-replacement); 55 | --btn-disabled-bg-color: #2c3136; 56 | --btn-disabled-text-color: var(--white-replacement); 57 | --btn-disabled-border-color: #6c757d; 58 | --bs-btn-disabled-border-color: transparent; 59 | 60 | /* Nav (Tabs) */ 61 | --nav-tab-border-color: rgba(44, 118, 88, 0.7); 62 | --nav-tab-text-color: var(--body-text-color); 63 | --nav-tab-bg-color: var(--primary-color); 64 | --nav-tab-hover-border-color: var(--primary-color); 65 | --nav-tab-active-text-color: var(--white-replacement); 66 | --nav-tab-border-hover-color: transparent; 67 | --nav-tab-hover-text-color: var(--body-text-color); 68 | --nav-tab-hover-bg-color: transparent; 69 | --nav-tab-border-top: rgba(44, 118, 88, 0.7); 70 | --nav-tab-border-left: rgba(44, 118, 88, 0.7); 71 | --nav-tab-border-bottom: rgba(44, 118, 88, 0.7); 72 | --nav-tab-border-right: rgba(44, 118, 88, 0.7); 73 | --nav-tab-hover-border-top: rgba(44, 118, 88, 0.7); 74 | --nav-tab-hover-border-left: rgba(44, 118, 88, 0.7); 75 | --nav-tab-hover-border-bottom: var(--bs-body-bg); 76 | --nav-tab-hover-border-right: rgba(44, 118, 88, 0.7); 77 | --nav-tab-active-hover-bg-color: var(--primary-color); 78 | --nav-link-bg-color: var(--primary-color); 79 | --nav-link-active-text-color: var(--white-replacement); 80 | --nav-link-text-color: var(--white-replacement); 81 | 82 | /* Header */ 83 | --nav-header-text-color: var(--white-replacement); 84 | --nav-header-bg-color: rgb(22, 27, 34); 85 | 86 | /* Toasts */ 87 | --toast-success-bg-color: var(--primary-color); 88 | --toast-error-bg-color: var(--error-color); 89 | --toast-info-bg-color: var(--primary-color); 90 | --toast-warning-bg-color: #F89406; 91 | 92 | /* Checkboxes/Switch */ 93 | --checkbox-checked-bg-color: var(--primary-color); 94 | --checkbox-border-color: var(--input-focused-border-color); 95 | --checkbox-focus-border-color: var(--primary-color); 96 | --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%); 97 | 98 | /* Tag Badge */ 99 | --tagbadge-border-color: rgba(239, 239, 239, 0.125); 100 | --tagbadge-text-color: var(--white-replacement); 101 | --tagbadge-bg-color: var(--nav-tab-hover-bg-color); 102 | --tagbadge-filled-border-color: rgba(239, 239, 239, 0.25); 103 | --tagbadge-filled-text-color: var(--white-replacement); 104 | --tagbadge-filled-bg-color: var(--primary-color); 105 | 106 | /* Side Nav */ 107 | --side-nav-bg-color: rgb(12, 12, 12); 108 | --side-nav-mobile-bg-color: rgb(12,12,12); 109 | --side-nav-openclose-transition: 0.15s ease-in-out; 110 | --side-nav-box-shadow: rgba(0,0,0,0.5); 111 | --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%); 112 | --side-nav-hover-text-color: var(--white-replacement); 113 | --side-nav-hover-bg-color: rgb(43, 43, 43); 114 | --side-nav-text-color: var(--white-replacement); 115 | --side-nav-border-radius: 15px; 116 | --side-nav-border: black; 117 | --side-nav-border-closed: black; 118 | --side-nav-border-transition: 0.5s ease-in-out; 119 | --side-nav-companion-bar-transistion: 0.15s linear; 120 | --side-nav-bg-color-transition: 0.5s ease-in-out; 121 | --side-nav-closed-bg-color: rgb(12, 12, 12); 122 | --side-nav-item-active-color: var(--primary-color); 123 | --side-nav-item-active-text-color: var(--primary-color); 124 | --side-nav-active-bg-color: rgba(0,0,0,0.5); 125 | --side-nav-overlay-color: rgba(0,0,0,0.5); 126 | 127 | 128 | /* List items */ 129 | --list-group-item-text-color: var(--body-text-color); 130 | --list-group-item-bg-color: #343a40; 131 | --list-group-item-border-color: rgba(239, 239, 239, 0.125); 132 | --list-group-hover-text-color: var(--white-replacement); 133 | --list-group-hover-bg-color: rgb(22, 27, 34); 134 | --list-group-active-border-color: var(--primary-color); 135 | 136 | /* Popover */ 137 | --popover-body-bg-color: var(--navbar-bg-color); 138 | --popover-body-text-color: var(--white-replacement); 139 | --popover-outerarrow-color: transparent; 140 | --popover-arrow-color: transparent; 141 | --popover-bg-color: black; 142 | --popover-border-color: black; 143 | 144 | /* Pagination */ 145 | --pagination-active-link-border-color: var(--primary-color); 146 | --pagination-active-link-bg-color: var(--primary-color); 147 | --pagination-active-link-text-color: var(--white-replacement); 148 | --pagination-link-border-color: rgba(239, 239, 239, 0.125); 149 | --pagination-link-text-color: var(--white-replacement); 150 | --pagination-link-bg-color: rgba(1, 4, 9, 0.5); 151 | --pagination-focus-border-color: var(--primary-color); 152 | --pagination-link-hover-color: var(--primary-color); 153 | 154 | /* Progress Bar */ 155 | --progress-striped-animated-color: linear-gradient(45deg, rgba(74,198,148, 0.75) 25%, rgba(51, 138, 103, 0.75) 25%, rgba(51, 138, 103, 0.75) 50%, rgba(74,198,148, 0.75) 50%, rgba(74,198,148, 0.75) 75%, rgba(51, 138, 103, 0.75) 75%, rgba(51, 138, 103, 0.75)); 156 | --progress-bg-color: var(--nav-header-bg-color); 157 | --progress-bar-color: var(--primary-color-dark-shade); 158 | 159 | /* Dropdown */ 160 | --dropdown-item-hover-text-color: var(--white-replacement); 161 | --dropdown-item-hover-bg-color: var(--primary-color-dark-shade); 162 | --dropdown-item-text-color: var(--navbar-text-color); 163 | --dropdown-item-bg-color: var(--navbar-bg-color); 164 | --dropdown-overlay-color: rgba(0,0,0,0.5); 165 | 166 | /* Accordion */ 167 | --accordion-header-text-color: var(--primary-color); 168 | --accordion-header-bg-color: rgba(52, 60, 70, 0.5); 169 | --accordion-body-bg-color: #var(--navbar-bg-color); 170 | --accordion-body-border-color: rgba(239, 239, 239, 0.125); 171 | --accordion-body-text-color: var(--body-text-color); 172 | --accordion-header-collapsed-text-color: var(--primary-color); 173 | --accordion-header-collapsed-bg-color: #292929; 174 | --accordion-button-focus-border-color: unset; 175 | --accordion-button-focus-box-shadow: unset; 176 | --accordion-active-body-bg-color: #292929; 177 | --accordion-body-box-shadow: none; 178 | 179 | /* Breadcrumb */ 180 | --breadcrumb-bg-color: #292d32; 181 | --breadcrumb-item-text-color: var(--body-text-color); 182 | 183 | /* Rating star */ 184 | --ratingstar-color: var(--white-replacement); 185 | --rating-star-color: var(--primary-color); 186 | --ratingstar-star-empty: #b0c4de; 187 | --ratingstar-star-filled: var(--primary-color); 188 | 189 | /* Global */ 190 | --hr-color: rgba(239, 239, 239, 0.125); 191 | --accent-bg-color: rgba(1, 4, 9, 0.5); 192 | --accent-text-color: var(--white-replacement); 193 | --grid-breakpoints-xs: $grid-breakpoints-xs; 194 | --grid-breakpoints-sm: $grid-breakpoints-sm; 195 | --grid-breakpoints-md: $grid-breakpoints-md; 196 | --grid-breakpoints-lg: $grid-breakpoints-lg; 197 | --grid-breakpoints-xl: $grid-breakpoints-xl; 198 | --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif; 199 | --brand-font-family: "Spartan", sans-serif; 200 | 201 | /* Card */ 202 | --card-bg-color: rgba(14, 16, 20, 0.5); 203 | --card-text-color: var(--body-text-color); 204 | --card-border-width: 0 3px 6px 3px; 205 | --card-border-style: solid; 206 | --card-border-color: black; 207 | --card-progress-bar-color: var(--primary-color); 208 | --card-overlay-bg-color: rgba(0, 0, 0, 0.15); 209 | --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.4); 210 | --card-progress-triangle-size: 36px; 211 | 212 | /* Slider */ 213 | --slider-text-color: var(--white-replacement); 214 | --input-range-color: var(--primary-color); 215 | --input-range-active-color: var(--primary-color-darker-shade); 216 | 217 | /* Manga Reader */ 218 | --manga-reader-overlay-filter: blur(10px); 219 | --manga-reader-overlay-bg-color: rgba(0,0,0,0.5); 220 | --manga-reader-overlay-text-color: var(--white-replacement); 221 | --manga-reader-next-highlight-bg-color: var(--primary-color); 222 | --manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, 0.5); 223 | 224 | /* Radios */ 225 | --radio-accent-color: var(--primary-color); 226 | --radio-hover-accent-color: var(--primary-color-darker-shade); 227 | --radio-focus-boxshadow-color: rgb(255 255 255 / 25%); 228 | 229 | /* Carousel */ 230 | --carousel-header-text-color: var(--white-replacement); 231 | --carousel-header-text-decoration: none; 232 | --carousel-hover-header-text-decoration: var(--primary-color); 233 | --carousel-btn-color: var(--body-text-color); 234 | 235 | /** Drawer */ 236 | --drawer-bg-color: #242424; 237 | --drawer-text-color: var(--white-replacement); 238 | 239 | /** Event Widget */ 240 | --event-widget-bg-color: rgb(1, 4, 9); 241 | --event-widget-item-bg-color: rgb(1, 4, 9); 242 | --event-widget-text-color: var(--body-text-color); 243 | --event-widget-item-border-color: rgba(53, 53, 53, 0.5); 244 | --event-widget-border-color: rgba(1, 4, 9, 0.5); 245 | --event-widget-info-bg-color: #b6d4fe; 246 | --event-widget-error-bg-color: var(--error-color); 247 | --event-widget-update-bg-color: var(--primary-color); 248 | --event-widget-activity-bg-color: var(--primary-color); 249 | 250 | 251 | /* Search */ 252 | --search-result-text-lite-color: initial; 253 | 254 | /* Bulk Selection */ 255 | --bulk-selection-text-color: var(--navbar-text-color); 256 | --bulk-selection-highlight-text-color: var(--primary-color); 257 | 258 | /* List Card Item */ 259 | --card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.15) 1%, rgba(0,0,0,0) 100%); 260 | 261 | /* Review Card */ 262 | --review-card-star-color: gold; 263 | --review-spoiler-bg-color: var(--primary-color); 264 | --review-spoiler-text-color: var(--body-text-color); 265 | 266 | /** Badge **/ 267 | --badge-text-color: var(--bs-badge-color); 268 | } -------------------------------------------------------------------------------- /Native Themes/Battery-Saver-Dark-Mode/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/Battery-Saver-Dark-Mode/preview.jpg -------------------------------------------------------------------------------- /Native Themes/Brilliance/brilliance.css: -------------------------------------------------------------------------------- 1 | /* Brilliance is a modern greyscale theme primarly for e-readers. Made by ElryWeeb */ 2 | :root .bg-brilliance { 3 | --color-scheme: light; 4 | --theme-color: white; 5 | --tile-color: white; 6 | --bs-body-bg: white; 7 | --body-text-color: black; 8 | --btn-icon-filter: none; 9 | --primary-color: #303030; 10 | --primary-color-dark-shade: #222222; 11 | --secondary-color: #585858; 12 | 13 | /** Inputs **/ 14 | --input-bg-color: #fff; 15 | --input-bg-readonly-color: lightgrey; 16 | --input-text-color: black; 17 | 18 | /** Dropdown/Action Menu **/ 19 | --dropdown-item-bg-color: white; 20 | --dropdown-item-text-color: black; 21 | 22 | /** Tabs **/ 23 | --nav-tab-text-color: black; 24 | --nav-link-text-color: black; 25 | --nav-tab-hover-border-bottom: white; 26 | 27 | /** Tag Badge **/ 28 | --tagbadge-border-color: lightgrey; 29 | 30 | /** Badge **/ 31 | --badge-text-color: black; 32 | 33 | /** Side Nav **/ 34 | --side-nav-bg-color: white; 35 | --side-nav-mobile-bg-color: white; 36 | --side-nav-hover-text-color: var(--primary-color); 37 | --side-nav-hover-bg-color: lightgrey; 38 | --side-nav-color: black; 39 | --side-nav-text-color: black; 40 | --side-nav-active-bg-color: white; 41 | --side-nav-item-active-text-color: var(--primary-color); 42 | 43 | /** List items **/ 44 | --list-group-item-bg-color: lightgrey; 45 | --list-group-item-text-color: white; 46 | --list-group-hover-bg-color: white; 47 | --list-group-hover-text-color: var(--primary-color); 48 | --list-group-active-border-color: var(--primary-color); 49 | --list-group-item-text-color: black; 50 | 51 | /** Popover **/ 52 | --popover-body-bg-color: lightgrey; 53 | --popover-body-text-color: black; 54 | 55 | /** Accordion **/ 56 | --accordion-header-bg-color: white; 57 | --accordion-body-bg-color: white; 58 | --accordion-body-text-color: black; 59 | --accordion-header-collapsed-text-color: black; 60 | --accordion-header-collapsed-bg-color: lightgrey; 61 | --accordion-button-focus-border-color: black; 62 | --accordion-active-body-bg-color: white; 63 | 64 | /** Breadcrumb **/ 65 | --breadcrumb-bg-color: lightgrey; 66 | --breadcrumb-item-text-color: black; 67 | 68 | /** Global **/ 69 | --hr-color: black; 70 | --accent-bg-color: lightgrey; 71 | --accent-text-color: black; 72 | --text-muted-color: grey; 73 | 74 | /** Card **/ 75 | --card-bg-color: white; 76 | --card-text-color: black; 77 | 78 | /** Carousel **/ 79 | --carousel-btn-color: black; 80 | 81 | /** Drawer **/ 82 | --drawer-bg-color: white; 83 | --drawer-text-color: black; 84 | 85 | /** Event Widget **/ 86 | --event-widget-bg-color: white; 87 | --event-widget-item-bg-color: white; 88 | --event-widget-text-color: black; 89 | --event-widget-item-border-color: black; 90 | --event-widget-border-color: black; 91 | 92 | /** Review Card **/ 93 | --review-spoiler-bg-color: white; 94 | --review-spoiler-text-color: black; 95 | 96 | /** Scrollbar **/ 97 | --primary-color-scrollbar: var(--primary-color); 98 | 99 | /** Border **/ 100 | --nav-tab-color: rgba(112, 112, 112, 0.7); 101 | 102 | --nav-tab-border-color: var(--nav-tab-color); 103 | --nav-tab-border-top: var(--nav-tab-color); 104 | --nav-tab-border-left: var(--nav-tab-color); 105 | --nav-tab-border-bottom: var(--nav-tab-color); 106 | --nav-tab-border-right: var(--nav-tab-color); 107 | --nav-tab-hover-border-right: var(--nav-tab-color); 108 | --nav-tab-hover-border-top: var(--nav-tab-color); 109 | --nav-tab-hover-border-right: var(--nav-tab-color); 110 | 111 | /** Toast **/ 112 | --toast-success-bg-color: var(--primary-color); 113 | --toast-error-bg-color: var(--secondary-color); 114 | --toast-info-bg-color: var(--primary-color); 115 | --toast-warning-bg-color: var(--primary-color-dark-shade); 116 | 117 | /** Progress **/ 118 | --progress-striped-animated-color: linear-gradient(45deg, rgba(199, 199, 199, 0.75) 25%, 119 | rgba(129, 129, 129, 0.75) 25%, 120 | rgba(139, 139, 139, 0.75) 50%, 121 | rgba(196, 196, 196, 0.75) 50%, 122 | rgba(191, 192, 192, 0.75) 75%, 123 | rgba(134, 134, 134, 0.75) 75%, 124 | rgba(136, 136, 136, 0.75)); 125 | 126 | /** Header **/ 127 | --accordion-header-text-color: var(--secondary-color); 128 | --accordion-header-collapsed-text-color: var(--secondary-color); 129 | 130 | /** Manga Reader **/ 131 | --manga-reader-next-highlight-bg-color: var(--primary-color); 132 | --manga-reader-prev-highlight-bg-color: var(--primary-color); 133 | 134 | /** Other **/ 135 | --event-widget-info-bg-color: var(--secondary-color); 136 | --review-card-star-color: var(--primary-color); 137 | 138 | } 139 | 140 | /** Greyscale Stuff **/ 141 | .reading-area { 142 | filter: grayscale(1); 143 | } 144 | 145 | .logo { 146 | filter: grayscale(1); 147 | } 148 | 149 | .image-container { 150 | filter: grayscale(1); 151 | } 152 | 153 | .card-item-container { 154 | filter: grayscale(1); 155 | } 156 | 157 | .badge { 158 | filter: grayscale(1); 159 | } 160 | 161 | /** UI Improvement **/ 162 | .mb-2 { 163 | min-width: 75px; 164 | } 165 | 166 | /** Buttons **/ 167 | .btn-outline-primary { 168 | --bs-btn-color: var(--secondary-color) !important; 169 | --bs-btn-border-color: var(--secondary-color) !important; 170 | --bs-btn-hover-bg: var(--secondary-color) !important; 171 | --bs-btn-hover-border-color: var(--secondary-color) !important; 172 | --bs-btn-active-bg: var(--secondary-color) !important; 173 | --bs-btn-active-border-color: var(--secondary-color) !important; 174 | --bs-btn-disabled-color: var(--secondary-color) !important; 175 | --bs-btn-disabled-border-color: var(--secondary-color) !important; 176 | } 177 | 178 | .btn-danger { 179 | --bs-btn-bg: var(--primary-color) !important; 180 | --bs-btn-border-color: var(--primary-color) !important; 181 | --bs-btn-hover-bg: var(--secondary-color) !important; 182 | --bs-btn-hover-border-color: var(--secondary-color) !important; 183 | } -------------------------------------------------------------------------------- /Native Themes/Brilliance/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/Brilliance/preview.png -------------------------------------------------------------------------------- /Native Themes/Chapter-List-View/Chapter-List-View.css: -------------------------------------------------------------------------------- 1 | app-chapter-card > .card-item-container > .card-title-container{ 2 | margin-top: -2px !important; 3 | } 4 | 5 | app-chapter-card > .card-item-container > .card-title-container > .card-title{ 6 | font-size: large !important; 7 | max-width: 200px !important; 8 | } 9 | 10 | app-chapter-card > .card-item-container{ 11 | margin: 20px !important; 12 | height: 50px !important; 13 | } 14 | 15 | app-chapter-card > .card-item-container > .overlay > .card-overlay{ 16 | height: 50px !important; 17 | } 18 | 19 | app-chapter-card > .card-item-container > .overlay > .progress-banner{ 20 | width: 100% !important; 21 | } 22 | 23 | app-chapter-card > .card-item-container > .overlay > .badge-container{ 24 | width: 100% !important; 25 | } 26 | 27 | app-chapter-card > .card-item-container > .overlay > app-image{ 28 | display:none !important; 29 | } 30 | 31 | app-chapter-card > .card-item-container > .overlay > .overlay-information{ 32 | display:none !important; 33 | } 34 | 35 | app-next-expected-card > .card-item-container > .overlay > app-image{ 36 | display:none !important; 37 | } 38 | 39 | app-next-expected-card > .card-item-container > .overlay{ 40 | height: 50px !important; 41 | } 42 | 43 | app-next-expected-card > .card-item-container > .overlay > .card-overlay{ 44 | height: 50px !important; 45 | } 46 | 47 | app-next-expected-card > .card-item-container > .card-title-container{ 48 | margin: auto !important; 49 | } 50 | 51 | :root { 52 | --card-overlay-hover-bg-color: rgba(0,0,0,0) !important; 53 | } 54 | 55 | .card-title .library{ 56 | display:none !important; 57 | } 58 | 59 | @media (min-width: 800px) { 60 | div:has(> app-chapter-card){ 61 | max-width: 40% !important; 62 | margin: auto !important; 63 | display:block !important; 64 | } 65 | } 66 | 67 | @media (max-width: 799px) { 68 | div:has(> app-chapter-card){ 69 | max-width: 80% !important; 70 | margin: auto !important; 71 | display:block !important; 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /Native Themes/Chapter-List-View/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/Chapter-List-View/preview.png -------------------------------------------------------------------------------- /Native Themes/CutePink/cutepink.css: -------------------------------------------------------------------------------- 1 | :root .bg-cutepink { 2 | 3 | /* Main Colors */ 4 | --color-scheme: light; 5 | --primary-color: #ffa0cb; 6 | --primary-color-dark-shade: #e485b0; 7 | --primary-color-darker-shade: #d1739d; 8 | --primary-color-darkest-shade: #b65d85; 9 | --error-color: #dd8181; 10 | --bs-body-bg: #ffc4cf; 11 | --body-text-color: #f996ae; 12 | 13 | 14 | /* Scrollbar */ 15 | --primary-color-scrollbar: #f996ae; 16 | 17 | /* Navbar */ 18 | --navbar-bg-color: #ffdfe5; 19 | --navbar-text-color: #f996ae; 20 | --navbar-fa-icon-color: #f996ae; 21 | --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1); 22 | 23 | /* Side Nav */ 24 | --side-nav-bg-color: var(--bs-body-bg); 25 | --side-nav-mobile-bg-color: var(--bs-body-bg); 26 | --side-nav-openclose-transition: .15s ease-in-out; 27 | --side-nav-box-shadow: var(--bs-body-bg); 28 | --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%); 29 | --side-nav-hover-text-color: #F8F8F2; 30 | --side-nav-hover-bg-color: var(--primary-color); 31 | --side-nav-color: #F8F8F2; 32 | --side-nav-border-radius: 5px; 33 | --side-nav-border: none; 34 | --side-nav-border-closed: none; 35 | --side-nav-border-transition: .5s ease-in-out; 36 | --side-nav-companion-bar-transistion: .15s linear; 37 | --side-nav-bg-color-transition: .5s ease-in-out; 38 | --side-nav-closed-bg-color: transparent; 39 | --side-nav-item-active-color: var(--primary-color-dark-shade); 40 | --side-nav-item-active-text-color: #F8F8F2; 41 | --side-nav-active-bg-color: var(--primary-color); 42 | --side-nav-overlay-color: #6c416e; 43 | 44 | /* Inputs */ 45 | --input-bg-color: var(--primary-color-darker-shade); 46 | --input-bg-readonly-color: rgb(141, 81, 109); 47 | --input-focused-border-color: #ccc; 48 | --input-text-color: #d1d1d1; 49 | --input-placeholder-color: #aeaeae; 50 | --input-border-color: #ccc; 51 | --input-focus-boxshadow-color: rgb(255 255 255 / 50%); 52 | --input-range-color: var(--primary-color); 53 | --input-range-active-color: var(--primary-color-darker-shade); 54 | 55 | /* Buttons */ 56 | --btn-focus-boxshadow-color: rgb(255 255 255 / 50%); 57 | --btn-primary-text-color: #F8F8F2; 58 | --btn-primary-bg-color: var(--primary-color); 59 | --btn-primary-border-color: var(--primary-color); 60 | --btn-primary-hover-text-color: #F8F8F2; 61 | --btn-primary-hover-bg-color: var(--primary-color); 62 | --btn-primary-hover-border-color: rgb(255 255 255 / 50%); 63 | --btn-alt-bg-color: #583453; 64 | --btn-alt-border-color: #5c365a; 65 | --btn-alt-hover-bg-color: #533053; 66 | --btn-alt-focus-bg-color: #442844; 67 | --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%); 68 | --btn-fa-icon-color: #F8F8F2; 69 | --btn-disabled-bg-color: #1c1d25; 70 | --btn-disabled-text-color: #F8F8F2; 71 | --btn-disabled-border-color: #3e4347; 72 | 73 | /* Nav */ 74 | --nav-tab-border-color: var(--primary-color); 75 | --nav-tab-text-color: var(--body-text-color); 76 | --nav-tab-bg-color: rgba(90, 68, 81, 0.75); 77 | --nav-tab-hover-border-color: var(--primary-color); 78 | --nav-tab-active-text-color: #F8F8F2; 79 | --nav-tab-border-hover-color: transparent; 80 | --nav-tab-hover-text-color: var(--body-text-color); 81 | --nav-tab-hover-bg-color: var(--primary-color); 82 | --nav-tab-border-top: var(--primary-color); 83 | --nav-tab-border-left: var(--primary-color); 84 | --nav-tab-border-bottom: var(--primary-color); 85 | --nav-tab-border-right: var(--primary-color); 86 | --nav-tab-hover-border-top: var(--primary-color); 87 | --nav-tab-hover-border-left: var(--primary-color); 88 | --nav-tab-hover-border-bottom: var(--bs-body-bg); 89 | --nav-tab-hover-border-right: var(--primary-color); 90 | --nav-tab-active-hover-bg-color: var(--primary-color); 91 | 92 | --nav-link-bg-color: var(--primary-color); 93 | --nav-link-active-text-color:var(--body-text-color); 94 | --nav-link-text-color: var(--body-text-color); 95 | 96 | --nav-header-text-color: var(--body-text-color); 97 | --nav-header-bg-color: RGB(68, 71, 90); 98 | 99 | /* Toasts */ 100 | --toast-success-bg-color: #baffc9; 101 | --toast-error-bg-color: #ffb3ba; 102 | --toast-info-bg-color: ##bae1ff; 103 | --toast-warning-bg-color: #ffffba; 104 | 105 | /* Checkboxes */ 106 | --checkbox-checked-bg-color: var(--primary-color); 107 | --checkbox-border-color: var(--input-focused-border-color); 108 | --checkbox-focus-border-color: var(--primary-color); 109 | --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%); 110 | 111 | /* Tagbadge */ 112 | --tagbadge-border-color: rgba(239, 239, 239, .125); 113 | --tagbadge-text-color: var(--body-text-color); 114 | --tagbadge-bg-color: var(--nav-tab-hover-bg-color); 115 | --tagbadge-filled-border-color: rgba(239, 239, 239, .125); 116 | --tagbadge-filled-text-color: var(--body-text-color); 117 | --tagbadge-filled-bg-color: var(--primary-color); 118 | 119 | /* List items */ 120 | --list-group-item-text-color: var(--body-text-color); 121 | --list-group-item-bg-color: #282a36; 122 | --list-group-item-border-color: rgba(239, 239, 239, .125); 123 | --list-group-hover-text-color: #F8F8F2; 124 | --list-group-hover-bg-color: rgb(22, 27, 34); 125 | --list-group-active-border-color: none; 126 | 127 | /* Popover */ 128 | --popover-body-bg-color: var(--navbar-bg-color); 129 | --popover-body-text-color: var(--navbar-text-color); 130 | --popover-outerarrow-color: transparent; 131 | --popover-arrow-color: transparent; 132 | --popover-bg-color: black; 133 | --popover-border-color: black; 134 | 135 | /* Pagination */ 136 | --pagination-active-link-border-color: var(--primary-color); 137 | --pagination-active-link-bg-color: var(--primary-color); 138 | --pagination-active-link-text-color: #F8F8F2; 139 | --pagination-link-border-color: rgba(68, 71, 90, .125); 140 | --pagination-link-text-color: #F8F8F2; 141 | --pagination-link-bg-color: rgba(1, 4, 9, .5); 142 | --pagination-focus-border-color: var(--primary-color); 143 | --pagination-link-hover-color: var(--primary-color); 144 | 145 | /* Progress */ 146 | --progress-striped-animated-color: linear-gradient(45deg, rgba(198, 74, 188, 0.75) 25%, rgba(138, 51, 138, 0.75) 25%, rgba(138, 51, 134, 0.75) 50%, rgba(198, 74, 192, 0.75) 50%, rgba(198, 74, 198, 0.75) 75%, rgba(138, 51, 126, 0.75) 75%, rgba(138, 51, 134, 0.75)); 147 | --progress-bg-color: var(--nav-header-bg-color); 148 | --progress-bar-color: var(--primary-color-dark-shade); 149 | 150 | /* Dropdown */ 151 | --dropdown-item-hover-text-color: #F8F8F2; 152 | --dropdown-item-hover-bg-color: var(--primary-color-dark-shade); 153 | --dropdown-item-text-color: var(--navbar-text-color); 154 | --dropdown-item-bg-color: var(--navbar-bg-color); 155 | --dropdown-overlay-color: rgba(0,0,0,.5); 156 | 157 | /* Accordion */ 158 | --accordion-header-text-color: #F8F8F2; 159 | --accordion-header-bg-color: rgba(249, 147, 232, 0.8); 160 | --accordion-body-bg-color: rgba(249, 147, 181, 0.5); 161 | --accordion-body-border-color: rgba(90, 68, 81, 0.75); 162 | --accordion-body-text-color: var(--body-text-color); 163 | --accordion-header-collapsed-text-color: #F8F8F2; 164 | --accordion-header-collapsed-bg-color: #5a4453; 165 | --accordion-button-focus-border-color: unset; 166 | --accordion-button-focus-box-shadow: unset; 167 | --accordion-active-body-bg-color: #5a4458; 168 | 169 | /* Breadcrumb */ 170 | --breadcrumb-bg-color: #F8F8F2; 171 | --breadcrumb-item-text-color: var(--body-text-color); 172 | 173 | /* Rating star */ 174 | --ratingstar-color: #bd93f9; 175 | --ratingstar-star-empty: #b0c4de; 176 | --ratingstar-star-filled: var(--primary-color); 177 | 178 | /* Global */ 179 | --hr-color: rgba(239, 239, 239, .125); 180 | --accent-bg-color: rgba(1, 4, 9, .5); 181 | --accent-text-color: lightgrey; 182 | --grid-breakpoints-xs: $grid-breakpoint-xs; 183 | --grid-breakpoints-sm: $grid-breakpoint-sm; 184 | --grid-breakpoints-md: $grid-breakpoint-md; 185 | --grid-breakpoints-lg: $grid-breakpoint-lg; 186 | --grid-breakpoints-xl: $grid-breakpoint-xl; 187 | --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif; 188 | --brand-font-family: "Spartan", sans-serif; 189 | 190 | /* Card */ 191 | --card-bg-color: #F8F8F2; 192 | --card-text-color: var(--body-text-color); 193 | --card-border-width: 2px 2px 2px 2px; 194 | --card-border-style: solid; 195 | --card-border-color: rgba(142, 145, 149, 0.1); 196 | --card-progress-bar-color: var(--primary-color); 197 | --card-overlay-bg-color: rgba(0, 0, 0, 0.1); 198 | --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.4); 199 | 200 | /* Slider */ 201 | --slider-text-color: #F8F8F2; 202 | 203 | 204 | /* Manga Reader */ 205 | --manga-reader-overlay-filter: blur(10px); 206 | --manga-reader-overlay-bg-color: rgba(0,0,0,.5); 207 | --manga-reader-overlay-text-color: #F8F8F2; 208 | --manga-reader-bg-color: black; 209 | --manga-reader-next-highlight-bg-color: rgba(80, 148, 250, 0.5); 210 | --manga-reader-prev-highlight-bg-color: rgba(158, 98, 164, 0.5); 211 | 212 | /* Radios */ 213 | --radio-accent-color: var(--primary-color); 214 | --radio-hover-accent-color: var(--primary-color); 215 | --radio-focus-boxshadow-color: rgb(255 255 255 / 50%); 216 | 217 | /* Carousel */ 218 | --carousel-header-text-color: var(--body-text-color); 219 | --carousel-header-text-decoration: none; 220 | --carousel-hover-header-text-decoration: none; 221 | 222 | /** Drawer */ 223 | --drawer-background-color: #F8F8F2; 224 | --drawer-bg-color: #59445a; 225 | --drawer-text-color: #F8F8F2; 226 | 227 | /** Event Widget */ 228 | --event-widget-bg-color: rgb(207, 206, 205); 229 | --event-widget-item-bg-color: rgb(207, 206, 205); 230 | --event-widget-text-color: var(--body-text-color); 231 | --event-widget-item-border-color: rgb(207, 200, 198); 232 | --event-widget-border-color: rgb(207, 206, 205); 233 | 234 | /* Search */ 235 | --search-result-text-lite-color: initial; 236 | 237 | /* Bulk Selection */ 238 | --bulk-selection-text-color: var(--navbar-text-color); 239 | --bulk-selection-highlight-text-color: var(--primary-color); 240 | 241 | /* Card list */ 242 | --card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 1%, rgba(0,0,0,0) 100%); 243 | } 244 | 245 | /* Make the Kavita fit the Theme */ 246 | .navbar-brand { 247 | color: var(--primary-color) !important; 248 | .logo.img-placeholder { 249 | filter: hue-rotate(148deg); 250 | } 251 | } 252 | 253 | /* Otherwise Progressbar stays green, bug is reported. */ 254 | .progress-bar { 255 | background-color: var(--primary-color) !important; 256 | } -------------------------------------------------------------------------------- /Native Themes/CutePink/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/CutePink/preview.png -------------------------------------------------------------------------------- /Native Themes/Dark-Pre-Overhaul/dark-pre-overhaul.css: -------------------------------------------------------------------------------- 1 | /* Default styles for Kavita */ 2 | :root .bg-dark-pre-overhaul { 3 | --color-scheme: dark; 4 | /* Base colors */ 5 | --primary-color: #4ac694; 6 | --primary-color-dark-shade: #3B9E76; 7 | --primary-color-darker-shade: #338A67; 8 | --primary-color-darkest-shade: #25624A; 9 | --error-color: #BD362F; 10 | --bs-body-bg: #343a40; 11 | --body-text-color: #efefef; 12 | --btn-icon-filter: invert(1) grayscale(100%) brightness(200%); 13 | --primary-color-scrollbar: rgba(74,198,148,0.75); 14 | --text-muted-color: lightgrey; 15 | 16 | /* New Color scheme */ 17 | --secondary-color: #212328; 18 | 19 | /* Meta and Globals */ 20 | --theme-color: #000000; 21 | --color-scheme: dark; 22 | --tile-color: var(--primary-color); 23 | --colorscape-enabled: false; 24 | 25 | 26 | /* Navbar */ 27 | --navbar-bg-color: black; 28 | --navbar-text-color: white; 29 | --navbar-fa-icon-color: white; 30 | --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1); 31 | 32 | /* Inputs */ 33 | --input-bg-color: #343a40; 34 | --input-bg-readonly-color: #434648; 35 | --input-focused-border-color: #ccc; 36 | --input-text-color: #fff; 37 | --input-placeholder-color: #aeaeae; 38 | --input-border-color: #ccc; 39 | --input-focus-boxshadow-color: rgb(255 255 255 / 50%); 40 | 41 | /* Buttons */ 42 | --btn-focus-boxshadow-color: rgb(255 255 255 / 50%); 43 | --btn-primary-text-color: white; 44 | --btn-primary-bg-color: var(--primary-color); 45 | --btn-primary-border-color: var(--primary-color); 46 | --btn-primary-hover-text-color: white; 47 | --btn-primary-hover-bg-color: var(--primary-color-darker-shade); 48 | --btn-primary-hover-border-color: var(--primary-color-darker-shade); 49 | --btn-alt-bg-color: #424c72; 50 | --btn-alt-border-color: #444f75; 51 | --btn-alt-hover-bg-color: #3b4466; 52 | --btn-alt-focus-bg-color: #343c59; 53 | --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%); 54 | --btn-fa-icon-color: white; 55 | --btn-disabled-bg-color: #343a40; 56 | --btn-disabled-text-color: white; 57 | --btn-disabled-border-color: #6c757d; 58 | --bs-btn-disabled-border-color: transparent; 59 | 60 | /* Nav (Tabs) */ 61 | --nav-tab-border-color: rgba(44, 118, 88, 0.7); 62 | --nav-tab-text-color: var(--body-text-color); 63 | --nav-tab-bg-color: var(--primary-color); 64 | --nav-tab-hover-border-color: var(--primary-color); 65 | --nav-tab-active-text-color: white; 66 | --nav-tab-border-hover-color: transparent; 67 | --nav-tab-hover-text-color: var(--body-text-color); 68 | --nav-tab-hover-bg-color: transparent; 69 | --nav-tab-border-top: rgba(44, 118, 88, 0.7); 70 | --nav-tab-border-left: rgba(44, 118, 88, 0.7); 71 | --nav-tab-border-bottom: rgba(44, 118, 88, 0.7); 72 | --nav-tab-border-right: rgba(44, 118, 88, 0.7); 73 | --nav-tab-hover-border-top: rgba(44, 118, 88, 0.7); 74 | --nav-tab-hover-border-left: rgba(44, 118, 88, 0.7); 75 | --nav-tab-hover-border-bottom: var(--bs-body-bg); 76 | --nav-tab-hover-border-right: rgba(44, 118, 88, 0.7); 77 | --nav-tab-active-hover-bg-color: var(--primary-color); 78 | --nav-link-bg-color: var(--primary-color); 79 | --nav-link-active-text-color: white; 80 | --nav-link-text-color: white; 81 | 82 | /* Header */ 83 | --nav-header-text-color: white; 84 | --nav-header-bg-color: rgb(22, 27, 34); 85 | 86 | /* Toasts */ 87 | --toast-success-bg-color: rgba(59, 158, 118, 0.9); 88 | --toast-error-bg-color: #BD362F; 89 | --toast-info-bg-color: #2F96B4; 90 | --toast-warning-bg-color: #F89406; 91 | 92 | /* Checkboxes/Switch */ 93 | --checkbox-checked-bg-color: var(--primary-color); 94 | --checkbox-border-color: var(--input-focused-border-color); 95 | --checkbox-focus-border-color: var(--primary-color); 96 | --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%); 97 | 98 | /* Tag Badge */ 99 | --tagbadge-border-color: rgba(239, 239, 239, 0.125); 100 | --tagbadge-text-color: var(--body-text-color); 101 | --tagbadge-bg-color: var(--nav-tab-hover-bg-color); 102 | --tagbadge-filled-border-color: rgba(239, 239, 239, 0.125); 103 | --tagbadge-filled-text-color: var(--body-text-color); 104 | --tagbadge-filled-bg-color: var(--primary-color); 105 | 106 | /* Side Nav */ 107 | --side-nav-bg-color: rgba(0,0,0,0.2); 108 | --side-nav-mobile-bg-color: rgb(25,26,28); 109 | --side-nav-openclose-transition: 0.15s ease-in-out; 110 | --side-nav-box-shadow: rgba(0,0,0,0.5); 111 | --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%); 112 | --side-nav-hover-text-color: white; 113 | --side-nav-hover-bg-color: black; 114 | --side-nav-text-color: white; 115 | --side-nav-border-radius: 5px; 116 | --side-nav-border: none; 117 | --side-nav-border-closed: none; 118 | --side-nav-border-transition: 0.5s ease-in-out; 119 | --side-nav-companion-bar-transistion: 0.15s linear; 120 | --side-nav-bg-color-transition: 0.5s ease-in-out; 121 | --side-nav-closed-bg-color: transparent; 122 | --side-nav-item-active-color: var(--primary-color); 123 | --side-nav-item-active-text-color: white; 124 | --side-nav-active-bg-color: rgba(0,0,0,0.5); 125 | --side-nav-overlay-color: rgba(0,0,0,0.5); 126 | 127 | 128 | /* List items */ 129 | --list-group-item-text-color: var(--body-text-color); 130 | --list-group-item-bg-color: #343a40; 131 | --list-group-item-border-color: rgba(239, 239, 239, 0.125); 132 | --list-group-hover-text-color: white; 133 | --list-group-hover-bg-color: rgb(22, 27, 34); 134 | --list-group-active-border-color: none; 135 | 136 | /* Popover */ 137 | --popover-body-bg-color: var(--navbar-bg-color); 138 | --popover-body-text-color: var(--navbar-text-color); 139 | --popover-outerarrow-color: transparent; 140 | --popover-arrow-color: transparent; 141 | --popover-bg-color: black; 142 | --popover-border-color: black; 143 | 144 | /* Pagination */ 145 | --pagination-active-link-border-color: var(--primary-color); 146 | --pagination-active-link-bg-color: var(--primary-color); 147 | --pagination-active-link-text-color: white; 148 | --pagination-link-border-color: rgba(239, 239, 239, 0.125); 149 | --pagination-link-text-color: white; 150 | --pagination-link-bg-color: rgba(1, 4, 9, 0.5); 151 | --pagination-focus-border-color: var(--primary-color); 152 | --pagination-link-hover-color: var(--primary-color); 153 | 154 | /* Progress Bar */ 155 | --progress-striped-animated-color: linear-gradient(45deg, rgba(74,198,148, 0.75) 25%, rgba(51, 138, 103, 0.75) 25%, rgba(51, 138, 103, 0.75) 50%, rgba(74,198,148, 0.75) 50%, rgba(74,198,148, 0.75) 75%, rgba(51, 138, 103, 0.75) 75%, rgba(51, 138, 103, 0.75)); 156 | --progress-bg-color: var(--nav-header-bg-color); 157 | --progress-bar-color: var(--primary-color-dark-shade); 158 | 159 | /* Dropdown */ 160 | --dropdown-item-hover-text-color: white; 161 | --dropdown-item-hover-bg-color: var(--primary-color-dark-shade); 162 | --dropdown-item-text-color: var(--navbar-text-color); 163 | --dropdown-item-bg-color: var(--navbar-bg-color); 164 | --dropdown-overlay-color: rgba(0,0,0,0.5); 165 | 166 | /* Accordion */ 167 | --accordion-header-text-color: rgba(74, 198, 148, 0.9); 168 | --accordion-header-bg-color: rgba(52, 60, 70, 0.5); 169 | --accordion-body-bg-color: #292929; 170 | --accordion-body-border-color: rgba(239, 239, 239, 0.125); 171 | --accordion-body-text-color: var(--body-text-color); 172 | --accordion-header-collapsed-text-color: rgba(74, 198, 148, 0.9); 173 | --accordion-header-collapsed-bg-color: #292929; 174 | --accordion-button-focus-border-color: unset; 175 | --accordion-button-focus-box-shadow: unset; 176 | --accordion-active-body-bg-color: #292929; 177 | --accordion-body-box-shadow: none; 178 | 179 | /* Breadcrumb */ 180 | --breadcrumb-bg-color: #292d32; 181 | --breadcrumb-item-text-color: var(--body-text-color); 182 | 183 | /* Rating star */ 184 | --ratingstar-color: white; 185 | --rating-star-color: var(--primary-color); 186 | --ratingstar-star-empty: #b0c4de; 187 | --ratingstar-star-filled: var(--primary-color); 188 | 189 | /* Global */ 190 | --hr-color: rgba(239, 239, 239, 0.125); 191 | --accent-bg-color: rgba(1, 4, 9, 0.5); 192 | --accent-text-color: lightgrey; 193 | --grid-breakpoints-xs: $grid-breakpoints-xs; 194 | --grid-breakpoints-sm: $grid-breakpoints-sm; 195 | --grid-breakpoints-md: $grid-breakpoints-md; 196 | --grid-breakpoints-lg: $grid-breakpoints-lg; 197 | --grid-breakpoints-xl: $grid-breakpoints-xl; 198 | --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif; 199 | --brand-font-family: "Spartan", sans-serif; 200 | 201 | /* Card */ 202 | --card-bg-color: rgba(22,27,34,0.5); 203 | --card-text-color: var(--body-text-color); 204 | --card-border-width: 0 1px 1px 1px; 205 | --card-border-style: solid; 206 | --card-border-color: transparent; 207 | --card-progress-bar-color: var(--primary-color); 208 | --card-overlay-bg-color: rgba(0, 0, 0, 0); 209 | --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2); 210 | --card-progress-triangle-size: 28px; 211 | 212 | /* Slider */ 213 | --slider-text-color: white; 214 | --input-range-color: var(--primary-color); 215 | --input-range-active-color: var(--primary-color-darker-shade); 216 | 217 | /* Manga Reader */ 218 | --manga-reader-overlay-filter: blur(10px); 219 | --manga-reader-overlay-bg-color: rgba(0,0,0,0.5); 220 | --manga-reader-overlay-text-color: white; 221 | --manga-reader-next-highlight-bg-color: rgba(65, 225, 100, 0.5); 222 | --manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, 0.5); 223 | 224 | /* Radios */ 225 | --radio-accent-color: var(--primary-color); 226 | --radio-hover-accent-color: var(--primary-color); 227 | --radio-focus-boxshadow-color: rgb(255 255 255 / 50%); 228 | 229 | /* Carousel */ 230 | --carousel-header-text-color: var(--body-text-color); 231 | --carousel-header-text-decoration: none; 232 | --carousel-hover-header-text-decoration: none; 233 | --carousel-btn-color: var(--body-text-color); 234 | 235 | /** Drawer */ 236 | --drawer-bg-color: #292929; 237 | --drawer-text-color: white; 238 | 239 | /** Event Widget */ 240 | --event-widget-bg-color: rgb(1, 4, 9); 241 | --event-widget-item-bg-color: rgb(1, 4, 9); 242 | --event-widget-text-color: var(--body-text-color); 243 | --event-widget-item-border-color: rgba(53, 53, 53, 0.5); 244 | --event-widget-border-color: rgba(1, 4, 9, 0.5); 245 | --event-widget-info-bg-color: #b6d4fe; 246 | --event-widget-error-bg-color: var(--error-color); 247 | --event-widget-update-bg-color: var(--primary-color); 248 | --event-widget-activity-bg-color: var(--primary-color); 249 | 250 | 251 | /* Search */ 252 | --search-result-text-lite-color: initial; 253 | 254 | /* Bulk Selection */ 255 | --bulk-selection-text-color: var(--navbar-text-color); 256 | --bulk-selection-highlight-text-color: var(--primary-color); 257 | 258 | /* List Card Item */ 259 | --card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 1%, rgba(0,0,0,0) 100%); 260 | 261 | /* Review Card */ 262 | --review-card-star-color: gold; 263 | --review-spoiler-bg-color: var(--primary-color); 264 | --review-spoiler-text-color: var(--body-text-color); 265 | 266 | /** Badge **/ 267 | --badge-text-color: var(--bs-badge-color); 268 | } -------------------------------------------------------------------------------- /Native Themes/Dark-Pre-Overhaul/preview1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/Dark-Pre-Overhaul/preview1.png -------------------------------------------------------------------------------- /Native Themes/Dark-Pre-Overhaul/preview2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/Dark-Pre-Overhaul/preview2.png -------------------------------------------------------------------------------- /Native Themes/DarkNight/darknight.css: -------------------------------------------------------------------------------- 1 | :root .bg-darknight { 2 | 3 | /* Main Colors */ 4 | --color-scheme: dark; 5 | --primary-color: #966fff; 6 | --primary-color-dark-shade: #7b57dd; 7 | --primary-color-darker-shade: #6443be; 8 | --primary-color-darkest-shade: #4e329b; 9 | --error-color: #FF5555; 10 | --bs-body-bg: #121216; 11 | --body-text-color: #d1d1d1; 12 | 13 | /* Scrollbar */ 14 | --primary-color-scrollbar: rgba(140, 0, 255, 0.75); 15 | 16 | /* Navbar */ 17 | --navbar-bg-color: #17181b; 18 | --navbar-text-color: #d1d1d1; 19 | --navbar-fa-icon-color: #d1d1d1; 20 | --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1); 21 | 22 | /* Side Nav */ 23 | --side-nav-bg-color: rgba(68,71,90,.4); 24 | --side-nav-mobile-bg-color: rgba(68,71,90,.3); 25 | --side-nav-openclose-transition: .15s ease-in-out; 26 | --side-nav-box-shadow: rgba(0,0,0,.5); 27 | --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%); 28 | --side-nav-hover-text-color: #F8F8F2; 29 | --side-nav-hover-bg-color: var(--primary-color); 30 | --side-nav-color: #F8F8F2; 31 | --side-nav-border-radius: 5px; 32 | --side-nav-border: none; 33 | --side-nav-border-closed: none; 34 | --side-nav-border-transition: .5s ease-in-out; 35 | --side-nav-companion-bar-transistion: .15s linear; 36 | --side-nav-bg-color-transition: .5s ease-in-out; 37 | --side-nav-closed-bg-color: transparent; 38 | --side-nav-item-active-color: var(--primary-color-dark-shade); 39 | --side-nav-item-active-text-color: #F8F8F2; 40 | --side-nav-active-bg-color: var(--primary-color); 41 | --side-nav-overlay-color: #414c6e; 42 | 43 | /* Inputs */ 44 | --input-bg-color: #282A36; 45 | --input-bg-readonly-color: rgb(94, 81, 141); 46 | --input-focused-border-color: #ccc; 47 | --input-text-color: #d1d1d1; 48 | --input-placeholder-color: #aeaeae; 49 | --input-border-color: #ccc; 50 | --input-focus-boxshadow-color: rgb(255 255 255 / 50%); 51 | --input-range-color: var(--primary-color); 52 | --input-range-active-color: var(--primary-color-darker-shade); 53 | 54 | /* Buttons */ 55 | --btn-focus-boxshadow-color: rgb(255 255 255 / 50%); 56 | --btn-primary-text-color: #F8F8F2; 57 | --btn-primary-bg-color: var(--primary-color); 58 | --btn-primary-border-color: var(--primary-color); 59 | --btn-primary-hover-text-color: #F8F8F2; 60 | --btn-primary-hover-bg-color: var(--primary-color); 61 | --btn-primary-hover-border-color: rgb(255 255 255 / 50%); 62 | --btn-alt-bg-color: #343b58; 63 | --btn-alt-border-color: #363e5c; 64 | --btn-alt-hover-bg-color: #303753; 65 | --btn-alt-focus-bg-color: #282e44; 66 | --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%); 67 | --btn-fa-icon-color: #F8F8F2; 68 | --btn-disabled-bg-color: #1c1d25; 69 | --btn-disabled-text-color: #F8F8F2; 70 | --btn-disabled-border-color: #3e4347; 71 | 72 | /* Nav */ 73 | --nav-tab-border-color: var(--primary-color); 74 | --nav-tab-text-color: var(--body-text-color); 75 | --nav-tab-bg-color: var(--primary-color); 76 | --nav-tab-hover-border-color: var(--primary-color); 77 | --nav-tab-active-text-color: #F8F8F2; 78 | --nav-tab-border-hover-color: transparent; 79 | --nav-tab-hover-text-color: var(--body-text-color); 80 | --nav-tab-hover-bg-color: var(--primary-color); 81 | --nav-tab-border-top: var(--primary-color); 82 | --nav-tab-border-left: var(--primary-color); 83 | --nav-tab-border-bottom: var(--primary-color); 84 | --nav-tab-border-right: var(--primary-color); 85 | --nav-tab-hover-border-top: var(--primary-color); 86 | --nav-tab-hover-border-left: var(--primary-color); 87 | --nav-tab-hover-border-bottom: var(--bs-body-bg); 88 | --nav-tab-hover-border-right: var(--primary-color); 89 | --nav-tab-active-hover-bg-color: var(--primary-color); 90 | 91 | --nav-link-bg-color: var(--primary-color); 92 | --nav-link-active-text-color: #F8F8F2; 93 | --nav-link-text-color: #F8F8F2; 94 | 95 | --nav-header-text-color: #F8F8F2; 96 | --nav-header-bg-color: RGB(68, 71, 90); 97 | 98 | /* Toasts */ 99 | --toast-success-bg-color: rgba(80,250,123, .9); 100 | --toast-error-bg-color: #ff5555; 101 | --toast-info-bg-color: #8BE9FD; 102 | --toast-warning-bg-color: #FFB86C; 103 | 104 | /* Checkboxes */ 105 | --checkbox-checked-bg-color: var(--primary-color); 106 | --checkbox-border-color: var(--input-focused-border-color); 107 | --checkbox-focus-border-color: var(--primary-color); 108 | --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%); 109 | 110 | /* Tagbadge */ 111 | --tagbadge-border-color: rgba(239, 239, 239, .125); 112 | --tagbadge-text-color: var(--body-text-color); 113 | --tagbadge-bg-color: var(--nav-tab-hover-bg-color); 114 | --tagbadge-filled-border-color: rgba(239, 239, 239, .125); 115 | --tagbadge-filled-text-color: var(--body-text-color); 116 | --tagbadge-filled-bg-color: var(--primary-color); 117 | 118 | /* List items */ 119 | --list-group-item-text-color: var(--body-text-color); 120 | --list-group-item-bg-color: #282a36; 121 | --list-group-item-border-color: rgba(239, 239, 239, .125); 122 | --list-group-hover-text-color: #F8F8F2; 123 | --list-group-hover-bg-color: rgb(22, 27, 34); 124 | --list-group-active-border-color: none; 125 | 126 | /* Popover */ 127 | --popover-body-bg-color: var(--navbar-bg-color); 128 | --popover-body-text-color: var(--navbar-text-color); 129 | --popover-outerarrow-color: transparent; 130 | --popover-arrow-color: transparent; 131 | --popover-bg-color: black; 132 | --popover-border-color: black; 133 | 134 | /* Pagination */ 135 | --pagination-active-link-border-color: var(--primary-color); 136 | --pagination-active-link-bg-color: var(--primary-color); 137 | --pagination-active-link-text-color: #F8F8F2; 138 | --pagination-link-border-color: rgba(68, 71, 90, .125); 139 | --pagination-link-text-color: #F8F8F2; 140 | --pagination-link-bg-color: rgba(1, 4, 9, .5); 141 | --pagination-focus-border-color: var(--primary-color); 142 | --pagination-link-hover-color: var(--primary-color); 143 | 144 | /* Progress */ 145 | --progress-striped-animated-color: linear-gradient(45deg, rgba(132, 74, 198, 0.75) 25%, rgba(92, 51, 138, 0.75) 25%, rgba(89, 51, 138, 0.75) 50%, rgba(128, 74, 198, 0.75) 50%, rgba(132, 74, 198, 0.75) 75%, rgba(92, 51, 138, 0.75) 75%, rgba(92, 51, 138, 0.75)); 146 | --progress-bg-color: var(--nav-header-bg-color); 147 | --progress-bar-color: var(--primary-color-dark-shade); 148 | 149 | /* Dropdown */ 150 | --dropdown-item-hover-text-color: #F8F8F2; 151 | --dropdown-item-hover-bg-color: var(--primary-color-dark-shade); 152 | --dropdown-item-text-color: var(--navbar-text-color); 153 | --dropdown-item-bg-color: var(--navbar-bg-color); 154 | --dropdown-overlay-color: rgba(0,0,0,.5); 155 | 156 | /* Accordion */ 157 | --accordion-header-text-color: #F8F8F2; 158 | --accordion-header-bg-color: rgba(189, 147, 249, .8); 159 | --accordion-body-bg-color: rgba(189, 147, 249, .50); 160 | --accordion-body-border-color: rgba(68, 71, 90, .75); 161 | --accordion-body-text-color: var(--body-text-color); 162 | --accordion-header-collapsed-text-color: #F8F8F2; 163 | --accordion-header-collapsed-bg-color: #44475a; 164 | --accordion-button-focus-border-color: unset; 165 | --accordion-button-focus-box-shadow: unset; 166 | --accordion-active-body-bg-color: #44475a; 167 | 168 | /* Breadcrumb */ 169 | --breadcrumb-bg-color: #292d32; 170 | --breadcrumb-item-text-color: var(--body-text-color); 171 | 172 | /* Rating star */ 173 | --ratingstar-color: #bd93f9; 174 | --ratingstar-star-empty: #b0c4de; 175 | --ratingstar-star-filled: var(--primary-color); 176 | 177 | /* Global */ 178 | --hr-color: rgba(239, 239, 239, .125); 179 | --accent-bg-color: rgba(1, 4, 9, .5); 180 | --accent-text-color: lightgrey; 181 | --grid-breakpoints-xs: $grid-breakpoint-xs; 182 | --grid-breakpoints-sm: $grid-breakpoint-sm; 183 | --grid-breakpoints-md: $grid-breakpoint-md; 184 | --grid-breakpoints-lg: $grid-breakpoint-lg; 185 | --grid-breakpoints-xl: $grid-breakpoint-xl; 186 | --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif; 187 | --brand-font-family: "Spartan", sans-serif; 188 | 189 | /* Card */ 190 | --card-bg-color: rgba(40,42,54,.5); 191 | --card-text-color: var(--body-text-color); 192 | --card-border-width: 2px 2px 2px 2px; 193 | --card-border-style: solid; 194 | --card-border-color: rgba(142, 145, 149, 0.1); 195 | --card-progress-bar-color: var(--primary-color); 196 | --card-overlay-bg-color: rgba(0, 0, 0, 0.1); 197 | --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.4); 198 | 199 | /* Slider */ 200 | --slider-text-color: #F8F8F2; 201 | 202 | 203 | /* Manga Reader */ 204 | --manga-reader-overlay-filter: blur(10px); 205 | --manga-reader-overlay-bg-color: rgba(0,0,0,.5); 206 | --manga-reader-overlay-text-color: #F8F8F2; 207 | --manga-reader-bg-color: black; 208 | --manga-reader-next-highlight-bg-color: rgba(80, 148, 250, 0.5); 209 | --manga-reader-prev-highlight-bg-color: rgba(158, 98, 164, 0.5); 210 | 211 | /* Radios */ 212 | --radio-accent-color: var(--primary-color); 213 | --radio-hover-accent-color: var(--primary-color); 214 | --radio-focus-boxshadow-color: rgb(255 255 255 / 50%); 215 | 216 | /* Carousel */ 217 | --carousel-header-text-color: var(--body-text-color); 218 | --carousel-header-text-decoration: none; 219 | --carousel-hover-header-text-decoration: none; 220 | 221 | /** Drawer */ 222 | --drawer-background-color: black; 223 | --drawer-bg-color: #44475a; 224 | --drawer-text-color: #F8F8F2; 225 | 226 | /** Event Widget */ 227 | --event-widget-bg-color: rgb(1, 4, 9); 228 | --event-widget-item-bg-color: rgb(1, 4, 9); 229 | --event-widget-text-color: var(--body-text-color); 230 | --event-widget-item-border-color: rgba(53, 53, 53, .5); 231 | --event-widget-border-color: rgba(1, 4, 9, .5); 232 | 233 | /* Search */ 234 | --search-result-text-lite-color: initial; 235 | 236 | /* Bulk Selection */ 237 | --bulk-selection-text-color: var(--navbar-text-color); 238 | --bulk-selection-highlight-text-color: var(--primary-color); 239 | 240 | /* Card list */ 241 | --card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 1%, rgba(0,0,0,0) 100%); 242 | } 243 | 244 | /* Otherwise Progressbar stays green, bug is reported. */ 245 | .progress-bar { 246 | background-color: var(--primary-color) !important; 247 | } 248 | 249 | /* Make the Kavita fit the Theme */ 250 | .navbar-brand { 251 | color: var(--primary-color) !important; 252 | .logo.img-placeholder { 253 | filter: hue-rotate(108deg); 254 | } 255 | } -------------------------------------------------------------------------------- /Native Themes/DarkNight/preview1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/DarkNight/preview1.png -------------------------------------------------------------------------------- /Native Themes/DarkNight/preview2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/DarkNight/preview2.png -------------------------------------------------------------------------------- /Native Themes/DarkPink/darkpink.css: -------------------------------------------------------------------------------- 1 | :root .bg-darkpink { 2 | 3 | 4 | /* Main Colors Variables*/ 5 | --color-scheme: dark; 6 | --primary-color: #d44175; 7 | --lighter-shade: #e578a5; 8 | --primary-color-dark-shade: #be3a69; 9 | --primary-color-darker-shade: #a9345d; 10 | --primary-color-darkest-shade: #942d51; 11 | --nav-tab-border: rgba(212, 65, 117, .7); 12 | --error-color: #b32326; 13 | --bs-body-bg: #0f121a; 14 | --body-text-color: #ffffff; 15 | --btn-icon-filter: invert(1) grayscale(100%) brightness(200%); 16 | 17 | /* Scrollbar */ 18 | --primary-color-scrollbar: rgba(212, 65, 117, .9); 19 | 20 | /* Navbar */ 21 | --navbar-bg-color: rgb(30, 31, 36); 22 | --navbar-text-color: var(--body-text-color); 23 | --navbar-fa-icon-color: #ffffff; 24 | --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1); 25 | 26 | /* Side Nav */ 27 | --side-nav-bg-color: rgba(30, 31, 36, .85); 28 | --side-nav-mobile-bg-color: rgba(30, 31, 36, .85); 29 | --side-nav-openclose-transition: .15s ease-in-out; 30 | --side-nav-box-shadow: rgba(0, 0, 0, .5); 31 | --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%); 32 | --side-nav-hover-text-color: var(--body-text-color); 33 | --side-nav-hover-bg-color: rgba(212, 65, 117, .85); 34 | --side-nav-color: var(--body-text-color); 35 | --side-nav-border-radius: 5px; 36 | --side-nav-border: rgb(55, 65, 81); 37 | --side-nav-border-closed: none; 38 | --side-nav-border-transition: .5s ease-in-out; 39 | --side-nav-companion-bar-transistion: .15s linear; 40 | --side-nav-bg-color-transition: .5s ease-in-out; 41 | --side-nav-closed-bg-color: transparent; 42 | --side-nav-item-active-color: var(--primary-color-darker-shade); 43 | --side-nav-item-active-text-color: var(--body-text-color); 44 | --side-nav-active-bg-color: rgba(212, 65, 117, .85); 45 | --side-nav-overlay-color: rgba(30, 31, 36, .90); 46 | 47 | /* Inputs */ 48 | --input-bg-color: #374151; 49 | --input-bg-readonly-color: rgba(212, 65, 117, .4); 50 | --input-focused-border-color: var(--primary-color); 51 | --input-text-color: var(--body-text-color); 52 | --input-placeholder-color: #aeaeae; 53 | --input-border-color: #ccc; 54 | --input-focus-boxshadow-color: rgb(255 255 255 / 50%); 55 | --input-range-color: var(--primary-color); 56 | --input-range-active-color: var(--primary-color-darker-shade); 57 | 58 | /* Buttons */ 59 | --btn-focus-boxshadow-color: rgb(255 255 255 / 50%); 60 | --btn-primary-text-color: var(--body-text-color); 61 | --btn-primary-bg-color: var(--primary-color); 62 | --btn-primary-border-color: var(--primary-color-dark-shade); 63 | --btn-primary-hover-text-color: var(--body-text-color); 64 | --btn-primary-hover-bg-color: var(--primary-color-dark-shade); 65 | --btn-primary-hover-border-color: #ffffff; 66 | --btn-alt-bg-color: #424c72; 67 | --btn-alt-border-color: #444f75; 68 | --btn-alt-hover-bg-color: #3b4466; 69 | --btn-alt-focus-bg-color: #343c59; 70 | --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%); 71 | --btn-fa-icon-color: #ffffff; 72 | --btn-disabled-bg-color: #111827; 73 | --btn-disabled-text-color: var(--body-text-color); 74 | --btn-disabled-border-color: #6c757d; 75 | 76 | /* Nav */ 77 | --nav-tab-border-color: var(--nav-tab-border); 78 | --nav-tab-text-color: var(--body-text-color); 79 | --nav-tab-bg-color: var(--primary-color); 80 | --nav-tab-hover-border-color: var(--primary-color); 81 | --nav-tab-active-text-color: #F8F8F2; 82 | --nav-tab-border-hover-color: transparent; 83 | --nav-tab-hover-text-color: var(--body-text-color); 84 | --nav-tab-hover-bg-color: transparent; 85 | --nav-tab-border-top: var(--nav-tab-border); 86 | --nav-tab-border-left: var(--nav-tab-border); 87 | --nav-tab-border-bottom: var(--nav-tab-border); 88 | --nav-tab-border-right: var(--nav-tab-border); 89 | --nav-tab-hover-border-top: var(--nav-tab-border); 90 | --nav-tab-hover-border-left: var(--nav-tab-border); 91 | --nav-tab-hover-border-bottom: var(--bs-body-bg); 92 | --nav-tab-hover-border-right: var(--nav-tab-border); 93 | --nav-tab-active-hover-bg-color: var(--primary-color); 94 | 95 | --nav-link-bg-color: var(--primary-color); 96 | --nav-link-active-text-color: var(--body-text-color); 97 | --nav-link-text-color: var(--body-text-color); 98 | 99 | --nav-header-text-color: var(--body-text-color); 100 | --nav-header-bg-color: rgba(30, 31, 36, .85); 101 | 102 | /* Toasts */ 103 | --toast-success-bg-color: rgba(212, 65, 117, .9); 104 | --toast-error-bg-color: #d44141; 105 | --toast-info-bg-color: #7c3a5e; 106 | --toast-warning-bg-color: #d4a141; 107 | 108 | /* Checkboxes */ 109 | --checkbox-checked-bg-color: var(--primary-color); 110 | --checkbox-border-color: var(--input-focused-border-color); 111 | --checkbox-focus-border-color: var(--primary-color); 112 | --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%); 113 | 114 | /* Tagbadge */ 115 | --tagbadge-border-color: rgba(239, 239, 239, .125); 116 | --tagbadge-text-color: var(--body-text-color); 117 | --tagbadge-bg-color: var(--nav-tab-hover-bg-color); 118 | --tagbadge-filled-border-color: rgba(239, 239, 239, .125); 119 | --tagbadge-filled-text-color: var(--body-text-color); 120 | --tagbadge-filled-bg-color: var(--primary-color); 121 | 122 | /* List items */ 123 | --list-group-item-text-color: var(--body-text-color); 124 | --list-group-item-bg-color: rgba(85, 86, 94, .5); 125 | --list-group-item-border-color: rgba(239, 239, 239, .125); 126 | --list-group-hover-text-color: var(--body-text-color); 127 | --list-group-hover-bg-color: rgba(212, 65, 117, .6); 128 | --list-group-active-border-color: none; 129 | 130 | /* Popover */ 131 | --popover-body-bg-color: var(--navbar-bg-color); 132 | --popover-body-text-color: var(--navbar-text-color); 133 | --popover-outerarrow-color: transparent; 134 | --popover-arrow-color: transparent; 135 | --popover-bg-color: black; 136 | --popover-border-color: black; 137 | 138 | /* Pagination */ 139 | --pagination-active-link-border-color: var(--primary-color); 140 | --pagination-active-link-bg-color: var(--primary-color); 141 | --pagination-active-link-text-color: var(--body-text-color); 142 | --pagination-link-border-color: rgba(68, 71, 90, .125); 143 | --pagination-link-text-color: var(--body-text-color); 144 | --pagination-link-bg-color: rgba(1, 4, 9, .5); 145 | --pagination-focus-border-color: var(--primary-color); 146 | --pagination-link-hover-color: var(--primary-color); 147 | 148 | /* Progress */ 149 | --progress-striped-animated-color: linear-gradient(45deg, var(--lighter-shade) 25%, var(--base-color) 25%, var(--base-color) 50%, var(--lighter-shade) 50%, var(--lighter-shade) 75%, var(--base-color) 75%, var(--base-color)) !important; 150 | --progress-bg-color: var(--nav-header-bg-color); 151 | --progress-bar-color: var(--primary-color-dark-shade); 152 | 153 | /* Dropdown */ 154 | --dropdown-item-hover-text-color: var(--body-text-color); 155 | --dropdown-item-hover-bg-color: var(--primary-color-dark-shade); 156 | --dropdown-item-text-color: var(--navbar-text-color); 157 | --dropdown-item-bg-color: var(--navbar-bg-color); 158 | --dropdown-overlay-color: rgba(0, 0, 0, .5); 159 | 160 | /* Accordion */ 161 | --accordion-header-text-color: var(--body-text-color); 162 | --accordion-header-bg-color: #222222; 163 | --accordion-body-bg-color: #1a1a1a; 164 | --accordion-body-border-color: #374151; 165 | --accordion-body-text-color: var(--body-text-color); 166 | --accordion-header-collapsed-text-color: var(--body-text-color); 167 | --accordion-header-collapsed-bg-color: #1a1a1a; 168 | --accordion-button-focus-border-color: unset; 169 | --accordion-button-focus-box-shadow: unset; 170 | --accordion-active-body-bg-color: #171e2d; 171 | 172 | /* Breadcrumb */ 173 | --breadcrumb-bg-color: #292d32; 174 | --breadcrumb-item-text-color: var(--body-text-color); 175 | 176 | /* Rating star */ 177 | --ratingstar-color: var(--primary-color-dark-shade); 178 | --ratingstar-star-empty: #b0c4de; 179 | --ratingstar-star-filled: var(--primary-color); 180 | 181 | /* Global */ 182 | --hr-color: rgba(239, 239, 239, .125); 183 | --accent-bg-color: rgba(1, 4, 9, .5); 184 | --accent-text-color: lightgrey; 185 | --grid-breakpoints-xs: $grid-breakpoint-xs; 186 | --grid-breakpoints-sm: $grid-breakpoint-sm; 187 | --grid-breakpoints-md: $grid-breakpoint-md; 188 | --grid-breakpoints-lg: $grid-breakpoint-lg; 189 | --grid-breakpoints-xl: $grid-breakpoint-xl; 190 | --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif; 191 | --brand-font-family: "Spartan", sans-serif; 192 | 193 | /* Card */ 194 | --card-bg-color: rgba(30, 31, 36, .8); 195 | --card-text-color: var(--body-text-color); 196 | --card-border-width: 2px 2px 2px 2px; 197 | --card-border-style: solid; 198 | --card-border-color: rgba(142, 145, 149, 0.1); 199 | --card-progress-bar-color: var(--primary-color); 200 | --card-overlay-bg-color: rgba(0, 0, 0, 0); 201 | --card-overlay-hover-bg-color: rgba(0, 0, 0, .20); 202 | 203 | /* Slider */ 204 | --slider-text-color: var(--body-text-color); 205 | 206 | /* Manga Reader */ 207 | --manga-reader-overlay-filter: blur(10px); 208 | --manga-reader-overlay-bg-color: rgba(0, 0, 0, .5); 209 | --manga-reader-overlay-text-color: var(--body-text-color); 210 | --manga-reader-bg-color: black; 211 | --manga-reader-next-highlight-bg-color: rgba(65, 105, 225, .5); 212 | --manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, .5); 213 | 214 | /* Radios */ 215 | --radio-accent-color: var(--primary-color); 216 | --radio-hover-accent-color: var(--primary-color); 217 | --radio-focus-boxshadow-color: rgb(255 255 255 / 50%); 218 | 219 | /* Carousel */ 220 | --carousel-header-text-color: var(--body-text-color); 221 | --carousel-header-text-decoration: none; 222 | --carousel-hover-header-text-decoration: none; 223 | 224 | /** Drawer */ 225 | --drawer-background-color: black; 226 | --drawer-bg-color: #171e2d; 227 | --drawer-text-color: var(--body-text-color); 228 | 229 | /** Event Widget */ 230 | --event-widget-bg-color: rgb(1, 4, 9); 231 | --event-widget-item-bg-color: rgb(1, 4, 9); 232 | --event-widget-text-color: var(--body-text-color); 233 | --event-widget-item-border-color: rgba(53, 53, 53, .5); 234 | --event-widget-border-color: rgba(1, 4, 9, .5); 235 | 236 | /* Search */ 237 | --search-result-text-lite-color: initial; 238 | 239 | /* Bulk Selection */ 240 | --bulk-selection-text-color: var(--navbar-text-color); 241 | --bulk-selection-highlight-text-color: var(--primary-color); 242 | 243 | /* Card list */ 244 | --card-list-item-bg-color: linear-gradient(180deg, rgba(26, 26, 26, 0.15) 0%, rgba(26, 26, 26, .15) 1%, rgba(26, 26, 26, 0) 100%); 245 | 246 | } 247 | 248 | /* Make the Kavita fit the Theme */ 249 | .navbar-brand { 250 | color: var(--primary-color) !important; 251 | .logo.img-placeholder { 252 | filter: hue-rotate(190deg) brightness(100%) saturate(200%); 253 | } 254 | } 255 | 256 | /* Otherwise Progressbar stays green, bug is reported. */ 257 | .progress-bar { 258 | background-color: var(--primary-color) !important; 259 | } -------------------------------------------------------------------------------- /Native Themes/DarkPink/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/DarkPink/preview.jpg -------------------------------------------------------------------------------- /Native Themes/Dracula/dracula.css: -------------------------------------------------------------------------------- 1 | :root .bg-dracula { 2 | 3 | /* Main Colors */ 4 | --color-scheme: dark; 5 | --primary-color: #50FA7B; 6 | --primary-color-dark-shade: #48E16E; 7 | --primary-color-darker-shade: #50FA7B; 8 | --primary-color-darkest-shade: #40C862; 9 | --error-color: #FF5555; 10 | --bs-body-bg: #282A36; 11 | --body-text-color: #F8F8F2; 12 | --btn-icon-filter: invert(1) grayscale(100%) brightness(200%); 13 | 14 | /* Scrollbar */ 15 | --primary-color-scrollbar: rgba(80, 250, 123,.75); 16 | 17 | /* Navbar */ 18 | --navbar-bg-color: #44475a; 19 | --navbar-text-color: #F8F8F2; 20 | --navbar-fa-icon-color: #F8F8F2; 21 | --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1); 22 | 23 | /* Side Nav */ 24 | --side-nav-bg-color: rgba(68,71,90,.4); 25 | --side-nav-mobile-bg-color: rgba(68,71,90,.3); 26 | --side-nav-openclose-transition: .15s ease-in-out; 27 | --side-nav-box-shadow: rgba(0,0,0,.5); 28 | --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%); 29 | --side-nav-hover-text-color: #F8F8F2; 30 | --side-nav-hover-bg-color: #50FA7B; 31 | --side-nav-color: #F8F8F2; 32 | --side-nav-border-radius: 5px; 33 | --side-nav-border: none; 34 | --side-nav-border-closed: none; 35 | --side-nav-border-transition: .5s ease-in-out; 36 | --side-nav-companion-bar-transistion: .15s linear; 37 | --side-nav-bg-color-transition: .5s ease-in-out; 38 | --side-nav-closed-bg-color: transparent; 39 | --side-nav-item-active-color: #40C862; 40 | --side-nav-item-active-text-color: #F8F8F2; 41 | --side-nav-active-bg-color: #50FA7B; 42 | --side-nav-overlay-color: #6272a4; 43 | 44 | /* Inputs */ 45 | --input-bg-color: #282A36; 46 | --input-bg-readonly-color: rgba(189, 147, 249, .5); 47 | --input-focused-border-color: #ccc; 48 | --input-text-color: #fff; 49 | --input-placeholder-color: #aeaeae; 50 | --input-border-color: #ccc; 51 | --input-focus-boxshadow-color: rgb(255 255 255 / 50%); 52 | --input-range-color: var(--primary-color); 53 | --input-range-active-color: var(--primary-color-darker-shade); 54 | 55 | /* Buttons */ 56 | --btn-focus-boxshadow-color: rgb(255 255 255 / 50%); 57 | --btn-primary-text-color: #F8F8F2; 58 | --btn-primary-bg-color: var(--primary-color); 59 | --btn-primary-border-color: var(--primary-color); 60 | --btn-primary-hover-text-color: #F8F8F2; 61 | --btn-primary-hover-bg-color: #40C862; 62 | --btn-primary-hover-border-color: rgb(255 255 255 / 50%); 63 | --btn-alt-bg-color: #424c72; 64 | --btn-alt-border-color: #444f75; 65 | --btn-alt-hover-bg-color: #3b4466; 66 | --btn-alt-focus-bg-color: #343c59; 67 | --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%); 68 | --btn-fa-icon-color: #F8F8F2; 69 | --btn-disabled-bg-color: #282a36; 70 | --btn-disabled-text-color: #F8F8F2; 71 | --btn-disabled-border-color: #6c757d; 72 | 73 | /* Nav */ 74 | --nav-tab-border-color: rgba(80,250,123, .7); 75 | --nav-tab-text-color: var(--body-text-color); 76 | --nav-tab-bg-color: var(--primary-color); 77 | --nav-tab-hover-border-color: var(--primary-color); 78 | --nav-tab-active-text-color: #F8F8F2; 79 | --nav-tab-border-hover-color: transparent; 80 | --nav-tab-hover-text-color: var(--body-text-color); 81 | --nav-tab-hover-bg-color: #40C862; 82 | --nav-tab-border-top: rgba(80,250,123, .7); 83 | --nav-tab-border-left: rgba(80,250,123, .7); 84 | --nav-tab-border-bottom: rgba(80,250,123, .7); 85 | --nav-tab-border-right: rgba(80,250,123, .7); 86 | --nav-tab-hover-border-top: rgba(80,250,123, .7); 87 | --nav-tab-hover-border-left: rgba(80,250,123, .7); 88 | --nav-tab-hover-border-bottom: var(--bs-body-bg); 89 | --nav-tab-hover-border-right: rgba(80,250,123, .7); 90 | --nav-tab-active-hover-bg-color: var(--primary-color); 91 | 92 | --nav-link-bg-color: var(--primary-color); 93 | --nav-link-active-text-color: #F8F8F2; 94 | --nav-link-text-color: #F8F8F2; 95 | 96 | --nav-header-text-color: #F8F8F2; 97 | --nav-header-bg-color: RGB(68, 71, 90); 98 | 99 | /* Toasts */ 100 | --toast-success-bg-color: rgba(80,250,123, .9); 101 | --toast-error-bg-color: #ff5555; 102 | --toast-info-bg-color: #8BE9FD; 103 | --toast-warning-bg-color: #FFB86C; 104 | 105 | /* Checkboxes */ 106 | --checkbox-checked-bg-color: var(--primary-color); 107 | --checkbox-border-color: var(--input-focused-border-color); 108 | --checkbox-focus-border-color: var(--primary-color); 109 | --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%); 110 | 111 | /* Tagbadge */ 112 | --tagbadge-border-color: rgba(239, 239, 239, .125); 113 | --tagbadge-text-color: var(--body-text-color); 114 | --tagbadge-bg-color: var(--nav-tab-hover-bg-color); 115 | --tagbadge-filled-border-color: rgba(239, 239, 239, .125); 116 | --tagbadge-filled-text-color: var(--body-text-color); 117 | --tagbadge-filled-bg-color: var(--primary-color); 118 | 119 | /* List items */ 120 | --list-group-item-text-color: var(--body-text-color); 121 | --list-group-item-bg-color: #282a36; 122 | --list-group-item-border-color: rgba(239, 239, 239, .125); 123 | --list-group-hover-text-color: #F8F8F2; 124 | --list-group-hover-bg-color: rgb(22, 27, 34); 125 | --list-group-active-border-color: none; 126 | 127 | /* Popover */ 128 | --popover-body-bg-color: var(--navbar-bg-color); 129 | --popover-body-text-color: var(--navbar-text-color); 130 | --popover-outerarrow-color: transparent; 131 | --popover-arrow-color: transparent; 132 | --popover-bg-color: black; 133 | --popover-border-color: black; 134 | 135 | /* Pagination */ 136 | --pagination-active-link-border-color: var(--primary-color); 137 | --pagination-active-link-bg-color: var(--primary-color); 138 | --pagination-active-link-text-color: #F8F8F2; 139 | --pagination-link-border-color: rgba(68, 71, 90, .125); 140 | --pagination-link-text-color: #F8F8F2; 141 | --pagination-link-bg-color: rgba(1, 4, 9, .5); 142 | --pagination-focus-border-color: var(--primary-color); 143 | --pagination-link-hover-color: var(--primary-color); 144 | 145 | /* Progress */ 146 | --progress-striped-animated-color: linear-gradient(45deg, rgba(74,198,148, .75) 25%, rgba(51, 138, 103, .75) 25%, rgba(51, 138, 103, .75) 50%, rgba(74,198,148, .75) 50%, rgba(74,198,148, .75) 75%, rgba(51, 138, 103, .75) 75%, rgba(51, 138, 103, .75)); 147 | --progress-bg-color: var(--nav-header-bg-color); 148 | --progress-bar-color: var(--primary-color-dark-shade); 149 | 150 | /* Dropdown */ 151 | --dropdown-item-hover-text-color: #F8F8F2; 152 | --dropdown-item-hover-bg-color: var(--primary-color-dark-shade); 153 | --dropdown-item-text-color: var(--navbar-text-color); 154 | --dropdown-item-bg-color: var(--navbar-bg-color); 155 | --dropdown-overlay-color: rgba(0,0,0,.5); 156 | 157 | /* Accordion */ 158 | --accordion-header-text-color: #F8F8F2; 159 | --accordion-header-bg-color: rgba(189, 147, 249, .8); 160 | --accordion-body-bg-color: rgba(189, 147, 249, .50); 161 | --accordion-body-border-color: rgba(68, 71, 90, .75); 162 | --accordion-body-text-color: var(--body-text-color); 163 | --accordion-header-collapsed-text-color: #F8F8F2; 164 | --accordion-header-collapsed-bg-color: #44475a; 165 | --accordion-button-focus-border-color: unset; 166 | --accordion-button-focus-box-shadow: unset; 167 | --accordion-active-body-bg-color: #44475a; 168 | 169 | /* Breadcrumb */ 170 | --breadcrumb-bg-color: #292d32; 171 | --breadcrumb-item-text-color: var(--body-text-color); 172 | 173 | /* Rating star */ 174 | --ratingstar-color: #bd93f9; 175 | --ratingstar-star-empty: #b0c4de; 176 | --ratingstar-star-filled: var(--primary-color); 177 | 178 | /* Global */ 179 | --hr-color: rgba(239, 239, 239, .125); 180 | --accent-bg-color: rgba(1, 4, 9, .5); 181 | --accent-text-color: lightgrey; 182 | --grid-breakpoints-xs: $grid-breakpoint-xs; 183 | --grid-breakpoints-sm: $grid-breakpoint-sm; 184 | --grid-breakpoints-md: $grid-breakpoint-md; 185 | --grid-breakpoints-lg: $grid-breakpoint-lg; 186 | --grid-breakpoints-xl: $grid-breakpoint-xl; 187 | --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif; 188 | --brand-font-family: "Spartan", sans-serif; 189 | 190 | /* Card */ 191 | --card-bg-color: rgba(40,42,54,.5); 192 | --card-text-color: var(--body-text-color); 193 | --card-border-width: 2px 2px 2px 2px; 194 | --card-border-style: solid; 195 | --card-border-color: rgba(142, 145, 149, 0.1);/ 196 | --card-progress-bar-color: var(--primary-color); 197 | --card-overlay-bg-color: rgba(0, 0, 0, 0); 198 | --card-overlay-hover-bg-color: rgba(0, 0, 0, .2); 199 | 200 | /* Slider */ 201 | --slider-text-color: #F8F8F2; 202 | 203 | 204 | /* Manga Reader */ 205 | --manga-reader-overlay-filter: blur(10px); 206 | --manga-reader-overlay-bg-color: rgba(0,0,0,.5); 207 | --manga-reader-overlay-text-color: #F8F8F2; 208 | --manga-reader-bg-color: black; 209 | --manga-reader-next-highlight-bg-color: rgba(80,250,123, .5); 210 | --manga-reader-prev-highlight-bg-color: rgba(98,114,164, .5); 211 | 212 | /* Radios */ 213 | --radio-accent-color: var(--primary-color); 214 | --radio-hover-accent-color: var(--primary-color); 215 | --radio-focus-boxshadow-color: rgb(255 255 255 / 50%); 216 | 217 | /* Carousel */ 218 | --carousel-header-text-color: var(--body-text-color); 219 | --carousel-header-text-decoration: none; 220 | --carousel-hover-header-text-decoration: none; 221 | 222 | /** Drawer */ 223 | --drawer-background-color: black; 224 | --drawer-bg-color: #44475a; 225 | --drawer-text-color: #F8F8F2; 226 | 227 | /** Event Widget */ 228 | --event-widget-bg-color: rgb(1, 4, 9); 229 | --event-widget-item-bg-color: rgb(1, 4, 9); 230 | --event-widget-text-color: var(--body-text-color); 231 | --event-widget-item-border-color: rgba(53, 53, 53, .5); 232 | --event-widget-border-color: rgba(1, 4, 9, .5); 233 | 234 | /* Search */ 235 | --search-result-text-lite-color: initial; 236 | 237 | /* Bulk Selection */ 238 | --bulk-selection-text-color: var(--navbar-text-color); 239 | --bulk-selection-highlight-text-color: var(--primary-color); 240 | 241 | /* Card list */ 242 | --card-list-item-bg-color: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 1%, rgba(0,0,0,0) 100%); 243 | } 244 | 245 | /* Otherwise Progressbar stays green, bug is reported. */ 246 | .progress-bar { 247 | background-color: #50FA7B !important; 248 | } 249 | -------------------------------------------------------------------------------- /Native Themes/Dracula/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/Dracula/preview.jpg -------------------------------------------------------------------------------- /Native Themes/E-Ink/e-ink.css: -------------------------------------------------------------------------------- 1 | :root .bg-e-ink { 2 | --color-scheme: light; 3 | --primary-color: black; 4 | --primary-color-dark-shade: #3B9E76; 5 | --primary-color-darker-shade: #338A67; 6 | --primary-color-darkest-shade: #25624A; 7 | --error-color: #ff4136; 8 | --bs-body-bg: #fff; 9 | --body-text-color: black; 10 | --btn-icon-filter: invert(1) grayscale(100%) brightness(200%); 11 | --primary-color-scrollbar: black; 12 | --text-muted-color: black; 13 | 14 | /* Colorscape */ 15 | --colorscape-enabled: false; 16 | /* Navbar */ 17 | --navbar-bg-color: black; 18 | --navbar-text-color: white; 19 | --navbar-fa-icon-color: white; 20 | --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1); 21 | 22 | /* Header */ 23 | --nav-header-text-color: white; 24 | --nav-header-bg-color: black; 25 | 26 | /* Inputs */ 27 | --input-text-color: black; 28 | --input-bg-color: #fff; 29 | --input-focused-border-color: #ccc; 30 | --input-bg-readonly-color: rgba(0,0,0,0.2); 31 | --input-placeholder-color: #aeaeae; 32 | --input-border-color: #ccc; 33 | --input-range-color: var(--primary-color); 34 | --input-range-active-color: var(--primary-color-darker-shade); 35 | 36 | /* Buttons */ 37 | --btn-primary-text-color: black; 38 | --btn-primary-bg-color: white; 39 | --btn-primary-border-color: black; 40 | --btn-primary-hover-text-color: white; 41 | --btn-primary-hover-bg-color: black; 42 | --btn-primary-hover-border-color: black; 43 | --btn-primary-outline-text-color: black; 44 | --btn-alt-bg-color: #424c72; 45 | --btn-alt-border-color: #444f75; 46 | --btn-alt-hover-bg-color: #3b4466; 47 | --btn-alt-focus-bg-color: #343c59; 48 | --btn-alt-focus-boxshadow-color: rgb(68 79 117 / 50%); 49 | --btn-fa-icon-color: black; 50 | --btn-disabled-bg-color: #020202; 51 | --btn-disabled-text-color: white; 52 | --btn-disabled-border-color: #6c757d; 53 | --btn-fa-icon-color: black; 54 | 55 | /* Nav */ 56 | --nav-link-active-text-color: white; 57 | --nav-link-bg-color: white; 58 | --nav-link-text-color: black; 59 | --nav-link-hover-text-color: var(--primary-color); 60 | --nav-tab-border-hover-color: transparent; 61 | --nav-tab-active-text-color: black; 62 | --nav-tab-hover-text-color: black; 63 | --nav-tab-text-color: var(--body-text-color); 64 | --nav-tab-bg-color: white; 65 | --nav-tab-hover-border-color: black; 66 | 67 | /* Modal */ 68 | --modal-bg-color: white; 69 | 70 | /* Checkboxes */ 71 | --checkbox-checked-bg-color: var(--primary-color); 72 | --checkbox-bg-color: white; 73 | --checkbox-border-color: var(--primary-color); 74 | --checkbox-focus-border-color: var(--input-border-color); 75 | 76 | /* Tagbadge */ 77 | --tagbadge-bg-color: #c9c9c9; 78 | 79 | /* Side Nav */ 80 | --side-nav-bg-color: rgba(255,255,255,0.6); 81 | --side-nav-mobile-bg-color: rgb(255,255,255); 82 | --side-nav-openclose-transition: 1ms; 83 | --side-nav-box-shadow: none; 84 | --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%); 85 | --side-nav-text-color: black; 86 | --side-nav-hover-text-color: white; 87 | --side-nav-hover-bg-color: black; 88 | --side-nav-color: black; 89 | --side-nav-border-radius: 5px; 90 | --side-nav-border: none; 91 | --side-nav-border-closed: none; 92 | --side-nav-border-transition: 0s; 93 | --side-nav-bg-color-transition: 0s; 94 | --side-nav-companion-bar-transistion: 0s; 95 | --side-nav-closed-bg-color: transparent; 96 | --side-nav-item-active-color: var(--primary-color); 97 | --side-nav-active-bg-color: rgba(0,0,0,0); 98 | --side-nav-overlay-color: rgba(0,0,0,1); 99 | --side-nav-item-active-text-color: black; 100 | --side-nav-item-closed-color: black; 101 | 102 | /* Toasts */ 103 | --toast-success-bg-color: rgba(74, 198, 148, 0.9); 104 | --toast-error-bg-color: #BD362F; 105 | --toast-info-bg-color: #2F96B4; 106 | --toast-warning-bg-color: #F89406; 107 | 108 | /* Rating star */ 109 | --ratingstar-star-empty: #b0c4de; 110 | --ratingstar-star-filled: var(--primary-color); 111 | 112 | /* Global */ 113 | --accent-bg-color: rgba(206, 206, 206, 0.5); 114 | --accent-text-color: black; 115 | --hr-color: rgba(239, 239, 239, 0.125); 116 | --grid-breakpoints-xs: $grid-breakpoint-xs; 117 | --grid-breakpoints-sm: $grid-breakpoint-sm; 118 | --grid-breakpoints-md: $grid-breakpoint-md; 119 | --grid-breakpoints-lg: $grid-breakpoint-lg; 120 | --grid-breakpoints-xl: $grid-breakpoint-xl; 121 | --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif; 122 | --brand-font-family: "Spartan", sans-serif; 123 | 124 | /* Breadcrumb */ 125 | --breadcrumb-bg-color: black; 126 | --breadcrumb-item-text-color: var(--body-text-color); 127 | 128 | /* Card */ 129 | --card-text-color: white; 130 | --card-bg-color: white; 131 | --card-border-width: 0 1px 1px 1px; 132 | --card-border-style: solid; 133 | --card-border-color: #ccc; 134 | --card-progress-bar-color: var(--primary-color); 135 | --card-overlay-hover-bg-color: rgba(0, 0, 0, 0.2); 136 | 137 | /* List items */ 138 | --list-group-item-text-color: var(--body-text-color); 139 | --list-group-item-bg-color: white; 140 | --list-group-hover-text-color: black; 141 | --list-group-hover-bg-color: #eaeaea; 142 | --list-group-item-border-color: rgba(239, 239, 239, 0.125); 143 | --list-group-active-border-color: none; 144 | 145 | /* Dropdown */ 146 | --dropdown-item-text-color: black; 147 | --dropdown-item-hover-text-color: white; 148 | --dropdown-item-hover-bg-color: var(--primary-color); 149 | --dropdown-overlay-color: rgba(0,0,0,0.5); 150 | --dropdown-item-bg-color: white; 151 | 152 | /* Manga Reader */ 153 | --manga-reader-overlay-filter: none; 154 | --manga-reader-overlay-bg-color: rgba(0,0,0,0.5); 155 | --manga-reader-overlay-text-color: white; 156 | --manga-reader-bg-color: black; 157 | --manga-reader-next-highlight-bg-color: transparent; 158 | --manga-reader-prev-highlight-bg-color: transparent; 159 | 160 | /* Radios */ 161 | --radio-accent-color: var(--primary-color); 162 | --radio-hover-accent-color: var(--primary-color-dark-shade); 163 | 164 | /* Carousel */ 165 | --carousel-header-text-color: black; 166 | --carousel-header-text-decoration: none; 167 | --carousel-hover-header-text-decoration: none; 168 | 169 | /** Drawer */ 170 | --drawer-background-color: white; 171 | --drawer-bg-color: white; 172 | --drawer-text-color: black; 173 | 174 | /* Pagination */ 175 | --pagination-active-link-border-color: var(--primary-color); 176 | --pagination-active-link-bg-color: var(--primary-color); 177 | --pagination-active-link-text-color: white; 178 | --pagination-link-border-color: rgba(239, 239, 239, 1); 179 | --pagination-link-text-color: black; 180 | --pagination-link-bg-color: white; 181 | --pagination-focus-border-color: var(--primary-color); 182 | --pagination-link-hover-color: var(--primary-color); 183 | 184 | /** Event Widget */ 185 | --event-widget-bg-color: white; 186 | --event-widget-item-bg-color: lightgrey; 187 | --event-widget-text-color: black; 188 | --event-widget-item-border-color: lightgrey; 189 | --event-widget-border-color: lightgrey; 190 | 191 | /* Popover */ 192 | --popover-body-bg-color: var(--navbar-bg-color); 193 | --popover-body-text-color: var(--navbar-text-color); 194 | --popover-outerarrow-color: lightgrey; 195 | --popover-arrow-color: lightgrey; 196 | --popover-bg-color: lightgrey; 197 | --popover-border-color: lightgrey; 198 | 199 | /* Search */ 200 | --search-result-text-lite-color: rgba(0,0,0,1); 201 | 202 | /* Bulk Selection */ 203 | --bulk-selection-text-color: white; 204 | --bulk-selection-highlight-text-color: white; 205 | 206 | /* Accordion */ 207 | --accordion-header-text-color: black; 208 | --accordion-body-bg-color: white; 209 | --accordion-header-collapsed-text-color: black; 210 | --accordion-header-collapsed-bg-color: white; 211 | --accordion-body-border-color: black; 212 | 213 | /* Setting Item */ 214 | --setting-header-text-color: black; 215 | } 216 | -------------------------------------------------------------------------------- /Native Themes/E-Ink/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/E-Ink/preview.jpg -------------------------------------------------------------------------------- /Native Themes/Light/light.css: -------------------------------------------------------------------------------- 1 | /* A bare minimum starting place for a light theme of Kavita, updated as of v0.7.14 by majora2007 */ 2 | :root .bg-light { 3 | --color-scheme: light; 4 | --theme-color: white; 5 | --tile-color: white; 6 | --bs-body-bg: white; 7 | --body-text-color: black; 8 | --btn-icon-filter: none; 9 | 10 | /** Inputs **/ 11 | --input-bg-color: #fff; 12 | --input-bg-readonly-color: lightgrey; 13 | --input-text-color: black; 14 | 15 | /** Dropdown/Action Menu **/ 16 | --dropdown-item-bg-color: white; 17 | --dropdown-item-text-color: black; 18 | 19 | /** Tabs **/ 20 | --nav-tab-text-color: black; 21 | --nav-link-text-color: black; 22 | --nav-tab-hover-border-bottom: white; 23 | 24 | /** Tag Badge **/ 25 | --tagbadge-border-color: lightgrey; 26 | 27 | /** Badge **/ 28 | --badge-text-color: black; 29 | 30 | /** Side Nav **/ 31 | --side-nav-bg-color: white; 32 | --side-nav-mobile-bg-color: white; 33 | --side-nav-hover-text-color: var(--primary-color); 34 | --side-nav-hover-bg-color: lightgrey; 35 | --side-nav-color: black; 36 | --side-nav-text-color: black; 37 | --side-nav-active-bg-color: white; 38 | --side-nav-item-active-text-color: var(--primary-color); 39 | 40 | /** List items **/ 41 | --list-group-item-bg-color: lightgrey; 42 | --list-group-item-text-color: white; 43 | --list-group-hover-bg-color: white; 44 | --list-group-hover-text-color: var(--primary-color); 45 | --list-group-active-border-color: var(--primary-color); 46 | --list-group-item-text-color: black; 47 | 48 | /** Popover **/ 49 | --popover-body-bg-color: lightgrey; 50 | --popover-body-text-color: black; 51 | 52 | /** Pagination (TODO) **/ 53 | 54 | /** Accordion **/ 55 | --accordion-header-bg-color: white; 56 | --accordion-body-bg-color: white; 57 | --accordion-body-text-color: black; 58 | --accordion-header-collapsed-text-color: black; 59 | --accordion-header-collapsed-bg-color: lightgrey; 60 | --accordion-button-focus-border-color: black; 61 | --accordion-active-body-bg-color: white; 62 | 63 | /** Breadcrumb **/ 64 | --breadcrumb-bg-color: lightgrey; 65 | --breadcrumb-item-text-color: black; 66 | 67 | /** Global **/ 68 | --hr-color: black; 69 | --accent-bg-color: lightgrey; 70 | --accent-text-color: black; 71 | --text-muted-color: grey; 72 | 73 | /** Card **/ 74 | --card-bg-color: white; 75 | --card-text-color: black; 76 | 77 | /** Carousel **/ 78 | --carousel-btn-color: black; 79 | 80 | /** Drawer **/ 81 | --drawer-bg-color: white; 82 | --drawer-text-color: black; 83 | 84 | /** Event Widget **/ 85 | --event-widget-bg-color: white; 86 | --event-widget-item-bg-color: white; 87 | --event-widget-text-color: black; 88 | --event-widget-item-border-color: black; 89 | --event-widget-border-color: black; 90 | 91 | /** Review Card **/ 92 | --review-spoiler-bg-color: white; 93 | --review-spoiler-text-color: black; 94 | 95 | 96 | } 97 | -------------------------------------------------------------------------------- /Native Themes/Light/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/Light/preview.png -------------------------------------------------------------------------------- /Native Themes/No-Colorscape/no-colorscape.css: -------------------------------------------------------------------------------- 1 | :root .bg-no-colorscape { 2 | --colorscape-enabled: false; 3 | } -------------------------------------------------------------------------------- /Native Themes/No-Colorscape/preview-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/No-Colorscape/preview-1.png -------------------------------------------------------------------------------- /Native Themes/No-Colorscape/preview-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/No-Colorscape/preview-2.png -------------------------------------------------------------------------------- /Native Themes/Nord/nord.css: -------------------------------------------------------------------------------- 1 | :root .bg-nord { 2 | --theme-color: #81a1c1; 3 | --color-scheme: dark; 4 | --primary-color: #81a1c1; 5 | --primary-color-dark-shade: #3b4252; 6 | --primary-color-darker-shade: #434c5e; 7 | --primary-color-darkest-shade: #4c566a; 8 | --error-color: #bf616a; 9 | --bs-body-bg: #2e3440; 10 | --body-text-color: #eceff4; 11 | --btn-icon-filter: invert(1) grayscale(100%) brightness(200%); 12 | 13 | /* Scrollbar */ 14 | --primary-color-scrollbar: rgba(94, 129, 172, 0.75); 15 | 16 | /* Navbar */ 17 | --navbar-bg-color: #3b4252; 18 | --navbar-text-color: #eceff4; 19 | --navbar-fa-icon-color: #eceff4; 20 | --navbar-btn-hover-outline-color: rgba(236, 239, 244, 1); 21 | 22 | /* Side Nav */ 23 | --side-nav-bg-color: rgba(59, 66, 82, 0.4); 24 | --side-nav-mobile-bg-color: #3b4252; 25 | --side-nav-openclose-transition: 0.15s ease-in-out; 26 | --side-nav-box-shadow: rgba(76, 86, 106, 0.5); 27 | --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%); 28 | --side-nav-hover-text-color: #eceff4; 29 | --side-nav-hover-bg-color: #81a1c1; 30 | --side-nav-color: #eceff4; 31 | --side-nav-border-radius: 5px; 32 | --side-nav-border: none; 33 | --side-nav-border-closed: none; 34 | --side-nav-border-transition: 0.5s ease-in-out; 35 | --side-nav-companion-bar-transistion: 0.15s linear; 36 | --side-nav-bg-color-transition: 0.5s ease-in-out; 37 | --side-nav-closed-bg-color: transparent; 38 | --side-nav-item-active-color: var(--primary-color); 39 | --side-nav-item-active-text-color: #eceff4; 40 | --side-nav-active-bg-color: #81a1c1; 41 | --side-nav-overlay-color: #88c0d0; 42 | 43 | /* Inputs */ 44 | --input-bg-color: #434c5e; 45 | --input-bg-readonly-color: rgba(94, 129, 172, 0.5); 46 | --input-focused-border-color: #e5e9f0; 47 | --input-text-color: #fff; 48 | --input-placeholder-color: #d8dee9; 49 | --input-border-color: #e5e9f0; 50 | --input-focus-boxshadow-color: rgb(229, 233, 240 / 50%); 51 | --input-range-color: var(--primary-color); 52 | --input-range-active-color: var(--primary-color-darker-shade); 53 | 54 | /* Buttons */ 55 | --btn-focus-boxshadow-color: rgb(229, 233, 240 / 50%); 56 | --btn-primary-text-color: #eceff4; 57 | --btn-primary-bg-color: var(--primary-color); 58 | --btn-primary-border-color: var(--primary-color); 59 | --btn-primary-hover-text-color: #eceff4; 60 | --btn-primary-hover-bg-color: var(--primary-color-darker-shade); 61 | --btn-primary-hover-border-color: var(--primary-color-darker-shade); 62 | --btn-alt-bg-color: #424c72; 63 | --btn-alt-border-color: #444f75; 64 | --btn-alt-hover-bg-color: #3b4466; 65 | --btn-alt-focus-bg-color: #343c59; 66 | --btn-alt-focus-boxshadow-color: rgb(229, 233, 240 / 50%); 67 | --btn-fa-icon-color: #d8dee9; 68 | --btn-disabled-bg-color: #434c5e; 69 | --btn-disabled-text-color: #eceff4; 70 | --btn-disabled-border-color: #6c757d; 71 | 72 | /* Nav */ 73 | --nav-tab-border-color: rgba(143, 188, 187, 0.7); 74 | --nav-tab-text-color: var(--body-text-color); 75 | --nav-tab-bg-color: var(--primary-color); 76 | --nav-tab-hover-border-color: var(--primary-color); 77 | --nav-tab-active-text-color: #eceff4; 78 | --nav-tab-border-hover-color: transparent; 79 | --nav-tab-hover-text-color: var(--body-text-color); 80 | --nav-tab-hover-bg-color: transparent; 81 | --nav-tab-border-top: rgba(143, 188, 187, 0.7); 82 | --nav-tab-border-left: rgba(143, 188, 187, 0.7); 83 | --nav-tab-border-bottom: rgba(143, 188, 187, 0.7); 84 | --nav-tab-border-right: rgba(143, 188, 187, 0.7); 85 | --nav-tab-hover-border-top: rgba(143, 188, 187, 0.7); 86 | --nav-tab-hover-border-left: rgba(143, 188, 187, 0.7); 87 | --nav-tab-hover-border-bottom: var(--bs-body-bg); 88 | --nav-tab-hover-border-right: rgba(143, 188, 187, 0.7); 89 | --nav-tab-active-hover-bg-color: var(--primary-color); 90 | 91 | --nav-link-bg-color: var(--primary-color); 92 | --nav-link-active-text-color: #eceff4; 93 | --nav-link-text-color: #eceff4; 94 | 95 | --nav-header-text-color: #eceff4; 96 | --nav-header-bg-color: rgb(129, 161, 193); 97 | 98 | /* Toasts */ 99 | --toast-success-bg-color: rgba(163, 190, 140, 0.9); 100 | --toast-error-bg-color: #bf616a; 101 | --toast-info-bg-color: #ebcb8b; 102 | --toast-warning-bg-color: #d08770; 103 | 104 | /* Checkboxes */ 105 | --checkbox-checked-bg-color: var(--primary-color); 106 | --checkbox-border-color: var(--input-focused-border-color); 107 | --checkbox-focus-border-color: var(--primary-color); 108 | --checkbox-focus-boxshadow-color: rgb(229, 233, 240 / 50%); 109 | 110 | /* Tagbadge */ 111 | --tagbadge-border-color: rgba(129, 161, 193, 0.125); 112 | --tagbadge-text-color: var(--body-text-color); 113 | --tagbadge-bg-color: var(--nav-tab-hover-bg-color); 114 | --tagbadge-filled-border-color: rgba(129, 161, 193, 0.125); 115 | --tagbadge-filled-text-color: var(--body-text-color); 116 | --tagbadge-filled-bg-color: var(--primary-color); 117 | 118 | /* List items */ 119 | --list-group-item-text-color: var(--body-text-color); 120 | --list-group-item-bg-color: #434c5e; 121 | --list-group-item-border-color: rgba(59, 66, 82, 0.125); 122 | --list-group-hover-text-color: #eceff4; 123 | --list-group-hover-bg-color: rgb(129, 161, 193); 124 | --list-group-active-border-color: none; 125 | 126 | /* Popover */ 127 | --popover-body-bg-color: var(--navbar-bg-color); 128 | --popover-body-text-color: var(--navbar-text-color); 129 | --popover-outerarrow-color: transparent; 130 | --popover-arrow-color: transparent; 131 | --popover-bg-color: #2e3440; 132 | --popover-border-color: #2e3440; 133 | 134 | /* Pagination */ 135 | --pagination-active-link-border-color: var(--primary-color); 136 | --pagination-active-link-bg-color: var(--primary-color); 137 | --pagination-active-link-text-color: #eceff4; 138 | --pagination-link-border-color: rgba(59, 66, 82, 0.125); 139 | --pagination-link-text-color: #eceff4; 140 | --pagination-link-bg-color: rgba(46, 52, 64, 0.5); 141 | --pagination-focus-border-color: var(--primary-color); 142 | --pagination-link-hover-color: var(--primary-color); 143 | 144 | /* Progress */ 145 | --progress-striped-animated-color: linear-gradient( 146 | 45deg, 147 | rgba(136, 192, 208, 0.75) 25%, 148 | rgba(143, 188, 187, 0.75) 25%, 149 | rgba(143, 188, 187, 0.75) 50%, 150 | rgba(136, 192, 208, 0.75) 50%, 151 | rgba(136, 192, 208, 0.75) 75%, 152 | rgba(143, 188, 187, 0.75) 75%, 153 | rgba(143, 188, 187, 0.75) 154 | ); 155 | --progress-bg-color: var(--nav-header-bg-color); 156 | --progress-bar-color: var(--primary-color-dark-shade); 157 | 158 | /* Dropdown */ 159 | --dropdown-item-hover-text-color: #eceff4; 160 | --dropdown-item-hover-bg-color: var(--primary-color-dark-shade); 161 | --dropdown-item-text-color: var(--navbar-text-color); 162 | --dropdown-item-bg-color: var(--navbar-bg-color); 163 | --dropdown-overlay-color: rgba(76, 86, 106, 0.5); 164 | 165 | /* Accordion */ 166 | --accordion-header-text-color: #eceff4; 167 | --accordion-header-bg-color: rgba(94, 129, 172, 0.9); 168 | --accordion-body-bg-color: rgba(94, 129, 172, 0.75); 169 | --accordion-body-border-color: rgba(59, 66, 82, 0.75); 170 | --accordion-body-text-color: var(--body-text-color); 171 | --accordion-header-collapsed-text-color: #eceff4; 172 | --accordion-header-collapsed-bg-color: #3b4252; 173 | --accordion-button-focus-border-color: unset; 174 | --accordion-button-focus-box-shadow: unset; 175 | --accordion-active-body-bg-color: #3b4252; 176 | 177 | /* Breadcrumb */ 178 | --breadcrumb-bg-color: #81a1c1; 179 | --breadcrumb-item-text-color: var(--body-text-color); 180 | 181 | /* Rating star */ 182 | --ratingstar-color: #ebcb8b; 183 | --ratingstar-star-empty: #4c566a; 184 | --ratingstar-star-filled: var(--primary-color); 185 | 186 | /* Global */ 187 | --hr-color: rgba(59, 66, 82, 0.125); 188 | --accent-bg-color: rgba(46, 52, 64, 0.5); 189 | --accent-text-color: #d8dee9; 190 | --grid-breakpoints-xs: $grid-breakpoint-xs; 191 | --grid-breakpoints-sm: $grid-breakpoint-sm; 192 | --grid-breakpoints-md: $grid-breakpoint-md; 193 | --grid-breakpoints-lg: $grid-breakpoint-lg; 194 | --grid-breakpoints-xl: $grid-breakpoint-xl; 195 | 196 | /* Card */ 197 | --card-bg-color: rgba(59, 66, 82, 0.5); 198 | --card-text-color: var(--body-text-color); 199 | --card-border-width: 0 1px 1px 1px; 200 | --card-border-style: solid; 201 | --card-border-color: transparent; 202 | --card-progress-bar-color: var(--primary-color); 203 | --card-overlay-bg-color: rgba(76, 86, 106, 0); 204 | --card-overlay-hover-bg-color: rgba(76, 86, 106, 0.2); 205 | 206 | /* Slider */ 207 | --slider-text-color: #eceff4; 208 | 209 | /* Manga Reader */ 210 | --manga-reader-overlay-filter: blur(10px); 211 | --manga-reader-overlay-bg-color: rgba(76, 86, 106, 0.5); 212 | --manga-reader-overlay-text-color: #eceff4; 213 | --manga-reader-bg-color: #2e3440; 214 | --manga-reader-next-highlight-bg-color: #81a1c1; 215 | --manga-reader-prev-highlight-bg-color: #8fbcbb; 216 | 217 | /* Radios */ 218 | --radio-accent-color: var(--primary-color); 219 | --radio-hover-accent-color: var(--primary-color); 220 | --radio-focus-boxshadow-color: rgb(229, 233, 240 / 50%); 221 | 222 | /* Carousel */ 223 | --carousel-header-text-color: var(--body-text-color); 224 | --carousel-header-text-decoration: none; 225 | --carousel-hover-header-text-decoration: none; 226 | 227 | /** Drawer */ 228 | --drawer-background-color: #2e3440; 229 | --drawer-bg-color: #3b4252; 230 | --drawer-text-color: #eceff4; 231 | 232 | /** Event Widget */ 233 | --event-widget-bg-color: rgb(46, 52, 64); 234 | --event-widget-item-bg-color: rgb(46, 52, 64); 235 | --event-widget-text-color: var(--body-text-color); 236 | --event-widget-item-border-color: #434c5e; 237 | --event-widget-border-color: rgba(46, 52, 64, 0.5); 238 | 239 | /* Search */ 240 | --search-result-text-lite-color: initial; 241 | 242 | /* Bulk Selection */ 243 | --bulk-selection-text-color: var(--navbar-text-color); 244 | --bulk-selection-highlight-text-color: var(--primary-color); 245 | 246 | /* Card list */ 247 | --card-list-item-bg-color: linear-gradient( 248 | 180deg, 249 | rgba(76, 86, 106, 0.15) 0%, 250 | rgba(76, 86, 106, 0.15) 1%, 251 | rgba(76, 86, 106, 0) 100% 252 | ); 253 | } 254 | 255 | .logo { 256 | filter: hue-rotate(76deg) brightness(119%) saturate(60%); 257 | } 258 | 259 | .badge { 260 | filter: hue-rotate(76deg) brightness(119%) saturate(60%); 261 | } 262 | 263 | .btn-outline-primary { 264 | --bs-btn-color: var(--primary-color) !important; 265 | --bs-btn-border-color: var(--primary-color) !important; 266 | --bs-btn-hover-bg: var(--primary-color-darker-shade) !important; 267 | --bs-btn-hover-border-color: var(--primary-color-darker-shade) !important; 268 | --bs-btn-active-bg: var(--primary-color-darkest-shade) !important; 269 | --bs-btn-active-border-color: var(--primary-color-darkest-shade) !important; 270 | --bs-btn-disabled-color: #434c5e !important; 271 | --bs-btn-disabled-border-color: #6c757d !important; 272 | } 273 | -------------------------------------------------------------------------------- /Native Themes/Nord/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/Nord/preview.png -------------------------------------------------------------------------------- /Native Themes/Overseerr/overseerr.css: -------------------------------------------------------------------------------- 1 | :root .bg-overseerr { 2 | 3 | /* Main Colors Variables*/ 4 | --color-scheme: dark; 5 | --primary-color: #935af5; 6 | --primary-color-dark-shade: #7E3AF3; 7 | --primary-color-darker-shade: #6A1BF1; 8 | --primary-color-darkest-shade: #5A0DDD; 9 | --error-color: #b32326; 10 | --bs-body-bg: #111827; 11 | --body-text-color: #ffffff; 12 | --btn-icon-filter: invert(1) grayscale(100%) brightness(200%); 13 | 14 | /* Scrollbar */ 15 | --primary-color-scrollbar: rgba(113, 72, 193, .75); 16 | 17 | /* Navbar */ 18 | --navbar-bg-color: #171e2d; 19 | --navbar-text-color: #ffffff; 20 | --navbar-fa-icon-color: #ffffff; 21 | --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1); 22 | 23 | /* Side Nav */ 24 | --side-nav-bg-color: rgba(30, 39, 53, .85); 25 | --side-nav-mobile-bg-color: rgba(30, 39, 53, .90); 26 | --side-nav-openclose-transition: .15s ease-in-out; 27 | --side-nav-box-shadow: rgba(0, 0, 0, .5); 28 | --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%); 29 | --side-nav-hover-text-color: #ffffff; 30 | --side-nav-hover-bg-color: rgba(147, 90, 245, .85); 31 | --side-nav-color: #ffffff; 32 | --side-nav-border-radius: 5px; 33 | --side-nav-border: rgb(55, 65, 81); 34 | --side-nav-border-closed: none; 35 | --side-nav-border-transition: .5s ease-in-out; 36 | --side-nav-companion-bar-transistion: .15s linear; 37 | --side-nav-bg-color-transition: .5s ease-in-out; 38 | --side-nav-closed-bg-color: transparent; 39 | --side-nav-item-active-color: #653da8; 40 | --side-nav-item-active-text-color: #ffffff; 41 | --side-nav-active-bg-color: rgb(147, 90, 245); 42 | --side-nav-overlay-color: rgba(30, 39, 53, .90); 43 | 44 | /* Inputs */ 45 | --input-bg-color: #374151; 46 | --input-bg-readonly-color: rgba(146, 88, 244, .5); 47 | --input-focused-border-color: #ccc; 48 | --input-text-color: #fff; 49 | --input-placeholder-color: #aeaeae; 50 | --input-border-color: #ccc; 51 | --input-focus-boxshadow-color: rgb(255 255 255 / 50%); 52 | --input-range-color: var(--primary-color); 53 | --input-range-active-color: var(--primary-color-darker-shade); 54 | 55 | /* Buttons */ 56 | --btn-focus-boxshadow-color: rgb(255 255 255 / 50%); 57 | --btn-primary-text-color: #ffffff; 58 | --btn-primary-bg-color: var(--primary-color); 59 | --btn-primary-border-color: var(--primary-color-dark-shade); 60 | --btn-primary-hover-text-color: #ffffff; 61 | --btn-primary-hover-bg-color: var(--primary-color-dark-shade); 62 | --btn-primary-hover-border-color: #5a54ff; 63 | --btn-alt-bg-color: #424c72; 64 | --btn-alt-border-color: #444f75; 65 | --btn-alt-hover-bg-color: #3b4466; 66 | --btn-alt-focus-bg-color: #343c59; 67 | --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%); 68 | --btn-fa-icon-color: #ffffff; 69 | --btn-disabled-bg-color: #111827; 70 | --btn-disabled-text-color: #ffffff; 71 | --btn-disabled-border-color: #6c757d; 72 | 73 | /* Nav */ 74 | --nav-tab-border-color: rgba(147, 90, 245, .7); 75 | --nav-tab-text-color: var(--body-text-color); 76 | --nav-tab-bg-color: var(--primary-color); 77 | --nav-tab-hover-border-color: var(--primary-color); 78 | --nav-tab-active-text-color: #ffffff; 79 | --nav-tab-border-hover-color: transparent; 80 | --nav-tab-hover-text-color: var(--body-text-color); 81 | --nav-tab-hover-bg-color: transparent; 82 | --nav-tab-border-top: rgba(147, 90, 245, .7); 83 | --nav-tab-border-left: rgba(147, 90, 245, .7); 84 | --nav-tab-border-bottom: rgba(147, 90, 245, .7); 85 | --nav-tab-border-right: rgba(147, 90, 245, .7); 86 | --nav-tab-hover-border-top: rgba(147, 90, 245, .7); 87 | --nav-tab-hover-border-left: rgba(147, 90, 245, .7); 88 | --nav-tab-hover-border-bottom: var(--bs-body-bg); 89 | --nav-tab-hover-border-right: rgba(147, 90, 245, .7); 90 | --nav-tab-active-hover-bg-color: var(--primary-color); 91 | 92 | --nav-link-bg-color: var(--primary-color); 93 | --nav-link-active-text-color: #ffffff; 94 | --nav-link-text-color: #ffffff; 95 | 96 | --nav-header-text-color: #ffffff; 97 | --nav-header-bg-color: rgb(22, 27, 34); 98 | 99 | /* Toasts */ 100 | --toast-success-bg-color: rgba(146, 88, 244, .9); 101 | --toast-error-bg-color: #b32326; 102 | --toast-info-bg-color: #9258f4; 103 | --toast-warning-bg-color: #be940e; 104 | 105 | /* Checkboxes */ 106 | --checkbox-checked-bg-color: var(--primary-color); 107 | --checkbox-border-color: var(--input-focused-border-color); 108 | --checkbox-focus-border-color: var(--primary-color); 109 | --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%); 110 | 111 | /* Tagbadge */ 112 | --tagbadge-border-color: rgba(239, 239, 239, .125); 113 | --tagbadge-text-color: var(--body-text-color); 114 | --tagbadge-bg-color: var(--nav-tab-hover-bg-color); 115 | --tagbadge-filled-border-color: rgba(239, 239, 239, .125); 116 | --tagbadge-filled-text-color: var(--body-text-color); 117 | --tagbadge-filled-bg-color: var(--primary-color); 118 | 119 | /* List items */ 120 | --list-group-item-text-color: var(--body-text-color); 121 | --list-group-item-bg-color: #111827; 122 | --list-group-item-border-color: rgba(239, 239, 239, .125); 123 | --list-group-hover-text-color: #ffffff; 124 | --list-group-hover-bg-color: rgb(22, 27, 34); 125 | --list-group-active-border-color: none; 126 | 127 | /* Popover */ 128 | --popover-body-bg-color: var(--navbar-bg-color); 129 | --popover-body-text-color: var(--navbar-text-color); 130 | --popover-outerarrow-color: transparent; 131 | --popover-arrow-color: transparent; 132 | --popover-bg-color: black; 133 | --popover-border-color: black; 134 | 135 | /* Pagination */ 136 | --pagination-active-link-border-color: var(--primary-color); 137 | --pagination-active-link-bg-color: var(--primary-color); 138 | --pagination-active-link-text-color: #ffffff; 139 | --pagination-link-border-color: rgba(68, 71, 90, .125); 140 | --pagination-link-text-color: #ffffff; 141 | --pagination-link-bg-color: rgba(1, 4, 9, .5); 142 | --pagination-focus-border-color: var(--primary-color); 143 | --pagination-link-hover-color: var(--primary-color); 144 | 145 | /* Progress */ 146 | --progress-striped-animated-color: linear-gradient(45deg, rgba(205, 91, 255, .75) 25%, rgba(147, 90, 245, .75) 25%, rgba(147, 90, 245, .75) 50%, rgba(205, 91, 255, .75) 50%, rgba(205, 91, 255, .75) 75%, rgba(147, 90, 245, .75) 75%, rgba(147, 90, 245, .75)); 147 | --progress-bg-color: var(--nav-header-bg-color); 148 | --progress-bar-color: var(--primary-color-dark-shade); 149 | 150 | 151 | /* Dropdown */ 152 | --dropdown-item-hover-text-color: #ffffff; 153 | --dropdown-item-hover-bg-color: var(--primary-color-dark-shade); 154 | --dropdown-item-text-color: var(--navbar-text-color); 155 | --dropdown-item-bg-color: var(--navbar-bg-color); 156 | --dropdown-overlay-color: rgba(0, 0, 0, .5); 157 | 158 | /* Accordion */ 159 | --accordion-header-text-color: #ffffff; 160 | --accordion-header-bg-color: rgba(1104, 59, 179, .9); 161 | --accordion-body-bg-color: rgba(146, 88, 244, .75); 162 | --accordion-body-border-color: rgba(68, 71, 90, .75); 163 | --accordion-body-text-color: var(--body-text-color); 164 | --accordion-header-collapsed-text-color: #ffffff; 165 | --accordion-header-collapsed-bg-color: #171e2d; 166 | --accordion-button-focus-border-color: unset; 167 | --accordion-button-focus-box-shadow: unset; 168 | --accordion-active-body-bg-color: #171e2d; 169 | 170 | /* Breadcrumb */ 171 | --breadcrumb-bg-color: #292d32; 172 | --breadcrumb-item-text-color: var(--body-text-color); 173 | 174 | /* Rating star */ 175 | --ratingstar-color: 146, 88, 244; 176 | --ratingstar-star-empty: #b0c4de; 177 | --ratingstar-star-filled: var(--primary-color); 178 | 179 | /* Global */ 180 | --hr-color: rgba(239, 239, 239, .125); 181 | --accent-bg-color: rgba(1, 4, 9, .5); 182 | --accent-text-color: lightgrey; 183 | --grid-breakpoints-xs: $grid-breakpoint-xs; 184 | --grid-breakpoints-sm: $grid-breakpoint-sm; 185 | --grid-breakpoints-md: $grid-breakpoint-md; 186 | --grid-breakpoints-lg: $grid-breakpoint-lg; 187 | --grid-breakpoints-xl: $grid-breakpoint-xl; 188 | --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif; 189 | --brand-font-family: "Spartan", sans-serif; 190 | 191 | /* Card */ 192 | --card-bg-color: rgba(29, 37, 51, 0.5); 193 | --card-text-color: var(--body-text-color); 194 | --card-border-width: 2px 2px 2px 2px; 195 | --card-border-style: solid; 196 | --card-border-color: rgba(142, 145, 149, 0.1); 197 | --card-progress-bar-color: #8153d8; 198 | --card-overlay-bg-color: rgba(0, 0, 0, 0); 199 | --card-overlay-hover-bg-color: rgba(0, 0, 0, .20); 200 | 201 | /* Slider */ 202 | --slider-text-color: #ffffff; 203 | 204 | /* Manga Reader */ 205 | --manga-reader-overlay-filter: blur(10px); 206 | --manga-reader-overlay-bg-color: rgba(0, 0, 0, .5); 207 | --manga-reader-overlay-text-color: #ffffff; 208 | --manga-reader-bg-color: black; 209 | --manga-reader-next-highlight-bg-color: rgba(65, 105, 225, .5); 210 | --manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, .5); 211 | 212 | /* Radios */ 213 | --radio-accent-color: var(--primary-color); 214 | --radio-hover-accent-color: var(--primary-color); 215 | --radio-focus-boxshadow-color: rgb(255 255 255 / 50%); 216 | 217 | /* Carousel */ 218 | --carousel-header-text-color: var(--body-text-color); 219 | --carousel-header-text-decoration: none; 220 | --carousel-hover-header-text-decoration: none; 221 | 222 | /** Drawer */ 223 | --drawer-background-color: black; 224 | --drawer-bg-color: #171e2d; 225 | --drawer-text-color: #ffffff; 226 | 227 | /** Event Widget */ 228 | --event-widget-bg-color: rgb(1, 4, 9); 229 | --event-widget-item-bg-color: rgb(1, 4, 9); 230 | --event-widget-text-color: var(--body-text-color); 231 | --event-widget-item-border-color: rgba(53, 53, 53, .5); 232 | --event-widget-border-color: rgba(1, 4, 9, .5); 233 | 234 | /* Search */ 235 | --search-result-text-lite-color: initial; 236 | 237 | /* Bulk Selection */ 238 | --bulk-selection-text-color: var(--navbar-text-color); 239 | --bulk-selection-highlight-text-color: var(--primary-color); 240 | 241 | /* Card list */ 242 | --card-list-item-bg-color: linear-gradient(180deg, rgba(26, 26, 26, 0.15) 0%, rgba(26, 26, 26, .15) 1%, rgba(26, 26, 26, 0) 100%); 243 | 244 | } 245 | 246 | /* Make the Kavita fit the Theme */ 247 | /*.navbar-brand { 248 | color: #8153d8 !important; 249 | }*/ 250 | 251 | /* Otherwise Progressbar stays green, bug is reported. */ 252 | .progress-bar { 253 | background-color: #8153d8 !important; 254 | } -------------------------------------------------------------------------------- /Native Themes/Overseerr/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/Overseerr/preview.jpg -------------------------------------------------------------------------------- /Native Themes/Solarized/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Native Themes/Solarized/preview.jpg -------------------------------------------------------------------------------- /Native Themes/Solarized/solarized.css: -------------------------------------------------------------------------------- 1 | :root .bg-solarized { 2 | 3 | /* Base Colors*/ 4 | --base03: #002b36; 5 | --base02: rgb(7, 54, 66); 6 | --base01: #586e75; 7 | --base00: #657b83; 8 | --base0: #839496; 9 | --base1: #93a1a1; 10 | --base2: #eee8d5; 11 | --base3: #fdf6e3; 12 | --yellow: #b58900; 13 | --orange: #cb4b16; 14 | --red: #dc322f; 15 | --magenta: #d33682; 16 | --violet: rgb(108, 113, 196); 17 | --blue: #268bd2; 18 | --cyan: #2aa198; 19 | --green: #859900; 20 | 21 | 22 | /* Main Colors Variables*/ 23 | --color-scheme: dark; 24 | --primary-color: #268bd2; 25 | --primary-color-dark-shade: #227DBD; 26 | --primary-color-darker-shade: #1E6FA8; 27 | --primary-color-darkest-shade: #1A6193; 28 | --error-color: #dc322f; 29 | --bs-body-bg: #002b36; 30 | --body-text-color: #fdf6e3; 31 | --btn-icon-filter: invert(1) grayscale(100%) brightness(200%); 32 | 33 | 34 | /* Scrollbar */ 35 | --primary-color-scrollbar: rgba(113, 72, 193, .75); 36 | 37 | /* Navbar */ 38 | --navbar-bg-color: rgb(7, 54, 66); 39 | --navbar-text-color: #fdf6e3; 40 | --navbar-fa-icon-color: #fdf6e3; 41 | --navbar-btn-hover-outline-color: rgba(255, 255, 255, 1); 42 | 43 | /* Side Nav */ 44 | --side-nav-bg-color: rgba(7, 54, 66, .85); 45 | --side-nav-mobile-bg-color: rgba(7, 54, 66, .90); 46 | --side-nav-openclose-transition: .15s ease-in-out; 47 | --side-nav-box-shadow: rgba(0, 0, 0, .5); 48 | --side-nav-mobile-box-shadow: 3px 0em 5px 10em rgb(0 0 0 / 50%); 49 | --side-nav-hover-text-color: #fdf6e3; 50 | --side-nav-hover-bg-color: rgba(108, 113, 196, .85); 51 | --side-nav-color: #fdf6e3; 52 | --side-nav-border-radius: 5px; 53 | --side-nav-border: rgb(55, 65, 81); 54 | --side-nav-border-closed: none; 55 | --side-nav-border-transition: .5s ease-in-out; 56 | --side-nav-companion-bar-transistion: .15s linear; 57 | --side-nav-bg-color-transition: .5s ease-in-out; 58 | --side-nav-closed-bg-color: transparent; 59 | --side-nav-item-active-color: #653da8; 60 | --side-nav-item-active-text-color: #fdf6e3; 61 | --side-nav-active-bg-color: rgb(108, 113, 196); 62 | --side-nav-overlay-color: rgba(30, 39, 53, .90); 63 | 64 | /* Inputs */ 65 | --input-bg-color: #374151; 66 | --input-bg-readonly-color: rgba(146, 88, 244, .5); 67 | --input-focused-border-color: #ccc; 68 | --input-text-color: #fff; 69 | --input-placeholder-color: #aeaeae; 70 | --input-border-color: #ccc; 71 | --input-focus-boxshadow-color: rgb(255 255 255 / 50%); 72 | --input-range-color: var(--primary-color); 73 | --input-range-active-color: var(--primary-color-darker-shade); 74 | 75 | /* Buttons */ 76 | --btn-focus-boxshadow-color: rgb(255 255 255 / 50%); 77 | --btn-primary-text-color: #fdf6e3; 78 | --btn-primary-bg-color: #268bd2; 79 | --btn-primary-border-color: #268bd2; 80 | --btn-primary-hover-text-color: #fdf6e3; 81 | --btn-primary-hover-bg-color: #1b91e5; 82 | --btn-primary-hover-border-color: #1b91e5; 83 | --btn-alt-bg-color: #424c72; 84 | --btn-alt-border-color: #444f75; 85 | --btn-alt-hover-bg-color: #3b4466; 86 | --btn-alt-focus-bg-color: #343c59; 87 | --btn-alt-focus-boxshadow-color: rgb(255 255 255 / 50%); 88 | --btn-fa-icon-color: #fdf6e3; 89 | --btn-disabled-bg-color: #002b36; 90 | --btn-disabled-text-color: #fdf6e3; 91 | --btn-disabled-border-color: #6c757d; 92 | 93 | /* Nav */ 94 | --nav-tab-border-color: rgba(108, 113, 196, .7); 95 | --nav-tab-text-color: var(--body-text-color); 96 | --nav-tab-bg-color: var(--primary-color); 97 | --nav-tab-hover-border-color: var(--primary-color); 98 | --nav-tab-active-text-color: #fdf6e3; 99 | --nav-tab-border-hover-color: transparent; 100 | --nav-tab-hover-text-color: var(--body-text-color); 101 | --nav-tab-hover-bg-color: rgba(27, 145, 229,.7); 102 | --nav-tab-border-top: rgba(108, 113, 196, .7); 103 | --nav-tab-border-left: rgba(108, 113, 196, .7); 104 | --nav-tab-border-bottom: rgba(108, 113, 196, .7); 105 | --nav-tab-border-right: rgba(108, 113, 196, .7); 106 | --nav-tab-hover-border-top: rgba(108, 113, 196, .7); 107 | --nav-tab-hover-border-left: rgba(108, 113, 196, .7); 108 | --nav-tab-hover-border-bottom: var(--bs-body-bg); 109 | --nav-tab-hover-border-right: rgba(108, 113, 196, .7); 110 | --nav-tab-active-hover-bg-color: var(--primary-color); 111 | 112 | --nav-link-bg-color: var(--primary-color); 113 | --nav-link-active-text-color: #fdf6e3; 114 | --nav-link-text-color: #fdf6e3; 115 | 116 | --nav-header-text-color: #fdf6e3; 117 | --nav-header-bg-color: rgb(22, 27, 34); 118 | 119 | /* Toasts */ 120 | --toast-success-bg-color: rgba(146, 88, 244, .9); 121 | --toast-error-bg-color: #dc322f; 122 | --toast-info-bg-color: #6c71c4; 123 | --toast-warning-bg-color: #b58900; 124 | 125 | /* Checkboxes */ 126 | --checkbox-checked-bg-color: var(--primary-color); 127 | --checkbox-border-color: var(--input-focused-border-color); 128 | --checkbox-focus-border-color: var(--primary-color); 129 | --checkbox-focus-boxshadow-color: rgb(255 255 255 / 50%); 130 | 131 | /* Tagbadge */ 132 | --tagbadge-border-color: rgba(239, 239, 239, .125); 133 | --tagbadge-text-color: var(--body-text-color); 134 | --tagbadge-bg-color: var(--nav-tab-hover-bg-color); 135 | --tagbadge-filled-border-color: rgba(239, 239, 239, .125); 136 | --tagbadge-filled-text-color: var(--body-text-color); 137 | --tagbadge-filled-bg-color: var(--primary-color); 138 | 139 | /* List items */ 140 | --list-group-item-text-color: var(--body-text-color); 141 | --list-group-item-bg-color: #002b36; 142 | --list-group-item-border-color: rgba(239, 239, 239, .125); 143 | --list-group-hover-text-color: #fdf6e3; 144 | --list-group-hover-bg-color: rgb(22, 27, 34); 145 | --list-group-active-border-color: none; 146 | 147 | /* Popover */ 148 | --popover-body-bg-color: var(--navbar-bg-color); 149 | --popover-body-text-color: var(--navbar-text-color); 150 | --popover-outerarrow-color: transparent; 151 | --popover-arrow-color: transparent; 152 | --popover-bg-color: black; 153 | --popover-border-color: black; 154 | 155 | /* Pagination */ 156 | --pagination-active-link-border-color: var(--primary-color); 157 | --pagination-active-link-bg-color: var(--primary-color); 158 | --pagination-active-link-text-color: #fdf6e3; 159 | --pagination-link-border-color: rgba(68, 71, 90, .125); 160 | --pagination-link-text-color: #fdf6e3; 161 | --pagination-link-bg-color: rgba(1, 4, 9, .5); 162 | --pagination-focus-border-color: var(--primary-color); 163 | --pagination-link-hover-color: var(--primary-color); 164 | 165 | /* Progress */ 166 | --progress-striped-animated-color: linear-gradient(45deg, rgba(205, 91, 255, .75) 25%, rgba(108, 113, 196, .75) 25%, rgba(108, 113, 196, .75) 50%, rgba(205, 91, 255, .75) 50%, rgba(205, 91, 255, .75) 75%, rgba(108, 113, 196, .75) 75%, rgba(108, 113, 196, .75)); 167 | --progress-bg-color: var(--nav-header-bg-color); 168 | --progress-bar-color: var(--primary-color-dark-shade); 169 | 170 | 171 | /* Dropdown */ 172 | --dropdown-item-hover-text-color: #fdf6e3; 173 | --dropdown-item-hover-bg-color: var(--primary-color-dark-shade); 174 | --dropdown-item-text-color: var(--navbar-text-color); 175 | --dropdown-item-bg-color: var(--navbar-bg-color); 176 | --dropdown-overlay-color: rgba(0, 0, 0, .5); 177 | 178 | /* Accordion */ 179 | --accordion-header-text-color: #fdf6e3; 180 | --accordion-header-bg-color: rgba(108, 113, 196, .9); 181 | --accordion-body-bg-color: rgba(108, 113, 196, .75); 182 | --accordion-body-border-color: rgba(68, 71, 90, .75); 183 | --accordion-body-text-color: var(--body-text-color); 184 | --accordion-header-collapsed-text-color: #fdf6e3; 185 | --accordion-header-collapsed-bg-color: #171e2d; 186 | --accordion-button-focus-border-color: unset; 187 | --accordion-button-focus-box-shadow: unset; 188 | --accordion-active-body-bg-color: #171e2d; 189 | 190 | /* Breadcrumb */ 191 | --breadcrumb-bg-color: #292d32; 192 | --breadcrumb-item-text-color: var(--body-text-color); 193 | 194 | /* Rating star */ 195 | --ratingstar-color: rgb(146, 88, 244); 196 | --ratingstar-star-empty: #b0c4de; 197 | --ratingstar-star-filled: var(--primary-color); 198 | 199 | /* Global */ 200 | --hr-color: rgba(239, 239, 239, .125); 201 | --accent-bg-color: rgba(1, 4, 9, .5); 202 | --accent-text-color: lightgrey; 203 | --grid-breakpoints-xs: $grid-breakpoint-xs; 204 | --grid-breakpoints-sm: $grid-breakpoint-sm; 205 | --grid-breakpoints-md: $grid-breakpoint-md; 206 | --grid-breakpoints-lg: $grid-breakpoint-lg; 207 | --grid-breakpoints-xl: $grid-breakpoint-xl; 208 | --body-font-family: "EBGaramond", "Helvetica Neue", sans-serif; 209 | --brand-font-family: "Spartan", sans-serif; 210 | 211 | /* Card */ 212 | --card-bg-color: rgba(29, 37, 51, 0.5); 213 | --card-text-color: var(--body-text-color); 214 | --card-border-width: 2px 2px 2px 2px; 215 | --card-border-style: solid; 216 | --card-border-color: rgba(142, 145, 149, 0.1); 217 | --card-progress-bar-color: #8153d8; 218 | --card-overlay-bg-color: rgba(0, 0, 0, 0); 219 | --card-overlay-hover-bg-color: rgba(0, 0, 0, .20); 220 | 221 | /* Slider */ 222 | --slider-text-color: #fdf6e3; 223 | 224 | /* Manga Reader */ 225 | --manga-reader-overlay-filter: blur(10px); 226 | --manga-reader-overlay-bg-color: rgba(0, 0, 0, .5); 227 | --manga-reader-overlay-text-color: #fdf6e3; 228 | --manga-reader-bg-color: black; 229 | --manga-reader-next-highlight-bg-color: rgba(65, 105, 225, .5); 230 | --manga-reader-prev-highlight-bg-color: rgba(65, 105, 225, .5); 231 | 232 | /* Radios */ 233 | --radio-accent-color: var(--primary-color); 234 | --radio-hover-accent-color: var(--primary-color); 235 | --radio-focus-boxshadow-color: rgb(255 255 255 / 50%); 236 | 237 | /* Carousel */ 238 | --carousel-header-text-color: var(--body-text-color); 239 | --carousel-header-text-decoration: none; 240 | --carousel-hover-header-text-decoration: none; 241 | 242 | /** Drawer */ 243 | --drawer-background-color: black; 244 | --drawer-bg-color: #171e2d; 245 | --drawer-text-color: #fdf6e3; 246 | 247 | /** Event Widget */ 248 | --event-widget-bg-color: rgb(1, 4, 9); 249 | --event-widget-item-bg-color: rgb(1, 4, 9); 250 | --event-widget-text-color: var(--body-text-color); 251 | --event-widget-item-border-color: rgba(53, 53, 53, .5); 252 | --event-widget-border-color: rgba(1, 4, 9, .5); 253 | 254 | /* Search */ 255 | --search-result-text-lite-color: initial; 256 | 257 | /* Bulk Selection */ 258 | --bulk-selection-text-color: var(--navbar-text-color); 259 | --bulk-selection-highlight-text-color: var(--primary-color); 260 | 261 | 262 | /* Card list */ 263 | --card-list-item-bg-color: linear-gradient(180deg, rgba(26, 26, 26, 0.15) 0%, rgba(26, 26, 26, .15) 1%, rgba(26, 26, 26, 0) 100%); 264 | } 265 | 266 | /* Make the Kavita fit the Theme */ 267 | /*.navbar-brand { 268 | color: #8153d8 !important; 269 | }*/ 270 | 271 | /* Otherwise Progressbar stays green, bug is reported. */ 272 | .progress-bar { 273 | background-color: #5d68b0 !important; 274 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Kavita Themes 2 | This will serve as a central hub to store all community made themes 3 | 4 | **Themes are provided as-is. Any issues with the themes need to be directed to the theme's author.** 5 | 6 | --- 7 | ## Native Themes 8 | | Theme Name | Author | Description | Kavita Compatibility | Preview | Total Installs | 9 | |------------|--------|-----------------------------------------------------|----------------------|---------|----------------| 10 | | Light | [majora2007](https://github.com/majora2007) | A light theme for those that don't like dark themes | 0.7.14 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/Light/preview.png) | | 11 | | Dark-Pre-Overhaul | [majora2007](https://github.com/majora2007) | The dark theme from v0.8.2 for those that don't like the newer dark theme | 0.8.2 | [Pre1](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/Dark-Pre-Overhaul/preview1.png) [Pre2](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/Dark-Pre-Overhaul/preview2.png) | | 12 | | DarkNight | [Elry](https://github.com/ElryWeeb) | A very Dark Theme, for the Darkmode lovers. | 0.7.14 | [Pre1](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/DarkNight/preview1.png) [Pre2](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/DarkNight/preview2.png) | | 13 | | CutePink | [Elry](https://github.com/ElryWeeb) | A cute and soft Pink Theme. | 0.7.14 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/CutePink/preview.png) | | 14 | | Brilliance | [Elry](https://github.com/ElryWeeb) | A modern theme for e-ink devices. | 0.7.14 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/Brilliance/preview.png) | | 15 | | E-Ink | [majora2007](https://github.com/majora2007) | A simplified theme for e-ink devices | 0.8.2 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/E-Ink/preview.jpg) | | 16 | | Nord | [ice45core0](https://github.com/ice45core0) | A dark pastel theme using the Nord color palette | 0.7.14 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/Nord/preview.png) | | 17 | | Dracula | [Matguitarist](https://github.com/matguitarist) | A Dracula inspired theme | 0.7.14 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/Dracula/preview.jpg) | | 18 | | Overseerr | [Matguitarist](https://github.com/matguitarist) | A Overseer inspired theme | 0.7.14 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/Overseerr/preview.jpg) | | 19 | | Aquamarine | [Matguitarist](https://github.com/matguitarist) | An Aquamarine theme | 0.7.14 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/Aquamarine/preview.jpg) | | 20 | | Solarized | [Matguitarist](https://github.com/matguitarist) | A Solarized theme | 0.7.14 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/Solarized/preview.jpg) | | 21 | | DarkPink | [Matguitarist](https://github.com/matguitarist) | A Darkpink theme | 0.7.14 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/DarkPink/preview.jpg) | | 22 | | Battery-Saver-Dark-Mode | [RPLgrime](https://github.com/RPLgrime) | A dark mode with gray text and reduced brightness on images. | 0.8.2 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/Battery-Saver-Dark-Mode/preview.jpg) | | 23 | | No-Colorscape | [RPLgrime](https://github.com/majora2007) | Everything Kavita but with the Colorscape system turned off | 0.8.3 | [Preview 1](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/No-Colorscape/preview-1.png) [Preview 2](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/No-Colorscape/preview-2.png) | | 24 | | Chapter-List-View | [Zeoic](https://github.com/Zeoic) | Changes the chapter card view into a list without thumbnails | 0.8.3 | [Preview](https://github.com/Kareadita/Themes/blob/main/Native%20Themes/Chapter-List-View/preview.png) | | 25 | 26 | ### Native Theme Installation (pre-v0.8.2.0) 27 | 1. Download the `theme-name.css` file. 28 | 2. Place it in the `/config/themes` folder of your [Kavita](https://github.com/Kareadita/Kavita) installation. 29 | 3. Within Kavita, navigate to your user settings and click the Theme tab. 30 | 4. Click the Scan button. 31 | 5. Apply and/or Set Default your newly added theme. 32 | 33 | ### Native Theme Installation (v0.8.2.0+) 34 | 1. In the upper right corner of Kavita, drop down your Username > Settings > Theme tab, then download and apply the desired theme from this repo. 35 | 36 | --- 37 | 38 | ## Style Injected Themes 39 | | Theme Name | Author | Description | Kavita Compatibility | Preview | 40 | |------------|--------|-----------------------------------------------------|----------------------|---------| 41 | | Plex-like | [MrRobotjs](https://github.com/MrRobotjs) | A Plex-inspired theme | ? | [Preview](https://github.com/Kareadita/Themes/blob/main/Style%20Injected%20Themes/Plex-like/preview.png) 42 | | | | | | 43 | 44 | ### Style Injected Theme Installation 45 | 1. Install a style injector extension for your browser, like [xStyle](https://chrome.google.com/webstore/detail/xstyle/hncgkmhphmncjohllpoleelnibpmccpj/related?hl=en) 46 | 2. Download the theme scss/css. 47 | 3. If necessary edit the theme with the domain where your Kavita install is running. 48 | 4. If scss, compile to css using your preferred method. [You can do it online.](https://www.cssportal.com/scss-to-css/) 49 | 5. Install the theme in the style injector extension. 50 | 6. Load/Refresh your Kavita site. 51 | 52 | --- 53 | ## Contributing 54 | 1. Clone the repo. 55 | 2. Create a folder with your theme name in the appropriate top level folder (native or style injected). 56 | 3. Add your `theme-name.css` file inside the created folder with the appropriate filename. 57 | - You can optionally add a preview image with the following format: `preview.ext` (feel free to add multiple showcasing your theme) 58 | 4. Add your theme to the `README.md` table with all fields filled out. Ensure the Theme Name matches the Folder name exactly. 59 | 5. Submit a PR. 60 | 61 | ! Note: Your folder name and theme filename should match for the theme to work correctly in Kavita. 62 | 63 | --- 64 | ## Issues 65 | If you have an issue, raise an Issue with the theme name in the title i.e. `[Light] Side Nav not readable on mobile` and tag the person from the Readme table. 66 | Kavita team does not provide support on any themes, even those created by majora2007. 67 | 68 | If you identify bugs in the themeing, please raise an Issue on the Kavita Github for support or development work. Theme feature requests belong on the Kavita Discussions. 69 | 70 | --- 71 | ## Creating a Theme 72 | Please follow the documentation on our Wiki: https://wiki.kavitareader.com/guides/themes 73 | -------------------------------------------------------------------------------- /Style Injected Themes/Plex-like/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Kareadita/Themes/403405ba0a38c935981511cb438dfbc2647151b1/Style Injected Themes/Plex-like/preview.png --------------------------------------------------------------------------------