Index's Polytoria Dark Theme by indexgit01

Screenshot of Index's Polytoria Dark Theme

Details

Authorindexgit01

LicenseNo License

Categorypolytoria

Created3 years, 1 week ago

Updated1 year, 8 months ago

Size14 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

I've recreated Polytoria's dark mode theme from screenshots sent by staff members. If you have any troubles, please contact me or report it as an issue on the Github listed below.

This style:

Changes Polytoria's theme colors and commonly used colors to be a darker shade then they are normally

Created by Index on Polytoria.
Have a great day & hope you enjoy the theme!

Notes

This style is not 100% complete yet, if you find any bugs or issues, report it on the Github listed below.

Known Issues:
NO CURRENTLY FOUND ISSUES. PLEASE REPORT ANY BUGS YOU MAY FIND ON THE STYLE'S GITHUB ISSUES SECTION.

V1.0.0 [November, 30th 2021]:

Public Release

V1.0.1 [December, 2nd 2021]:

Fixed disabled input boxes not displaying correctly.
Attempted to fix tool tips (NOT FIXED YET).
Changed colors for classes such as .text-secondary & .text-muted objects, now #47474.
Changed colors for small class objects, now #ccc.
Settings page is now 100% dark theme, for the exception of tool tips.
GitHub will be updated later today in the Afternoon. Thanks.

V1.0.2 [December, 5th 2021]:
small update.

Revert background-color style for Polytoria Creator scripting API documentation subdomain.
Revert background-color style for Polytoria blog subdomain.

V1.0.3 [December, 9th 2021]:
small update.

Added a comment to make sure the user knows where to find UPDATE LOGs for the style.
Revert background-color & text color style for Polytoria API documentation subdomain.
Applied dark theme to modals correctly (Previous attempt wasn't appearing as intended)

V1.0.4 [December, 16th 2021]:
small update.

Applied dark theme to tooltips correctly. (Previous attempt wasn't appearing as intended)
Another update may be released in an hour or two, not sure.

V1.0.5 [December, 17th 2021]:
small update.

Revert text color styles for Polytoria blog subdomain.

V1.0.6 [February, 28th 2022]:
large update.

Sub domains no longer have dark theme (will start working on separate dark theme for subdomains soon).
Footer now has dark theme.
More text fields have dark theme.
Green (known as "btn-success" in the code) buttons now have proper text color that is readable.

MORE.

V1.0.7 [October, 21st 2022]:
small update.

Updated all color definitions to use CSS variables instead of restating colors a ton (makes it easier for you to customize my theme to be how you want it!)

v1.0.8 [December, 29th 2022]:
small update.

Updated dashboard feed comment background+border color
Updated .text-muted class text color (most main text uses it and the old color made a lot of things hard to read, has been brightened to make it clearer)
Thank you all for your support on this theme!

v.1.0.9 [March, 15th 2023]:

Items in Wardrobe are now easier to see with a lighter background color
Green colors are lighter and not as hard on the eyes
Improved all inputs (disabled inputs are now able to be telled apart from regular inputs, rounded inputs now have a proper border, added border to random inputs that didn't previously have a border, inputs that are in cards will now have a lighter background to differentiate them from their parent card, + more)
Pagination now is properly themed (not sure why it wasn't before)
Fixed some heading text colors
"Theme made by Index" text is now smaller on the footer (p.s. you can remove this text entirely if you want!)

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name           Index's Polytoria Dark Theme
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    description
@author         indexgit01
==/UserStyle== */

@-moz-document url-prefix("https://polytoria.com") {
/* Thank you for using my theme! I'll be updating it frequently, feel free to change anything as you wish. */
    /* Made by Index on Polytoria. */
    
    /* UPDATE LOGS CAN BE FOUND HERE IN THE "NOTES" SECTION: https://userstyles.world/style/2182/polytoria-dark-mode */
    
    /* I plan on completely overhauling this style later this month or in March. Thank you for your support. */
    
    :root {
        --main-bg-color: #111111;
        
        --main-text-color: #fff;
        --secondary-text-color: #ccc;
        --third-text-color: #555;
        --fourth-text-color: #939393;
        
        --main-element-bg-color: #191919;
        --secondary-element-bg-color: #303030;
        --third-element-bg-color: #1e1e1e;
        
        --main-border-color: #292929;
        --secondary-border-color: #272727;
    }
    
    body, html {
        background-color: var(--main-bg-color);
    }
    
    footer small:after {
        display: block;
        margin-top: 0.8rem;
        content: "Dark theme created by Index, thank you so much for using the theme!";
        font-size: 0.65rem;
    }
    
    .navbar {
        background-color: var(--main-element-bg-color);
        border-color: var(--main-border-color);
    }
    
    hr, hr.dropdown-divider {
        border-color: var(--main-border-color);
    }
    
    .header-body {
        border-bottom-color: var(--main-border-color);
    }
    
    .card {
        background-color: var(--main-element-bg-color);
        border-color: var(--main-border-color);
        /* box-shadow: 0 .75rem 1.5rem var(--main-element-bg-color); */
        box-shadow: none;
        color: var(--main-text-color);
    }
    
    a, a:hover, a:focus, a.text-reset:hover *, a.text-reset:focus * {
        color: var(--secondary-text-color) !important;
    }
    
    .form-control, .form-control:hover, .form-control:focus, .dropdown-menu {
        background-color: var(--main-element-bg-color);
        border-color: var(--main-border-color);
        color: #fff !important;
    }
    
    .form-control::placeholder {
        /* color: #3e3e3e; */
        color: var(--secondary-text-color);
        text-shadow: none;
    }
    
    select.form-control, select.form-control:hover, select.form-control:focus, select.custom-select, select.custom-select:hover, select.custom-select:focus {
        background-color: var(--main-element-bg-color);
        border-color: var(--main-border-color);
    }
    
    .header-pretitle {
        color: #b5b5b5;
    }
    
    #poly-chat-toggler {
        background-color: var(--secondary-element-bg-color);
    }
    
    .navbar-vertical .nav-item a.nav-link, #topbar input#headerSearchDesktop::placeholder {
        color: #6f6f6f;
    }
    
    #topbar .input-group-prepend i {
        color: #6f6f6f;
    }
    
    .list-group-item {
        border-color: var(--main-border-color);
    }
    
    .dropdown-item {
        color: var(--secondary-text-color);
    }
    
    .dropdown-item:hover {
        color: var(--main-text-color);
    }
    
    .nav-pills .nav-link.active {
        background-color: var(--main-element-bg-color);
        border: 1px solid var(--main-border-color);
    }
    
    small {
       color: var(--secondary-text-color) !important;
    }
    
    .btn.btn-sm.btn-rounded-circle.btn-white, .btn.btn-sm.btn-rounded-circle.btn-white:hover, .btn.btn-sm.btn-rounded-circle.btn-white:focus {
        background-color: #2b2b2b;
        border-color: var(--main-border-color);
    }
    
    .btn.btn-sm.btn-rounded-circle.btn-white i, .btn.btn-sm.btn-rounded-circle.btn-white:hover i, .btn.btn-sm.btn-rounded-circle.btn-white:focus i {
        color: var(--secondary-text-color);
    }
    
    .card-header, h4.card-header, .table thead th {
        color: var(--main-text-color) !important;
        background: #141414;
        border-color: var(--main-border-color);
    }
    
    .table thead th a, .table thead th a:hover, .table thead th a:focus, .table thead th a.text-reset, .table thead th a.text-reset:hover, .table thead th a.text-reset:focus {
        color: var(--main-text-color) !important;
    }
    
    .table td, .table th {
        border-color: var(--main-border-color);
    }
    
    #postContentInput, #postContentInput:hover, #postContentInput:focus, #postTitleInput, #postTitleInput:hover, #postTitleInput:focus, #redeem-form .form-control, #redeem-form .form-control:hover, #redeem-form .form-control:focus, #chat-input-bar, #chat-input-bar:hover, #chat-input-bar:focus {
        background-color: #202020 !important;
    }
    
    #postContentInput::placeholder, #postTitleInput::placeholder, #redeem-form .form-control::placeholder, #chat-input-bar::placeholder {
        color: #dbdbdb;
    }
    
    footer.border-top {
        border-color: var(--main-border-color) !important;
    }
    
    .form-control.disabled, .form-control.disabled:hover, .form-control.disabled:focus, .form-control[disabled], .form-control[disabled]:hover, .form-control[disabled]:focus {
        background-color: var(--third-element-bg-color) !important;
        border-color: var(--secondary-border-color) !important;
        color: var(--secondary-text-color) !important;
    }
    
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        border-color: transparent transparent var(--main-border-color);
    }
    
    .text-secondary {
        color: #474747 !important;
    }
    
    .text-muted {
        color: #c4c4c4 !important;
    }
    
    .border {
        border: 1px solid var(--main-border-color) !important;
    }
    
    .bg-light {
        background-color: var(--main-element-bg-color) !important;
    }
    
    p.small.text-muted, small.text-muted, ul.small.text-muted {
        color: var(--secondary-text-color) !important;
    }
    
    .tooltip-inner {
        background-color: #111 !important;
        border: 1px solid var(--main-border-color) !important;
    }
    
    .modal-content {
        background-color: #161616;
    }
    
    .modal-header, .modal-footer {
        background-color: #0f0f0f;
    }
    
    button.close[data-dismiss="modal"], button.close[data-dismiss="modal"]:hover, button.close[data-dismiss="modal"]:focus {
        color: var(--main-text-color);
    }
    
    /*
    REVERT STYLE FOR BLOG SUBDOMAIN (blog.polytoria.com)
    body.home-template, body.post-template {
        background-color: var(--main-text-color)fff;
    }
    
    .post-card-title {
        color: #15171a;
    }
    
    .post-card-primary-tag, .article-byline-meta a, .article-tag a {
        color: #15171a !important;
    }
    
    .post-card-byline-content a {
        color: #373c44 !important;
    }
    
    .gh-head-button.gh-portal-close {
        color: #000 !important;
    }
    */
    
    .card-title {
        color: var(--secondary-text-color);
    }
    
    h3, h2, p, span[style="font-size: 20px; font-weight: 400"], .header-title {
        color: var(--main-text-color);
    }
    
    #games_accordion .card-header button {
        color: var(--secondary-text-color) !important;
    }
    
    .nav-tabs {
        border-color: #181818;
    }
    
    /*
    REVERT STYLE FOR SCRIPTING API DOCUMENTATION SUBDOMAIN (docs.polytoria.com)
    html.js-focus-visible body {
        background-color: var(--main-text-color)fff;
        color: #000 !important;
    }
    
    html.js-focus-visible p, html.js-focus-visible h1, html.js-focus-visible h2, html.js-focus-visible h3, html.js-focus-visible h4, html.js-focus-visible h5, html.js-focus-visible h6 {
        color: #000 !important;
    }
    
    html.js-focus-visible article a, html.js-focus-visible article a:hover, html.js-focus-visible article a:focus {
        color: #526cfe !important;
    }
    
    html.js-focus-visible .md-nav__item.md-nav__item--active a, html.js-focus-visible .md-nav__item.md-nav__item--active a:hover, html.js-focus-visible .md-nav__item.md-nav__item--active a:focus {
        color: #2094f3 !important;
    }
    */
    
    /*
    REVERT STYLE FOR API DOCUMENTATION SUBDOMAIN (api.polytoria.com/docs/) 
    div.swagger-ui {
        background-color: #fafafa;
    }
    
    div.swagger-ui p, div.swagger-ui h1, div.swagger-ui h2, div.swagger-ui h3, div.swagger-ui h4, div.swagger-ui h5, div.swagger-ui a, div.swagger-ui a:hover, div.swagger-ui a:focus {
        color: #000 !important;
    }
    */
    
    quote.text-muted {
        color: #a6a6a6 !important;
    }
    
    footer a, footer a:hover, footer a:focus {
        color: var(--secondary-text-color);
    }
    
    .breadcrumb-item.active {
        color: var(--secondary-text-color);
    }
    
    .btn.btn-success, .btn.btn-success:hover, .btn.btn-success:focus {
        color: var(--main-text-color) !important;
    }
    
    td, td.text-muted {
        color: var(--secondary-text-color) !important;
    }
    
    /*
    .btn-outline-dark {
        background: #0f0f0f !important;
        border-color: #090909 !important;
    }
    
    .btn-outline-dark, .btn-outline-dark:hover, .btn-outline-dark:focus {
        color: var(--main-text-color) !important;
    }
    */
    
    .p-5 .display-2 i, .p-5 h5.text-muted, center .display-2 i, center h3.text-secondary, center h5.text-muted {
        color: var(--secondary-text-color) !important;
    }
    
    footer a.text-muted, footer a.text-muted:hover, footer a.text-muted:focus {
        color: var(--...

Reviews

No reviews yet.