Skip to content

Darken Shopify Admin by royalba94

Screenshot of Darken Shopify Admin
Write a review Install Get Stylus

Details

Authorroyalba94

LicenseNo License

Categoryadmin.shopify.com

Created

Updated

Code size25 kB

Code checksum8113052a

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Basic style to darken the admin area of shopify - Dark Mode all the things!

Notes

None of the other available styles were working so I decided to make my own - it's not fully extensive as I don't currently have access to all areas yet but it seems to work well for me so far. Like all styles it's a bit of a work in progress but I hope it helps you and I'll keep updating it as I can!

UPDATES:

  • Version 1 released

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           admin.shopify.com
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Basic style to darken the admin area of Shopify
@author         Royalba94
==/UserStyle== */

@-moz-document domain("admin.shopify.com") {
/*.Polaris-Frame__Main {
    background-color: rgb(20 20 20)!important;
    }
    
.Polaris-Navigation {
    background-color: rgb(15 15 15) !important;
    }
    
.Polaris-Filters__Container {
    background: rgb(40 40 40)!important;
    }
    
.Polaris-TextField__Input {
    color: rgb(200 200 200) !important;
    } */
    
.Polaris-TextField__Backdrop {
    background-color: rgb(50 50 50) !important;
    } 
    
._AdminSearch_1giwf_17 {
    --p-color-bg-surface: rgb(25 25 25) !important;
    --p-color-icon: rgba(92, 95, 98, 1);
    --p-color-text: rgba(32, 34, 35, 1);
}
    
:root, .p-theme-light {
    color-scheme: dark !important;
    --p-color-bg: rgb(15 15 15) !important;
    --p-color-bg-inverse: rgba(25, 25, 25, 1) !important;
    --p-color-bg-surface: rgb(30 30 30) !important;
    --p-color-bg-surface-hover: rgba(40, 40, 40, 1) !important;
    --p-color-bg-surface-active: rgba(243, 243, 243, 1) !important;
    --p-color-bg-surface-selected: rgba(241, 241, 241, 1) !important;
    --p-color-bg-surface-disabled: rgba(0, 0, 0, .05) !important;
    --p-color-bg-surface-secondary: rgba(50, 50, 50, 1) !important;
    --p-color-bg-surface-secondary-hover: rgba(241, 241, 241, 1) !important;
    --p-color-bg-surface-secondary-active: rgb(40, 40, 40) !important;
    --p-color-bg-surface-secondary-selected: rgba(235, 235, 235, 1) !important;
    --p-color-bg-surface-tertiary: rgba(243, 243, 243, 1) !important;
    --p-color-bg-surface-tertiary-hover: rgba(235, 235, 235, 1) !important;
    --p-color-bg-surface-tertiary-active: rgba(227, 227, 227, 1) !important;
    --p-color-bg-surface-brand: rgba(227, 227, 227, 1) !important;
    --p-color-bg-surface-brand-hover: rgba(235, 235, 235, 1) !important;
    --p-color-bg-surface-brand-active: rgba(241, 241, 241, 1) !important;
    --p-color-bg-surface-brand-selected: rgba(241, 241, 241, 1) !important;
    --p-color-bg-surface-info: rgba(234, 244, 255, 1) !important;
    --p-color-bg-surface-info-hover: rgba(224, 240, 255, 1) !important;
    --p-color-bg-surface-info-active: rgba(202, 230, 255, 1) !important;
    --p-color-bg-surface-success: rgba(205, 254, 212, 1) !important;
    --p-color-bg-surface-success-hover: rgba(175, 254, 191, 1) !important;
    --p-color-bg-surface-success-active: rgba(146, 252, 172, 1) !important;
    --p-color-bg-surface-caution: rgba(255, 248, 219, 1) !important;
    --p-color-bg-surface-caution-hover: rgba(255, 244, 191, 1) !important;
    --p-color-bg-surface-caution-active: rgba(255, 239, 157, 1) !important;
    --p-color-bg-surface-warning: rgba(255, 241, 227, 1) !important;
    --p-color-bg-surface-warning-hover: rgba(255, 235, 213, 1) !important;
    --p-color-bg-surface-warning-active: rgba(255, 228, 198, 1) !important;
    --p-color-bg-surface-critical: rgba(254, 232, 235, 1) !important;
    --p-color-bg-surface-critical-hover: rgba(254, 225, 230, 1) !important;
    --p-color-bg-surface-critical-active: rgba(254, 217, 223, 1) !important;
    --p-color-bg-surface-highlight: rgba(240, 242, 255, 1) !important;
    --p-color-bg-surface-highlight-hover: rgba(234, 237, 255, 1) !important;
    --p-color-bg-surface-highlight-active: rgba(226, 231, 255, 1) !important;
    --p-color-bg-surface-ai: rgba(248, 247, 255, 1) !important;
    --p-color-bg-surface-ai-hover: rgba(243, 241, 255, 1) !important;
    --p-color-bg-surface-ai-active: rgba(233, 229, 255, 1) !important;
    --p-color-bg-surface-inverse: rgba(48, 48, 48, 1) !important;
    --p-color-bg-surface-transparent: rgba(0, 0, 0, 0) !important;
    --p-color-bg-fill: rgba(20, 20, 20, 1) !important;
    --p-color-bg-fill-hover: rgba(25, 25, 25, 1) !important;
    --p-color-bg-fill-active: rgba(247, 247, 247, 1) !important;
    --p-color-bg-fill-selected: rgba(204, 204, 204, 1) !important;
    --p-color-bg-fill-disabled: rgba(0, 0, 0, .05) !important;
    --p-color-bg-fill-secondary: rgba(241, 241, 241, 1) !important;
    --p-color-bg-fill-secondary-hover: rgba(235, 235, 235, 1) !important;
    --p-color-bg-fill-secondary-active: rgba(227, 227, 227, 1) !important;
    --p-color-bg-fill-secondary-selected: rgba(227, 227, 227, 1) !important;
    --p-color-bg-fill-tertiary: rgb(100, 100, 100) !important;
    --p-color-bg-fill-tertiary-hover: rgba(75, 75, 75, 1) !important;
    --p-color-bg-fill-tertiary-active: rgba(204, 204, 204, 1) !important;
    --p-color-bg-fill-brand: rgba(48, 48, 48, 1) !important;
    --p-color-bg-fill-brand-hover: rgba(26, 26, 26, 1) !important;
    --p-color-bg-fill-brand-active: rgba(26, 26, 26, 1) !important;
    --p-color-bg-fill-brand-selected: rgba(48, 48, 48, 1) !important;
    --p-color-bg-fill-brand-disabled: rgba(0, 0, 0, .17) !important;
    --p-color-bg-fill-info: rgba(145, 208, 255, 1) !important;
    --p-color-bg-fill-info-hover: rgba(81, 192, 255, 1) !important;
    --p-color-bg-fill-info-active: rgba(0, 148, 213, 1) !important;
    --p-color-bg-fill-info-secondary: rgba(213, 235, 255, 1) !important;
    --p-color-bg-fill-success: rgba(4, 123, 93, 1) !important;
    --p-color-bg-fill-success-hover: rgba(3, 94, 76, 1) !important;
    --p-color-bg-fill-success-active: rgba(1, 75, 64, 1) !important;
    --p-color-bg-fill-success-secondary: rgba(175, 254, 191, 1) !important;
    --p-color-bg-fill-warning: rgba(255, 184, 0, 1) !important;
    --p-color-bg-fill-warning-hover: rgba(229, 165, 0, 1) !important;
    --p-color-bg-fill-warning-active: rgba(178, 132, 0, 1) !important;
    --p-color-bg-fill-warning-secondary: rgba(255, 214, 164, 1) !important;
    --p-color-bg-fill-caution: rgba(255, 230, 0, 1) !important;
    --p-color-bg-fill-caution-hover: rgba(234, 211, 0, 1) !important;
    --p-color-bg-fill-caution-active: rgba(225, 203, 0, 1) !important;
    --p-color-bg-fill-caution-secondary: rgba(255, 235, 120, 1) !important;
    --p-color-bg-fill-critical: rgba(199, 10, 36, 1) !important;
    --p-color-bg-fill-critical-hover: rgba(163, 10, 36, 1) !important;
    --p-color-bg-fill-critical-active: rgba(142, 11, 33, 1) !important;
    --p-color-bg-fill-critical-selected: rgba(142, 11, 33, 1) !important;
    --p-color-bg-fill-critical-secondary: rgba(254, 209, 215, 1) !important;
    --p-color-bg-fill-highlight: rgba(0, 91, 211, 1) !important;
    --p-color-bg-fill-highlight-hover: rgba(0, 66, 153, 1) !important;
    --p-color-bg-fill-highlight-active: rgba(0, 46, 106, 1) !important;
    --p-color-bg-fill-ai: rgba(128, 81, 255, 1) !important;
    --p-color-bg-fill-ai-secondary: rgba(233, 229, 255, 1) !important;
    --p-color-bg-fill-ai-secondary-hover: rgba(228, 222, 255, 1) !important;
    --p-color-bg-fill-ai-secondary-active: rgba(223, 217, 255, 1) !important;
    --p-color-bg-fill-inverse: rgba(48, 48, 48, 1) !important;
    --p-color-bg-fill-inverse-hover: rgba(74, 74, 74, 1) !important;
    --p-color-bg-fill-inverse-active: rgba(97, 97, 97, 1) !important;
    --p-color-bg-fill-transparent: rgba(0, 0, 0, .02) !important;
    --p-color-bg-fill-transparent-hover: rgba(0, 0, 0, .05) !important;
    --p-color-bg-fill-transparent-active: rgba(0, 0, 0, .08) !important;
    --p-color-bg-fill-transparent-selected: rgba(0, 0, 0, .08) !important;
    --p-color-bg-fill-transparent-secondary: rgba(0, 0, 0, .06) !important;
    --p-color-bg-fill-transparent-secondary-hover: rgba(0, 0, 0, .08) !important;
    --p-color-bg-fill-transparent-secondary-active: rgba(0, 0, 0, .11) !important;
    --p-color-text: rgba(200, 200, 200, 1) !important;
    --p-color-text-secondary: rgb(150, 150, 150) !important;
    --p-color-text-disabled: rgb(100, 100, 100) !important;
    --p-color-text-link: rgba(0, 91, 211, 1) !important;
    --p-color-text-link-hover: rgba(0, 66, 153, 1) !important;
    --p-color-text-link-active: rgba(0, 46, 106, 1) !important;
    --p-color-text-brand: rgba(74, 74, 74, 1) !important;
    --p-color-text-brand-hover: rgba(48, 48, 48, 1) !important;
    --p-color-text-brand-on-bg-fill: rgba(255, 255, 255, 1) !important;
    --p-color-text-brand-on-bg-fill-hover: rgba(227, 227, 227, 1) !important;
    --p-color-text-brand-on-bg-fill-active: rgba(204, 204, 204, 1) !important;
    --p-color-text-brand-on-bg-fill-disabled: rgba(255, 255, 255, 1) !important;
    --p-color-text-info: rgba(0, 58, 90, 1) !important;
    --p-color-text-info-hover: rgba(0, 58, 90, 1) !important;
    --p-color-text-info-active: rgba(0, 33, 51, 1) !important;
    --p-color-text-info-secondary: rgba(0, 124, 180, 1) !important;
    --p-color-text-info-on-bg-fill: rgba(0, 33, 51, 1) !important;
    --p-color-text-success: rgba(1, 75, 64, 1) !important;
    --p-color-text-success-hover: rgba(7, 54, 48, 1) !important;
    --p-color-text-success-active: rgba(2, 38, 34, 1) !important;
    --p-color-text-success-secondary: rgba(4, 123, 93, 1) !important;
    --p-color-text-success-on-bg-fill: rgba(250, 255, 251, 1) !important;
    --p-color-text-caution: rgba(79, 71, 0, 1) !important;
    --p-color-text-caution-hover: rgba(51, 46, 0, 1) !important;
    --p-color-text-caution-active: rgba(31, 28, 0, 1) !important;
    --p-color-text-caution-secondary: rgba(130, 117, 0, 1) !important;
    --p-color-text-caution-on-bg-fill: rgba(51, 46, 0, 1) !important;
    --p-color-text-warning: rgba(94, 66, 0, 1) !important;
    --p-color-text-warning-hover: rgba(65, 45, 0, 1) !important;
    --p-color-text-warning-active: rgba(37, 26, 0, 1) !important;
    --p-color-text-warning-secondary: rgba(149, 111, 0, 1) !important;
    --p-color-text-warning-on-bg-fill: rgba(37, 26, 0, 1) !important;
    --p-color-text-critical: rgba(142, 11, 33, 1) !important;
    --p-color-text-critical-hover: rgba(95, 7, 22, 1) !important;
    --p-color-text-critical-active: rgba(47, 4, 11, 1) !important;
    --p-color-text-critical-secondary: rgba(199, 10, 36, ...

Reviews

No reviews yet.