User:Lakelimbo/DarkTheme.css

/* EXPERIMENTAL.
Not recommended for usage yet.
This is quite big, so if your connection is not that great
or if your PC is a garbage bin, I'd not recommend using it.
You can adapt to your tastes as well, of course, but some selectors
may be quite specific, so be careful to not get lost.
*/

:root {
	/* Tones */
	--color-b1: #101010;
	--color-b2: #202020;
	--color-b3: #303030;
	--color-b4: #505050;
	--color-alpha: rgba(255,255,255,.1);
	/* Theme colors */
	--bg-color: var(--color-b1);
	--link-color: #2a84ff;
}

/* Layout */
html {
	color-scheme: dark;
}

body {
	color: #fff;
}

a.new {
    color: #ff0000;
}

h1, h2, h3, h4, h5, #firstHeading, .firstHeading, 
.mw-headline, 
#mw-content-text h1, #mw-content-text h2, 
#mw-content-text h3, #mw-content-text h4, 
#mw-content-text h5, #mw-content-text h6 {
    color: #fff;
    border-color: var(--color-b4);
}

#firstHeading {
	border-color: var(--green);
}

#content-wrapper, .sidebar-section {
	background-color: var(--color-b2);
	color: #fff;
}

#searchInput {
	outline-color: #ecd35a;
}

.searchButton {
	filter: invert(1);
	opacity: 1;
}

.refreshed-dropdown-tray, #toolbox-dropdown-button {
	background-color: var(--color-b3);
	color: #fff
}

.refreshed-dropdown-tray a:focus, 
.refreshed-dropdown-tray a:hover, 
.refreshed-dropdown-tray a:active, 
.refreshed-dropdown-tray a.selected,
.header-button:hover,
a.sidebar-item:focus, 
a.sidebar-item:hover, 
a.sidebar-item:active, 
a.sidebar-item.selected {
	background-color: var(--color-alpha);
}

.refreshed-dropdown-triangle::after {
	border-bottom-color: var(--color-b3);
}

.refreshed-toolbox-stuck {
    background-color: #000;
}


.toc, .toccolours, #filetoc {
    background-color: var(--color-b3);
    border-color: var(--color-b4);
}

.tocnumber {
    color: #fff;
}

.toctitle h2::before,
.refreshed-icon-refreshed-menu.ooui-icon-menu {
    filter: invert(1);
}

#catlinks {
	background-color: var(--color-b3)
}

#footer-wrapper {
	color: #fff;
}

code, pre {
    background-color: #151515;
    border-color: var(--color-b4);
}

pre {
    color: #fff;
}

/* The following styles can be inconsistent depending on the page */

    /* Tables */
    .wikitable, #mw_metadata, #mw_metadata td {
        background-color: var(--color-b3);
        color: #fff;
    }

    .wikitable > tr > th, .wikitable > * > tr > th, #mw_metadata th {
        background-color: var(--color-b4);
        border-color: #5e5e5e;
    }

    .wikitable > tr > th, .wikitable > tr > td, 
    .wikitable > * > tr > th, .wikitable > * > tr > td,
    #mw_metadata td {
        border-color: #5e5e5e;
    }

    .table-responsive tr:nth-child(even) td {
        background-color: var(--color-alpha)
    }

	/* Infoboxes */
	.infobox-cell:nth-child(4n+1) {
		background-color: var(--color-alpha);
	}

	.infobox-img, .infobox-Img {
		color: #fff!important;
	}

    /* Navboxes */
    .navbox {
        color: #000;
    }

    .navbox table td {
        color: #fff;
    }

    /* The following styles could be quite heavy.
       Remove if necessary.
    */

    /* Recent changes */
    .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
    .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled,
    .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
    .oo-ui-textInputWidget .oo-ui-inputWidget-input,
    .mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget,
    .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled,
    .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
    .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
    .oo-ui-popupWidget-popup {
        background-color: var(--color-b3);
        border-color: var(--color-b4);
        color: #fff;
    }

    .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
    .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, 
    .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
        background: var(--color-b4);
        color: #fff;
    }

    .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not(.oo-ui-image-invert), 
    .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator:not(.oo-ui-image-invert),
    .mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-input > .oo-ui-icon-menu {
        filter: invert(1)
    }

    .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
        color: inherit;
    }

    .mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title,
    .oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input::placeholder {
        color: #d0d0d0;
    }

    /* Search results */
    .mw-search-profile-tabs,
    .mw-ui-input {
        background-color: var(--color-b3);
        border-color: var(--color-b4);
        color: #fff;
    }

    .search-types .current a {
        color: #fff;
    }

    /* Diffs */
    .diff-context {
        background: none;
        color: #fff;
        border-color: var(--color-b4);
    }

    .diff-addedline .diffchange {
        background: #4e6b86;
    }    

    /* Edit page */
    .wikiEditor-ui-controls,
    .wikiEditor-ui .wikiEditor-ui-view,
    .wikiEditor-ui .wikiEditor-ui-top,
    .wikiEditor-ui-toolbar,
    .wikiEditor-ui-toolbar .tabs span.tab a.current, 
    .wikiEditor-ui-toolbar .tabs span.tab a.current:visited,
    .wikiEditor-ui-toolbar .group .tool-select .label,
    .wikiEditor-ui-toolbar .sections .section,
    .wikiEditor-ui-toolbar .group,
	.wikiEditor-ui-toolbar .page-characters div span,
	.wikiEditor-ui-toolbar .page-table td,
	.editOptions,
    .mw-scribunto-console-fieldset {
        background-color: var(--color-b3);
        border-color: var(--color-b4);
        color: #fff;
    }

    body.ltr .wikiEditor-ui-toolbar .tabs span.tab a:before,
    .wikiEditor-ui-toolbar .group .tool-select .label:after,
	.ui-widget-header .ui-icon {
        filter: invert(1);
    }

    .wikiEditor-ui-toolbar .group .label,
	.wikiEditor-ui-toolbar .page-table th {
        color: #d0d0d0;
    }

	.oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button {
		filter: invert(1);
		background-color: rgba(204,153,51,.3);
	}

	.wikiEditor-ui-toolbar .tabs span.tab a {
		color: var(--link-color);
	}

	.wikiEditor-ui-toolbar .booklet > .index > .current,
	.wikiEditor-ui-toolbar .booklet > .index > :hover {
		background-color: var(--color-alpha);
		color: var(--link-color)
	}

	.wikiEditor-ui-toolbar .page-characters div span {
		height: unset;
	}

	.wikiEditor-ui-toolbar .page-characters div span:hover {
		background-color: var(--color-alpha);
		border-color: var(--color-b4)
	}

	.ui-widget-content {
		background: var(--color-b3);
		color: #fff;
	}

	.ui-widget-header, .ui-state-default, 
	.ui-widget-content .ui-state-default, 
	.ui-widget-header .ui-state-default {
		background: var(--color-b4);
		border: none;
		color: #fff;
	}

    .CodeMirror, .wikiEditor-ui .CodeMirror {
        background: #101010!important;
        color: #fff;
    }

	.CodeMirror-linenumber, .CodeMirror-gutter, .CodeMirror-gutters {
		background: #000;
		border-color: var(--color-b4);
	}

	.CodeMirror-line span::selection {
		background: #647489;
	}

	.cm-mw-doubleUnderscore, .cm-mw-signature, .cm-mw-hr {
		background: var(--color-b3);
	}

	.cm-mw-template-name, .cm-mw-template-bracket {
		color: #c363ff;
	}

	.cm-mw-link-ground {
		color: var(--link-color);
	}

	.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input {
		background: var(--color-b2)
	}

        /* Edit interface. NOT FULLY FUNCTIONAL */
        .ace-tm {
            background-color: var(--color-b3);
            border-color: var(--color-b4);
            color: #fff;
        }

        .ace-tm .ace_gutter, .codeEditor-status {
            background: #000;
    		border-color: var(--color-b4);
        }

        .ace-tm .ace_gutter-active-line {
            background: var(--blue);
            color: #fff;
        }

        .ace-tm .ace_cursor {
            color: #fff;
        }

        .ace_content {
            background: #000;
            filter: saturate(5);
        }

        .ace-tm .ace_print-margin {
            background-color: var(--color-b4)
        }

        .mw-scribunto-message {
            background: transparent;
            color: #34cf34;
        }

        #mw-scribunto-input {
            background: #000;
            color: var(--link-color);
        }

        .mw-scribunto-input {
            color: var(--link-ccurrentColor)
        }

        .mw-scribunto-print {
            background: var(--color-b4);
            color: #fff;
        }

/* Temporary styles */
#main-grid div.mb-3 img:first-of-type {
    filter: invert(1)
}

#main-grid .boxpanel:nth-of-type(2) {
    background: #241e1e!important;
}

#main-grid .boxpanel:nth-of-type(3) {
    background: #242a32!important;
}

#main-grid .boxpanel:nth-of-type(4) {
    border-color: #fff!important;
    background: #202020!important;
    color: #fff
}

#main-grid .boxpanel:nth-of-type(4) div:first-child {
    background: #fff!important;
    color: #000!important;
}

#main-grid .boxpanel:nth-of-type(5) {
    background: #302b33!important;
}

#main-grid .boxpanel:nth-of-type(6) {
    background: #383730!important;
}

#main-grid .boxpanel:nth-of-type(7) {
    background: #2e382e!important;
}

#main-grid .boxpanel:nth-of-type(8) {
    background: #332c33!important;
}

#main-grid .boxpanel:nth-of-type(9) {
    background: #262c2c!important;
}