*.archlinux.org Dracula like Theme by sevy2011

/* ==UserStyle==
@name         *.archlinux.org Dracula like Theme
@version      20250408.18.16
@namespace    ?
@description  Used the Dracula color palette to create a dark theme for the Archlinux.org domain (wiki, news, forums).
@license      GNU GPLv3
==/UserStyle== */

@-moz-document domain("wiki.archlinux.org") {
:root {
    --dracula-background:   #282A36;
    --dracula-foreground:   #F8F8F2;
    --dracula-current-line: #44475A;
    --dracula-comment:      #6272A4;
    --dracula-cyan:         #8BE9FD;
    --dracula-green:        #50FA7B;
    --dracula-orange:       #FFB86C;
    --dracula-pink:         #FF79C6;
    --dracula-purple:       #BD93F9;
    --dracula-red:          #FF5555;
    --dracula-yellow:       #F1FA8C;
    
    --dracula-theme-link-color: #5699df;
    --dracula-theme-template-background: #323442;
    
    --body-background-color: var(--dracula-background);
    --content-background-color: var(--dracula-background);
    --content-border-color: var(--dracula-current-line);
    --color-base: color-mix(in srgb, var(--dracula-comment) 40%, var(--dracula-foreground));
    --text-color: var(--dracula-foreground);
    --code-background-color: color-mix(in srgb, var(--dracula-background) 75%, var(--dracula-comment));
    --archwiki-template-message-background-color: color-mix(in srgb, var(--dracula-background) 75%, black);
    --archwiki-template-note-background-color: color-mix(in srgb, var(--archwiki-template-message-background-color) 85%, purple);
    --archwiki-template-tip-background-color: color-mix(in srgb, var(--archwiki-template-message-background-color) 85%, green);
    --archwiki-template-warning-background-color: color-mix(in srgb, var(--archwiki-template-message-background-color) 90%, yellow);
    --background-color-neutral-subtle: color-mix(in srgb, var(--dracula-current-line) 75%, black);
}

#content a:not([role=button]):not(.new), header.mw-header li:not(.new) a:not([role=button]):not(.new), #mw-panel-toc a:not([role=button]):not(.new), #mw-navigation li:not(.new) a:not([role=button]):not(.new), #mw-panel li:not(.new) a:not([role=button]):not(.new), #footer a:not([role=button]):not(.new) {
    color: var(--dracula-theme-link-color) !important;
}

}

@-moz-document domain("bbs.archlinux.org") {
:root {
    --dracula-background:   #282A36;
    --dracula-foreground:   #F8F8F2;
    --dracula-current-line: #44475A;
    --dracula-comment:      #6272A4;
    --dracula-cyan:         #8BE9FD;
    --dracula-green:        #50FA7B;
    --dracula-orange:       #FFB86C;
    --dracula-pink:         #FF79C6;
    --dracula-purple:       #BD93F9;
    --dracula-red:          #FF5555;
    --dracula-yellow:       #F1FA8C;
    
    --dracula-theme-link-color: #5699df;
}

* {
    border-color: var(--dracula-comment) !important;
}

a {
    color: var(--dracula-theme-link-color) !important;
}

#punviewtopic, .pun .punwrap, .pun .blockpost, .pun .blockpost h2, .pun .blockpost .postbody, .pun .blockpost .postfoot, .pun .postmsg,
#brdmenu, #rdmenu a, #brdmenu a:link, #brdmenu a:visited {
    background-color: var(--dracula-background);
    color: var(--dracula-foreground);
}

.pun .codebox {
    background-color: var(--dracula-current-line);
    color: var(--dracula-foreground);
}

.pun .blockpost h2 {
    background-color: var(--dracula-current-line);
}

#brdmenu a, #brdmenu a:link, #brdmenu a:visited {
    border-color: var(--dracula-background) !important;
}
}

@-moz-document url("https://archlinux.org/") {
:root {
    --dracula-background:   #282A36;
    --dracula-foreground:   #F8F8F2;
    --dracula-current-line: #44475A;
    --dracula-comment:      #6272A4;
    --dracula-cyan:         #8BE9FD;
    --dracula-green:        #50FA7B;
    --dracula-orange:       #FFB86C;
    --dracula-pink:         #FF79C6;
    --dracula-purple:       #BD93F9;
    --dracula-red:          #FF5555;
    --dracula-yellow:       #F1FA8C;
    
    --dracula-theme-link-color: #5699df;
    --dracula-theme-template-background: #323442;
}

body {
    background-color: var(--dracula-background);
    color: var(--dracula-foreground);
}

div.box {
    background-color: var(--dracula-current-line);
}

code {
    background-color: var(--dracula-current-line);
}

a:link, a:visited {
    color: var(--dracula-theme-link-color);
}

#pkgsearch {
    background-color: color-mix(in srgb, var(--dracula-theme-link-color) 50%, black);
}

dl dt {
    color: var(--dracula-comment);
}

}

@-moz-document domain("aur.archlinux.org"), url-prefix("https://archlinux.org/packages") {
:root {
    --dracula-background:   #282A36;
    --dracula-foreground:   #F8F8F2;
    --dracula-current-line: #44475A;
    --dracula-comment:      #6272A4;
    --dracula-cyan:         #8BE9FD;
    --dracula-green:        #50FA7B;
    --dracula-orange:       #FFB86C;
    --dracula-pink:         #FF79C6;
    --dracula-purple:       #BD93F9;
    --dracula-red:          #FF5555;
    --dracula-yellow:       #F1FA8C;
    
    --dracula-theme-link-color: #5699df;
    --dracula-theme-template-background: #323442;
}

* {
    border-color: var(--dracula-comment) !important;
}

body, .results tr:nth-child(even of :not([hidden])), .results th, input, select {
    background-color: var(--dracula-background);
    color: var(--dracula-foreground);
    scrollbar-color: var(--dracula-comment) var(--dracula-background);
}

button {
    background-color: color-mix(in srgb, var(--dracula-comment) 75%, black);
    color: var(--dracula-foreground);
}

div.box, .results tr:nth-child(odd of :not([hidden])), div#cgit div.path {
    background-color: var(--dracula-current-line);
}

#pkglist-results tr:hover {
    background-color: color-mix(in srgb, var(--dracula-background) 50%, var(--dracula-current-line));
}

#pkgdetails #detailslinks > div {
    background-color: var(--dracula-background);
}

#pkgdetails #metadata h3 {
    color: var(--dracula-background);
    background-color: var(--dracula-comment);
}

a:link, a:visited, a:focus, th a:visited, div#cgit a, .text-button {
    color: var(--dracula-theme-link-color);
}

div#cgit table.blob td.lines, div#cgit table.blob .opt, div#cgit table.blob .kwc, div#cgit table.blob .kwa {
    color: var(--dracula-foreground);
}

div#cgit table.blob .slc {
    color: var(--dracula-comment);
}

div#cgit table.blob .kwb, div#cgit table.blob .ipl, div#cgit table.blob .kwd {
    color: var(--dracula-purple);
}

}