Skip to content

Toyhouse Theme Toggler by Avistella

Screenshot of Toyhouse Theme Toggler

Details

AuthorAvistella

LicenseCC-BY-NC-SA-4.0

Categorytoyhou.se

Created

Updated

Size450 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Toggle between Toyhouse themes to quickly check if custom coloured HTML is readable on all themes

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Toyhouse Theme Toggler
@namespace      Toyhouse Theme Toggler | Avistella
@version        1.0.0
@description    Toggle between Toyhouse themes to quickly check if custom coloured HTML is readable on all themes
@author         Avistella
@license        CC-BY-NC-SA-4.0
@preprocessor   stylus

@var select theme        "Select theme"                         ["dflt:Default",
                                                                "nght:Night",
                                                                "pnk:Pink",
                                                                "tlth:Teal",
                                                                "bee:Bee",
                                                                "pnkvlv:Pink Velvet"]

==/UserStyle== */

@-moz-document domain("toyhou.se") {
    
/*--------------------------------

    DEFAULT THEME
    
--------------------------------*/
    
    if theme == dflt {
        
        .navbar-toggler-icon {
            background-image:url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMzIgMzInIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggc3Ryb2tlPSdyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNSknIHN0cm9rZS13aWR0aD0nMicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbWl0ZXJsaW1pdD0nMTAnIGQ9J000IDhoMjRNNCAxNmgyNE00IDI0aDI0Jy8+PC9zdmc+") !important;
        }
        .custom-checkbox .custom-control-input:checked ~ .custom-control-indicator {
            background-image:url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J002LjU2NC43NWwtMy41OSAzLjYxMi0xLjUzOC0xLjU1TDAgNC4yNiAyLjk3NCA3LjI1IDggMi4xOTN6Jy8+PC9zdmc+") !important;
        }
        a {
          background-color:transparent
        }
        mark {
          background-color:#ff0;
          color:#000
        }
        fieldset {
          border:1px solid silver;
        }
        legend {
          color:inherit;
        }
        @media print {
          *,
          :after,
          :before,
          blockquote:first-letter,
          blockquote:first-line,
          div:first-letter,
          div:first-line,
          li:first-letter,
          li:first-line,
          p:first-letter,
          p:first-line {
            box-shadow:none!important;
            text-shadow:none!important
          }
          blockquote,
          pre {
            border:1px solid #999;
          }
          .badge {
            border:1px solid #000
          }
          .table td,
          .table th {
            background-color:#fff!important
          }
          .table-bordered td,
          .table-bordered th {
            border:1px solid #ddd!important
          }
        }
        body {
          background-color:#fff;
          color:#212529;
        }
        a {
          color:#008cba;
        }
        a:focus,
        a:hover {
          color:#00526e;
        }
        a:not([href]):not([tabindex]),
        a:not([href]):not([tabindex]):focus,
        a:not([href]):not([tabindex]):hover {
          color:inherit;
        }
        table {
          background-color:transparent;
        }
        caption {
          color:#6c757d;
        }
        button:focus {
          outline:5px auto -webkit-focus-ring-color
        }
        .h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h6,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          color:inherit;
        }
        hr {
          border-top:1px solid rgba(0,0,0,.1);
        }
        .mark,
        mark {
          background-color:#fcf8e3;
        }
        .blockquote {
          border-left:.25rem solid #e9ecef;
        }
        .blockquote-footer {
          color:#6c757d;
        }
        .blockquote-reverse {
          border-right:.25rem solid #e9ecef;
        }
        .img-thumbnail {
          background-color:#fff;
          border:1px solid #dee2e6;
        }
        .figure-caption {
          color:#6c757d;
        }
        code {
          background-color:#f8f9fa;
          border-radius:.25rem;
          color:#d9534f;
        }
        a>code {
          background-color:inherit;
          color:inherit;
        }
        kbd {
          background-color:#212529;
          color:#fff;
        }
        pre {
          color:#212529;
        }
        pre code {
          background-color:transparent;
        }
        .table td,
        .table th {
          border-top:1px solid #dee2e6;
        }
        .table thead th {
          border-bottom:2px solid #dee2e6;
        }
        .table tbody+tbody {
          border-top:2px solid #dee2e6
        }
        .table .table {
          background-color:#fff
        }
        .table-bordered,
        .table-bordered td,
        .table-bordered th {
          border:1px solid #dee2e6
        }
        .table-striped tbody tr:nth-of-type(odd) {
          background-color:rgba(0,0,0,.05)
        }
        .table-active,
        .table-active>td,
        .table-active>th,
        .table-hover .table-active:hover,
        .table-hover .table-active:hover>td,
        .table-hover .table-active:hover>th,
        .table-hover tbody tr:hover {
          background-color:rgba(0,0,0,.075)
        }
        .table-success,
        .table-success>td,
        .table-success>th {
          background-color:#dff0d8
        }
        .table-hover .table-success:hover,
        .table-hover .table-success:hover>td,
        .table-hover .table-success:hover>th {
          background-color:#d0e9c6
        }
        .table-info,
        .table-info>td,
        .table-info>th {
          background-color:#d9edf7
        }
        .table-hover .table-info:hover,
        .table-hover .table-info:hover>td,
        .table-hover .table-info:hover>th {
          background-color:#c4e3f3
        }
        .table-warning,
        .table-warning>td,
        .table-warning>th {
          background-color:#fcf8e3
        }
        .table-hover .table-warning:hover,
        .table-hover .table-warning:hover>td,
        .table-hover .table-warning:hover>th {
          background-color:#faf2cc
        }
        .table-danger,
        .table-danger>td,
        .table-danger>th {
          background-color:#f2dede
        }
        .table-hover .table-danger:hover,
        .table-hover .table-danger:hover>td,
        .table-hover .table-danger:hover>th {
          background-color:#ebcccc
        }
        .thead-inverse th {
          background-color:#212529;
          color:#fff
        }
        .thead-default th {
          background-color:#e9ecef;
          color:#495057
        }
        .table-inverse {
          background-color:#212529;
          color:#fff
        }
        .table-inverse td,
        .table-inverse th,
        .table-inverse thead th {
          border-color:#fff
        }
        .form-control {
          background-color:#fff;
          border:1px solid rgba(0,0,0,.15);
          color:#6c757d;
        }
        .form-control::-ms-expand {
          background-color:transparent;
        }
        .form-control:focus {
          background-color:#fff;
          border-color:#3bceff;
          box-shadow:0 0 0 .2rem rgba(0,140,186,.25);
          color:#6c757d;
        }
        .form-control::-moz-placeholder {
          color:#6c757d;
        }
        .form-control::placeholder {
          color:#6c757d;
        }
        .form-control:disabled,
        .form-control[readonly] {
          background-color:#e9ecef;
        }
        select.form-control:focus::-ms-value {
          background-color:#fff;
          color:#6c757d
        }
        .form-control-plaintext {
          background-color:transparent;
          border:solid transparent;
          border-width:1px 0;
          color:#212529;
        }
        .form-check-input:disabled~.form-check-label {
          color:#6c757d
        }
        .valid-feedback {
          color:#5cb85c;
        }
        .valid-tooltip {
          background-color:rgba(92,184,92,.9);
          color:#fff;
        }
        .form-control.is-valid,
        .was-validated .form-control:valid {
          background-position:center right calc(.3125em + .25rem);
          background-repeat:no-repeat;
          background-size:calc(.625em + .5rem) calc(.625em + .5rem);
          border-color:#5cb85c;
        }
        .form-control.is-valid:focus,
        .was-validated .form-control:valid:focus {
          border-color:#5cb85c;
          box-shadow:0 0 0 .2rem rgba(92,184,92,.25);
        }
        .was-validated textarea.form-control:valid,
        textarea.form-control.is-valid {
          background-position:top calc(.3125em + .25rem) right calc(.3125em + .25rem);
        }
        .custom-select.is-valid,
        .was-validated .custom-select:valid {
          border-color:#5cb85c;
        }
        .custom-select.is-valid:focus,
        .was-validated .custom-select:valid:focus {
          border-color:#5cb85c;
          box-shadow:0 0 0 .2rem rgba(92,184,92,.25)
        }
        .form-check-input.is-valid~.form-check-label,
        .was-validated .form-check-input:valid~.form-check-label {
          color:#5cb85c
        }
        .custom-control-input.is-valid~.custom-control-label,
        .was-validated .custom-control-input:valid~.custom-control-label {
          color:#5cb85c
        }
        .custom-control-input.is-valid~.custom-control-label:before,
        .was-validated .custom-control-input:valid~.custom-control-label:before {
          border-color:#5cb85c
        }
        .custom-control-input.is-valid:checked~.custom-control-label:before,
        .was-validated .custom-control-input:valid:checked~.custom-control-label:before {
          background-color:#80c780;
          border-color:#80c780
        }
        .custom-control-input.is-valid:focus~.custom-control-label:before,
        .was-validated .custom-control-input:val...

Reviews

No reviews yet.