Nedenfor er et userscript som er ment å brukes med TamperMonkey eller tilsvarende. Hvis man bruker andre addons som ikke støtter userscripts (Stylus), så er det bare å fjerne den delen av koden som wrapper rundt CSS-delen. Se etter `flyvekomma`-symbolene i starten og slutten (det er kun 2 av dem totalt). Dette kommer med alle slags forbehold; det er kun ment for å ta vekk de mest lyssterke overflatene, og det er ikke alt jeg har tatt meg bryet med å rydde opp i. Særlig i forbindelse med alle ikoner i forumlister og søk, der er det noen skarpe kanter som kunne trengt litt anti-aliasing og sånt. Endringene kan også slutte å fungere hvis forumet oppdateres til nye versjoner.
Temaet bør benyttes med et mørkt tema i stilvelgeren vi har på forumet, ettersom det ikke endrer bakgrunnsbildet. Knappen for å velge tema ligger nær brukernavnet i menyen.
Kode
// ==UserScript==
// @version 1.0
// @name freak.no Darker
// @description Dark Mode for freak.no
// @author Moff
// @namespace moff
// @match http://freak.no/*
// @match http://www.freak.no/*
// @match https://freak.no/*
// @match https://www.freak.no/*
// @grant GM_addStyle
// @run-at document-start
// ==/UserScript==
GM_addStyle (`
/*
Colors:
Lightest: rgba(220, 220, 220, 1)
Green: rgba(99, 152, 88, 1)
Dim: rgba(60, 60, 60, 1)
Dark: rgba(60, 60, 60, 1)
Darkest: rgba(15, 15, 15, 1)
*/
/* Header */
#header #logo, #header .hamburger {
filter: sepia(1) saturate(550%) hue-rotate(30deg) brightness(80%);
}
#header #logo {
transform: scale(0.9);
transition: transform 1s;
}
#header #logo:hover {
transform: scale(1);
transition: transform 0.5s;
}
#header a {
color: rgba(220, 220, 220, 1);
background-color: rgba(15, 15, 15, 1);
}
#header a:hover {
background-color: rgba(60, 60, 60, 1);
}
#header a span.badge {
background-color: rgba(99, 152, 88, 1);
}
#header .search input[type=submit] {
background-color: rgba(150, 150, 150, 1);
filter: invert(100%) grayscale(100%);
}
.adBelowNavbar {
margin: 0px;
margin-bottom: 5px;
}
/* Navigation */
#navbits {
margin: 0px;
}
#navbits > span, #navbits > a, .pagenav > a {
background-color: rgba(15, 15, 15, 1);
color: rgba(220, 220, 220, 1);
}
/* Generic */
a, a:link, a:visited, a:focus, a:active {
color: rgba(220, 220, 220, 1);
}
a:hover {
color: rgba(255, 255, 255, 1);
}
input[type='text'], input[type='password'], textarea {
background-color: rgba(15, 15, 15, 1);
color: rgba(220, 220, 220, 1);
border: 1px solid rgba(220, 220, 220, 1);
padding: 3px;
}
input[type='submit'] {
color: rgba(220, 220, 220, 1) !important;
}
.panelsurround, .panel {
background-color: rgba(60, 60, 60, 1);
color: rgba(220, 220, 220, 1);
border: none;
}
/* Front page */
.alt1, .alt1Active, .alt2, .alt2Active {
color: rgba(220, 220, 220, 1);
background-color: rgba(15, 15, 15, 1);
}
.alt1 a, .alt2 a {
color: rgba(220, 220, 220, 1);
}
tr.recthreads-row:nth-child(odd) .alt1 {
background-color: rgba(60, 60, 60, 1);
}
.cat-sml-f {
filter: invert(100%) grayscale(100%);
}
.f-52-b {
border-bottom-color: rgba(60, 60, 60, 1); /* VIF section */
}
/* Forum list */
.thead, .tcat, .tcat a, .tcat a:link, .tcat a:visited, .tcat a:focus, .tcat a:active {
color: rgba(220, 220, 220, 1);
}
.pagelink {
color: rgba(220, 220, 220, 1) !important;
}
td > img:not(.inlineimg) {
filter: invert(100%) grayscale(100%);
}
.panelsurround td > img {
filter: none;
}
#threadslist .alt1 > img, #threadslist .alt2 > img {
filter: invert(0%) brightness(80%);
}
.newpost-arrow, .is-threadstarter {
background-color: rgba(99, 152, 88, 1);
color: rgba(220, 220, 220, 1) !important;
}
.vbmenu_control {
filter: brightness(80%);
}
/* Post */
.post .meta {
background-color: rgba(60, 60, 60, 1);
}
.post .meta .countwrapper span, .post .meta .countwrapper span a {
filter: invert(100%) grayscale(100%);
text-decoration: none;
}
.post .meta .username a {
text-decoration: none;
}
.post .meta .username, .post .meta .usertitle {
color: rgba(220, 220, 220, 1);
}
.post .meta a.time, .time {
color: rgba(220, 220, 220, 1);
text-decoration: none;
}
.post .meta .arrow {
border-right-color: rgba(15, 15, 15, 1);
}
.post .content {
background-color: rgba(15, 15, 15, 1);
color: rgba(220, 220, 220, 1);
}
.post .content .text .quote-wrapper-inner, .quote-wrapper-inner {
background-color: rgba(60, 60, 60, 1);
}
.quote-arrow {
border-right-color: rgba(60, 60, 60, 1);
}
.post .content .quotetop img {
filter: invert(100%) grayscale(100%) brightness(80%);
}
.post .menu a {
filter: brightness(80%);
}
/* Editor */
.imagebutton {
background-color: rgba(220, 220, 220, 0.25) !important;
}
/* Footer */
#footer > div > ul > li a {
color: rgba(220, 220, 220, 1);
}
`);