User:Nydauron/Sandbox/Guides/Dark Mode

From Wiki - Scioly.org
Jump to navigation Jump to search

Hello! So you've come here in seek of a dark mode. I like your taste of theming. :)

In 2022, we all know what dark theme is. It is the superior style for any program, site, and interface! Anyone who says otherwise has been hypnotized into using other disgusting modes. We mere mortals cannot face the blindness and the Light Theme. We must stand strong in the dark and band against the light theme users!

Oh, and ya, here's the CSS code you can paste into your Dark Reader. :)

Go into "Dev tools" and in the "Dynamic Theme Editor," paste in the CSS code below.

The config will also be up at: https://gist.github.com/Nydauron/e734f9e0122c317efe499ab2530fa73e

v1.2

================================

scioly.org

CSS
/*
 * Fixes spoiler tags on forums
 */
.bbcode-spoiler {
    color: #000000 !important;
}

button.bbcode-spoiler {
    color: rgb(196, 189, 178) !important;
}

button.bbcode-spoiler:hover {
    color: rgb(116, 179, 239) !important;
}

span.bbcode-spoiler:hover {
    color: #ffffff !important;
}

/*
 * Forces Dark Reader to use default imgs rather than inverting the colors.
 */
.forum_unread_subforum {
    background-image: url("https://scioly.org/forums/styles/scioly/theme/images/forum_unread_subforum.png") !important;
}
.forum_unread {
    background-image: url("https://scioly.org/forums/styles/scioly/theme/images/forum_unread.png") !important;
}
.topic_unread_hot {
    background-image: url("https://scioly.org/forums/styles/scioly/theme/images/topic_unread_hot.png") !important;
}
.topic_unread_hot_mine {
    background-image: url("https://scioly.org/forums/styles/scioly/theme/images/topic_unread_hot_mine.png") !important;
}
.pm_unread, .topic_unread {
    background-image: url("https://scioly.org/forums/styles/scioly/theme/images/topic_unread.png") !important;
}
.forum_unread_locked {
    background-image: url("https://scioly.org/forums/styles/scioly/theme/images/forum_unread_locked.png") !important;
}

.dropdown-extended ul li:hover {
    background: #3a3a3a !important;
}

li.bg2 {
    background: #303030;
}

ul.topiclist dfn {
    display: none;
}

/*
 * Fixes math latex on forums
 */
img[src*="http://latex.codecogs.com"] {
    filter: invert(100%) hue-rotate(180deg) contrast(100%) !important;
}

/*
 * Quality of life: removes yucky scroll bar if sig is LESS than the max height
 */
.signature {
    overflow-y: auto !important;
}

================================

scioly.org/wiki

CSS
/*
 * Fixes math latex on wiki
 */
.mwe-math-fallback-image-inline {
    filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;
}

/*
 *  Makes vector tabs on top of section look nicer instead of being the ugly lines
 */
li[id^='ca'] {
    background-position: initial !important;
    background-repeat: initial !important;
}
div.vectorTabs li.selected {
    background-image: none !important;
    background: rgb(24, 26, 27);
}
div.vectorTabs ul li {
    background: black;
}

/*
 * Optional shadow.
 */
div.mw-body {
    box-shadow: 0px 0px 10px 5px darkgray;
}

#simpleSearch #searchInput {
    background: #101010;
}

================================
v1.1.2 
================================

scioly.org

CSS
/*
 * Fixes spoiler tags on forums
 */
.bbcode-spoiler {
    color: #000000 !important;
}

button.bbcode-spoiler {
    color: rgb(196, 189, 178) !important;
}

button.bbcode-spoiler:hover {
    color: rgb(116, 179, 239) !important;
}

span.bbcode-spoiler:hover {
    color: #ffffff !important;
}

dl[class*="unread"] {
    filter: invert(1) hue-rotate(180deg) contrast(0.9) brightness(1.5);
}
dl[class*="unread"] dd, dl[class*="unread"] dt {
    filter: invert(1) hue-rotate(180deg) contrast(0.9) brightness(1.5);
}

ul.topiclist dfn {
    display: none;
}

/*
 * Fixes math latex on forums
 */
img[src*="http://latex.codecogs.com"] {
    filter: invert(100%) hue-rotate(180deg) contrast(100%) !important;
}

/*
 * Quality of life: removes yucky scroll bar if sig is LESS than the max height
 */
.signature {
    overflow-y: auto !important;
}

================================

scioly.org/wiki

CSS
/*
 * Fixes math latex on wiki
 */
.mwe-math-fallback-image-inline {
    filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;
}

/*
 *  Makes vector tabs on top of section look nicer instead of being the ugly lines
 */
li[id^='ca'] {
    background-position: initial !important;
    background-repeat: initial !important;
}
div.vectorTabs li.selected {
    background-image: none !important;
    background: rgb(24, 26, 27);
}

/*
 * Optional shadow.
 */
div.mw-body {
    box-shadow: 0px 0px 10px 5px darkgray;
}

div.vectorTabs ul li {
    background: black;
}

#simpleSearch #searchInput {
    background: #101010;
}

================================
v1.0.2 
================================

scioly.org

CSS
/*
 * Fixes spoiler tags on forums
 */
.bbcode-spoiler {
    color: #000000 !important;
}

button.bbcode-spoiler {
    color: rgb(196, 189, 178) !important;
}

button.bbcode-spoiler:hover {
    color: rgb(116, 179, 239) !important;
}

span.bbcode-spoiler:hover {
    color: #ffffff !important;
}

/*
 * Fixes math latex on forums
 */
img[src*="http://latex.codecogs.com"] {
    filter: invert(100%) hue-rotate(180deg) contrast(100%) !important;
}

/*
 * Quality of life: removes yucky scroll bar if sig is LESS than the max height
 */
.signature {
    overflow-y: auto !important;
}

================================

scioly.org/wiki

CSS
/*
 * Fixes math latex on wiki
 */
.mwe-math-fallback-image-inline {
    filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;
}

/*
 *  Makes vector tabs on top of section look nicer instead of being the ugly lines
 */
li[id^='ca'] {
    background-position: initial !important;
    background-repeat: initial !important;
}
div.vectorTabs li.selected {
    background-image: none !important;
    background: rgb(24, 26, 27);
}
div.vectorTabs ul li {
    background: black;
}
#simpleSearch #searchInput {
    background: #101010;
}

/*
 * As an added bonus, below are a bunch of fixes to enhance the mobile-friendliness of the site. (It'll allow the windows to be more dynamic-friendly at the very least.)
 * Bernard, pls fix. :)
 */

@media (max-width: 2000px){
    table.wikitable {
        display: inline-block;
        max-width: 100%;
        width: fit-content;
        overflow-x: auto !important;
        border: 0;
        background-color: inherit;
    }
}

/*
 * Fixes Watch list UI position (It was displaced too high)
 */
li#ca-unwatch, li#ca-watch {
    margin-top: 0 !important;
}
.vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a {
    padding-top: 2.15em !important;
}


@media (max-width: 600px) {
    #left-navigation, #right-navigation {
        margin-top: 2.5em !important;
    }
    #simpleSearch #searchInput {
        width: 40px !important;
    }
}

#simpleSearch #searchInput {
    width: 100%;
}

/*
 * Optional shadow. You can remove "box-shadow" if you don't like it.
 */
div.mw-body {
    margin-top: 0.4em !important;
    box-shadow: 0px 0px 10px 5px darkgray;
    border: 0 !important;
}
div#mw-head {
    background-color: transparent !important;
}

================================

Real talk thou, if you don't have Dark Reader, what are you doing? You are betraying us, that's what! Join the Dark Side.

If the above code doesn't work for any reason, feel free to modify it, or DM me.

Retrieved from "https://scioly.org/wiki/index.php?title=User:Nydauron/Sandbox/Guides/Dark_Mode&oldid=148815"