Skip to content

Xii-Nyth's Dark Mode by xii-nyth

Screenshot of Xii-Nyth's Dark Mode

Details

Authorxii-nyth

LicenseNo License

Categorywyckoffmode.com

Created

Updated

Size4.9 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

WIP Dark mode I made for myself

Notes

The range of #x and #y to resize the .col-lg-x and .col-lg-y are unknown. Good news is that colour inversion is no longer done within these.

Source code

/* ==UserStyle==
@name         Xii-Nyth's Dark Mode
@version      20220531.17.00
@namespace    userstyles.world/user/xii-nyth
@description  WIP Dark mode I made for myself
@author       xii-nyth
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://wyckoffmode.com/platform/streams/live") {
html, body
{
    filter: invert(100%);
}

body
{
        background-color: #eee;
}

.chat-sidebar
{
    filter: invert(70%) saturate(0%) contrast(200%) brightness(120%) !important;
}

.col-lg-1, .col-lg-2, .col-lg-3,.col-lg-4, .col-lg-5
{
    max-width: 20%;
    flex: 0 0 20%;
}

.col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10
{
    max-width: 80%;
    flex: 0 0 80%;
}

.btn
{
    filter: invert(100%)brightness(160%)saturate(98%)hue-rotate(-64deg);
}

.live > h4:nth-child(1)
{
    filter: brightness(180%);
}
}

@-moz-document url-prefix("https://wyckoffmode.com/") {
.sidebar
{
    background: #131313 !important;
    }

 .main-container
{
    background: #1d1d1d !important;
    color: #999
}

.header-wrapper, .card, .title--container, div.mb-4:nth-child(n) > a:nth-child(1) > div:nth-child(1) > div:nth-child(2)
{
    background: #272727 !important;
    color:#ddd  !important;
}

.header-wrapper
{
    border-bottom: 1px solid #007690 !important;
}

.footer
{
    border-top: 1px solid #007690 !important;
}

html body.platform
{
    background: #131313 !important;
}

.m-avatar-img
{
    filter: saturate(70%) hue-rotate(134deg) brightness(90%);
}

a 
{
  filter: saturate(80%);
}

.btn
{
    filter: saturate(80%)brightness(70%);
}

div.mb-4:nth-child(n) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)
{
    filter: saturate(86%)brightness(90%);
}

html body.platform div#__nuxt div#__layout div#wrapper main.main-container div.m-body div.h-100.container section.dashboard--hero.box.mb-4.d-flex.align-items-center.p-4,
div.mb-4:nth-child(n) > div:nth-child(1)
{
    background: #131313;
}

div.mb-4:nth-child(2) > div:nth-child(1)
{
    filter: saturate(84%)brightness(90%);
}

body.platform #wrapper .sidebar #primary-menu .side-menu li a.active, body.platform #wrapper .sidebar #primary-menu .side-menu li a:hover
{
    background-color:#272727 !important;
    color: #0ab;
    box-shadow: 0 3px 20px rgba(161,148,174,.08),0 3px 10px rgba(161,148,174,.04);
}

body.platform #wrapper .sidebar #primary-menu .side-menu li a {
  color: #bbb;
}

div.mb-4:nth-child(n) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > div:nth-child(3) > span:nth-child(1),
div.mb-4:nth-child(5) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) > div:nth-child(2) > div:nth-child(n) > span:nth-child(1),
div.mb-4:nth-child(6) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) > div:nth-child(2) > div:nth-child(n) > span:nth-child(1),
div.mb-4:nth-child(4) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(4) > span:nth-child(2),
div.mb-4:nth-child(3) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) > div:nth-child(2) > div:nth-child(n) > span:nth-child(1),
div.mb-4:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(4) > span:nth-child(2),
div.mb-4:nth-child(3) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(4) > span:nth-child(2),
div.mb-4:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) > div:nth-child(2) > div:nth-child(n) > span:nth-child(1)
{
    filter: invert(100%) saturate(0%) brightness(600%);
}

.order-card
{
    filter: invert(95%) brightness(200%);
}

span.active
{
    filter: invert(85%) brightness(200%);
}

.position-absolute
{
    filter: invert(75%) brightness(200%);
}

.mb-3, .mb-4
{
    background: #1d1d1d !important;
}

.price-tabs
{
     filter: invert(85%) saturate(160%) hue-rotate(150deg) brightness(110%);
}

/* for Mo

div.mb-4:nth-child(n) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(3) > div:nth-child(2) > div:nth-child(n) > span:nth-child(1),
div.mb-4:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(4) > span:nth-child(2)
{
    @if background-color: rgb(237, 243, 255)
    {
        filter: invert(100%) saturate(0%) brightness(600%);
    }
}

*/
}

@-moz-document url("https://wyckoffmode.com/login") {
html, .d-flex
{
    filter: invert(100%) saturate(20%);
}

.card
{
    filter: invert(90%) contrast(140%)saturate(200%);
    border: 1px solid #666;
}

.btn, .btn-color
{
    filter: saturate(200%);
    color: #999;
}

.card-header
{
    filter: invert(90%) contrast(140%) saturate(0%);
}

.p-3 > span:nth-child(n) > div:nth-child(n), .card-footer
{
     filter: invert(80%) contrast(130%) brightness(150%) saturate(20%);
}

.p-3 > span:nth-child(n) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)
{
     border-radius: 0;
}
}

Reviews

No reviews yet.