Changes the website to a red dark theme. I am not updating this style anymore, use my theme selector and the theme "berserk" for the same color scheme
comick.app (red dark theme) (outdated) by HuynhBrandonC
Details
AuthorHuynhBrandonC
LicenseNo License
Categorycomick.app
Created
Updated
Size15 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Credits to xiggi, I pretty much just copied his violet theme, but added in some more features and also changed the color palette and added in a comment of the color palette at the top. You can use this to change whichever colors you want and make your own color theme, basically just ctrl+h replace all the hex color codes that I commented with your own colors to create your own theme.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name comick.app (red dark theme)
@version 20230929.00.53
@namespace userstyles.world/user/HuynhBrandonC
@description Changes the website to a red dark theme
@author HuynhBrandonC
@license No License
@preprocessor less
@var color color-dark "Dark color" #212121
@var color color-light "Bright color" #303030
==/UserStyle== */
/*
color pallete:
background color: #1c0000
text color (text-400) / scrollbar: #f16f6f
hover state background color: #7b0505
my list text active state / like button active state: rgb(255, 0, 0)
my list text active border color (text-600): #dc2c2c
searchbar: #671e1e
manga scroll background: rgba(28, 0, 0, .8)
my list search background: rgb(44, 25, 25)
comments background color: #4c1212
*/
@-moz-document domain("comick.app") {
body.dark, body[data-theme=dark] {
--aa-text-color-rgb: 183,192,199;
--aa-primary-color-rgb: 255,255,255;
--aa-muted-color-rgb: 255,255,255;
--aa-input-background-color-rgb: 28,0,0;
--aa-background-color-rgb: 28,0,0;
--aa-selected-color-rgb: 103,30,30;
--aa-selected-color-alpha: 0.25;
--aa-description-highlight-background-color-rgb: 255 255 255;
--aa-description-highlight-background-color-alpha: 0.25;
--aa-icon-color-rgb: 119,119,163;
--aa-panel-shadow: inset 1px 1px 0 0 #1c0000,0 3px 8px 0 #1c0000;
--aa-scrollbar-track-background-color-rgb: 103, 30, 30;
--aa-scrollbar-thumb-background-color-rgb: 241,111,111;
}
html:after {
content:'If you are using my "dark red theme" I\'m going to stop updating it and moving over to my new style which is a theme selector and overall better. If you want go install that instead. Thanks ! (using the berserk theme in my theme selector will achieve the same dark red theme if you like this theme) Link to new theme: https://userstyles.world/style/12621/comick-app-color-selector';
visibility: visible;
display: block;
position: absolute;
background-color: red;
padding: 5px;
top: 50px;
left: 50px;
}
.dark .dark\:bg-gray-800 {
--tw-bg-opacity: 1;
background-color: #1c0000;
}
.dark .btn:hover {
/* --tw-bg-opacity: 1; */
background-color: #7b0505;
color: #fff;
}
.dark .btn {
/* --tw-border-opacity: 1; */
border-color: transparent;
/* --tw-bg-opacity: 1; */
background-color: #671e1e;
/* --tw-text-opacity: 1; */
color: #fff;
}
.btn:hover {
/* --tw-bg-opacity: 1; */
background-color: rgb(229 231 235/var(--tw-bg-opacity));
}
.dark .dark\:hover\:bg-gray-600:hover {
/* --tw-bg-opacity: 1; */
background-color: transparent;
color: #fff;
}
.dark .dark\:bg-gray-700 {
/* --tw-bg-opacity: 1; */
background-color: #671e1e;
}
html.dark::-webkit-scrollbar-track {
--tw-bg-opacity: 1;
background-color: #671e1e;
}
html.dark::-webkit-scrollbar-thumb {
--tw-bg-opacity: 1;
background-color: #f16f6f;
}
.dark .dark\:nav-header-dark {
--tw-bg-opacity: 0.85;
background-color: #1c0000;
}
.dark .link {
color: #dc2c2c;
}
.dark .link:hover {
color: #f16f6f;
}
.dark .dark\:bg-gray-750 {
--tw-bg-opacity: 1;
background-color: #671e1e;
}
.dark input[type=email], .dark input[type=number], .dark input[type=password], .dark input[type=text], .dark select, .dark textarea {
--tw-bg-opacity: 1;
background-color: #671e1e;
--tw-text-opacity: 1;
color: rgb(229 231 235/var(--tw-text-opacity));
}
.dark input[type=email], .dark input[type=number], .dark input[type=password], .dark input[type=text], .dark select, .dark textarea:hover {
--tw-bg-opacity: 1;
background-color: #671e1e;
--tw-text-opacity: 1;
color: rgb(229 231 235/var(--tw-text-opacity));
}
a.btn.link.max-w-xs.flex.items-center {
color: #fff;
}
a.btn.link.max-w-xs {
color: #fff;
}
a.relative.grow-0.w-8\/12.flex.justify-center.py-8.md\:py-10.xl\:py-12.px-4.border-r.leading-5.bg-gray-100.hover\:bg-gray-200.dark\:bg-gray-700.dark\:hover\:bg-gray-600.border-gray-600.select-none.text-xl {
background: #1c0000;
}
a.relative.grow-0.w-4\/12.flex.justify-center.py-8.md\:py-10.xl\:py-12.px-4.leading-5.bg-gray-100.hover\:bg-gray-200.dark\:bg-gray-700.dark\:hover\:bg-gray-600.border-gray-600.border-r.select-none.text-lg {
background: #1c0000;
}
a.relative.grow-0.w-4\/12.flex.justify-center.py-8.md\:py-10.xl\:py-12.px-4.leading-5.bg-gray-100.hover\:bg-gray-200.dark\:bg-gray-700.dark\:hover\:bg-gray-600.border-gray-600.border-r.select-none.text-lg:hover {
background: #030114;
}
a.relative.grow-0.w-8\/12.flex.justify-center.py-8.md\:py-10.xl\:py-12.px-4.border-r.leading-5.bg-gray-100.hover\:bg-gray-200.dark\:bg-gray-700.dark\:hover\:bg-gray-600.border-gray-600.select-none.text-xl:hover {
background: #030114;
}
.border-gray-600 {
--tw-border-opacity: 1;
border-color: transparent;
}
.dark .dark\:scrollbox-dark {
background: transparent;
background-repeat: no-repeat;
/* background-color: #1f2937; */
background-size: 100% 20px,100% 20px,100% 7px,100% 7px;
background-attachment: local,local,scroll,scroll;
}
li.text-sm.md\:text-base.ml-1.mt-1.px-2.py-1.rounded.bg-gray-100.dark\:bg-gray-750.cursor-pointer.active\:bg-blue-500.hover\:bg-gray-200.dark\:hover\:bg-gray-700 {
border-radius: 5px;
padding-left: 10px;
padding-right: 10px;
}
.dark .dark\:hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: #671e1e;
}
.dark .dark\:border-gray-700 {
--tw-border-opacity: 1;
border-color: #dc2c2c;
}
.lg\:pb-4 {
padding-bottom: 1rem;
border-radius: 15px;
}
a.ml-3.mt-2.border.rounded-md.px-4.py-2.flex.items-center.justify-center {
color: #671e1e;
border: 1px solid #671e1e;
}
a.ml-3.mt-2.border.rounded-md.px-4.py-2.flex.items-center.justify-center:hover {
color: #fff;
background: rgba(137, 44, 220, 25);
border: 1px solid #dc2c2c;
transition: 0.5s;
}
a.ml-3.mt-2.border.rounded-md.px-4.py-2.w-12.h-12.flex.items-center.justify-center.bg-blue-500.text-gray-300 {
color: #fff;
font-weight: 600;
background: #dc2c2c;
border: 1px solid #dc2c2c;
}
.dark .dark\:text-blue-300 {
--tw-text-opacity: 1;
color: #f16f6f;
}
.dark .dark\:text-gray-600 {
--tw-text-opacity: 1;
color: #f16f6f;
}
.dark .dark\:border-blue-200 {
--tw-border-opacity: 1;
border-color: #dc2c2c;
}
.text-blue-500 {
--tw-text-opacity: 1;
color: #f16f6f;
}
.text-blue-600 {
--darkreader-text--tw-text-opacity: 1;
color: rgb(255, 0, 0) !important;
}
.dark .dark\:hover\:text-gray-200:hover {
--tw-text-opacity: 1;
color: rgb(156 163 175/var(--tw-text-opacity));
}
.lg\:py-7 {
padding-top: 1.75rem;
padding-bottom: 1.75rem;
font-weight: 600;
}
.dark input[type=checkbox] {
--tw-bg-opacity: 1;
background-color: #671e1e;
}
[type=checkbox]:focus, [type=radio]:focus {
outline: 2px solid transparent;
outline-offset: 2px;
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #dc2c2c;
--tw-ring-color: #dc2c2c;
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
}
.space-x-5>:not([hidden])~:not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1.25rem * var(--tw-space-x-reverse));
margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
width: 100px;
}
.p-1.md\:p-3.w-full.\!bg-opacity-80.right-0.bg-gray-200.dark\:bg-gray-700.text-sm.md\:text-base.padding-safe-top {
background: #1c0000;
}
a.flex-1.pl-2.text-blue-700.dark\:text-blue-400.font-semibold.overflow-hidden.text-sm.md\:text-base.link.py-2.truncate {
color: #fff;
}
svg.w-12.h-12.cursor-pointer.hover\:text-blue-500.hover\:brightness-200.active\:brightness-200.active\:animate-ping {
color: #f16f6f;
}
.dark hr {
--tw-border-opacity: 1;
border-color: #dc2c2c;
}
.dark .dark\:border-gray-500 {
--tw-border-opacity: 1;
border-color: #dc2c2c;
}
.dark .dark\:border-gray-600 {
--tw-border-opacity: 1;
border-color: #dc2c2c;
}
::selection {
background-color: #671e1e;
}
.dark .dark\:bg-red-900 {
--tw-bg-opacity: 1;
background-color: rgba(185, 28, 28, .25);
}
.lg\:text-sm {
font-size: .875rem;
line-height: 1.25rem;
background: linear-gradient(to top, #1c0000, transparent);
}
.dark .dark\:hover\:bg-gray-500\/30:hover {
background-color: rgb(3 0 28 / 80%);
}
.dark .dark\:bg-gray-600 {
--tw-bg-opacity: 1;
background-color: #1c0000;
}
.dark .dark\:bg-gray-600:hover {
--tw-bg-opacity: 1;
background-color: #7b0505;
}
.dark input[type=email]:hover, .dark input[type=number]:hover, .dark input[type=password]:hover, .dark input[type=text]:hover, .dark select:hover, .dark textarea:hover {
--tw-bg-opacity: 1;
background-color: #7b0505;
}
.bg-gray-500\/40 {
background-color: hsl(246deg 100% 5%);
}
[type=checkbox]:checked:focus, [type=checkbox]:checked:hover, [type=radio]:checked:focus, [type=radio]:checked:hover {
border-color: transparent;
background-color: #7b0505;
}
.dark .dark\:hover\:text-gray-200:hover {
--tw-text-opacity: 1;
color: #f16f6f;
}
:is(.dark .dark\:hover\:border...