Skip to content

Material Monokai High Contrast by flashgnash

Screenshot of Material Monokai High Contrast

Details

Authorflashgnash

LicenseMIT

Categorychatgpt.com, startpage.com, youtube.com, github.com, duckduckgo.com, discord.com, instagram.com

Created

Updated

Size38 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

A port of the VSCode Material Monokai theme by Alessio Enrico epetti to various sites, aims to de-clutter websites

Notes

Designed around existing dark themes

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Material Monokai High Contrast
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A port of the VSCode Material Monokai theme by Alessio Enrico epetti
@author         flashgnash, Alessio Enrico Repetti
==/UserStyle== */

@-moz-document regexp("[\\s\\S]+") {
    :root {
        --bg-light: #263238; 
        --bg-dark: #192227;
        --accent: #9dff00;
    }
}

@-moz-document domain("chatgpt.com") {
    :root {
        --gray-800: var(--bg-light);   
        --surface-primary: var(--bg-light);   
        --sidebar-surface-primary: var(--bg-dark);
        
        --gray-750: var(--bg-dark);

    }
    
    
    div.w-full:nth-child(3) > div:nth-child(1) > div:nth-child(1) {
        width: 100%;
        float: left
    }
    
    div.text-sm:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) {
        float: right
    }
    
    .md\:pt-0 > div:nth-child(1) > div:nth-child(1) {
 
        padding: 5px;
        border-radius:5px !important;
        width: 100%;
    }
    
    .bottom-2,
    .me-1,
    div.px-2 {
        display:none;
    }    
    
.bg-token-main-surface-primary  {
    background:rgba(0,0,0,0)
}
    .md\:pt-0 > div:nth-child(1) > div:nth-child(1) {
        max-width: 100%;
    }
    .rounded-\[26px\]
    {
        border-radius:10px
    }
    
    
    #radix-\:raf\: {
        display: none;
    }
    
}
@-moz-document domain("startpage.com") {
        @media (prefers-color-scheme: dark) {
        html {
          background: var(--bg-light);
            
            
            .css-1mo3jc2 e1vne5t50
            {
                margin-left:500px;
                width: 100%
            }
            
            
            
            .css-sn565m {
                background-color: var(--bg-light);
                border: 0px;
                border-radius: 10px;
            }
          .css-11qrgbk {
            background-color: var(--bg-dark);
          }
            
            .css-lm0ml7,
            .result {
                background-color:  var(--bg-dark);
                border-radius: 15px;
                padding: 15px;
                margin: 15px;
            }
            
            .css-1mo3jc2 .e1vne5t50 {
                max-width: 100%
            }


            #header {
                background-color: red;
            }
            
            .serp-sidebar-app-promo-widget,
            .filters,
            .feedback-button-container,
            .anonymous-view-link,
            .css-6lw2pr,
            .css-xzfsr8,
            .w-gl-attribution,
            .css-mtj8kd {
                display: none;
            }
        };
        

      }
}
@-moz-document domain("youtube.com") {
    
    
    html {
        --background-primary: var(--bg-light);
        --background-secondary:  var(--bg-dark);
        --background-tertiary: #1d2021;
        --current-line: #282828;
        --selection:  var(--bg-dark);
        --foreground: #ffffff;
        --comment: #928374;
        --inactive: #bdae93;
        --cyan: #689d6a;
        --green: #98971a;
        --orange: var(--accent);
        --pink: #b16286;
        --purple: #bd93f9;
        --red: var(--accent);
        --yellow: #ffffff
        --blue: #ffffff;
    }

    html:not(.style-scope)[dark],
    :not(.style-scope)[dark] {
        --yt-spec-brand-background-primary: var(--background-secondary);
        --yt-spec-brand-background-secondary: var(--background-tertiary);
        --yt-spec-brand-background-solid: var(--background-primary);
        --yt-spec-general-background-a: var(--background-tertiary);
        --yt-spec-general-background-b: var(--background-secondary);
        --yt-spec-general-background-c: var(--background-primary);
        --yt-spec-error-background: var(--red);
        --yt-spec-text-primary: var(--foreground);
        --yt-spec-text-primary-inverse: var(--background-primary);
        --yt-spec-text-secondary: var(--comment);
        --yt-spec-text-disabled: var(--comment);
        --yt-spec-call-to-action: var(--orange);
        --yt-spec-icon-active-other: var(--yellow);
        --yt-spec-icon-inactive: var(--inactive);
        --yt-spec-icon-disabled: var(--comment);
        --yt-spec-badge-chip-background: var(--background-secondary);
        --yt-spec-verified-badge-background: var(--blue);
        --yt-spec-suggested-action: var(--background-tertiary);
        --yt-spec-button-chip-background-hover: var(--selection);
        --yt-spec-touch-response: var(--foreground);
        --yt-spec-paper-tab-ink: var(--pink);
        --yt-spec-filled-button-text: var(--orange);
        --yt-spec-call-to-action-inverse: var(--cyan);
        --yt-spec-brand-icon-active: var(--green);
        --yt-spec-brand-icon-inactive: var(--inactive);
        --yt-spec-brand-button-background: var(--orange);
        --yt-spec-brand-link-text: var(--green);
        --yt-spec-filled-button-focus-outline: var(--background-tertiary);
        --yt-spec-call-to-action-button-focus-outline: var(--blue);
        --yt-spec-brand-text-button-focus-outline: var(--red);
        --yt-spec-inactive-text-button-focus-outline: var(--inactive);
        --yt-spec-ad-indicator: var(--cyan);
        --yt-spec-brand-subscribe-button-background: var(--orange);
        --yt-spec-wordmark-text: var(--blue);
        --yt-spec-10-percent-layer: var(--background-secondary);
        --yt-spec-selected-nav-text: var(--selection);
        --yt-spec-themed-blue: var(--blue);
        --yt-spec-themed-green: var(--green);
        --yt-spec-themed-overlay-background: var(--background-tertiary);
        --yt-spec-base-background: var(--background-primary);
        --ytd-searchbox-background: var(--background-secondary);
        --ytd-searchbox-legacy-border-color: var(--cyan);
        --ytd-searchbox-legacy-button-border-color: var(--cyan);
        --ytd-searchbox-legacy-button-color: var(--blue);
    }

    tp-yt-app-drawer {
        display: none;
        width: 0px;
    }
    
    ytd-app[guide-persistent-and-visible] ytd-page-manager.ytd-app {
        margin-left:0px;
    }
    
    #container.ytd-searchbox {
        background: var(--background-primary) !important;
        border: 2px solid var(--background-primary) !important;
        border-radius: 4px;
        color: var(--foreground) !important;
    }
    
    #video-title.ytd-rich-grid-media {
        
        font-family: "Comic Mono"
    }
    
    ytd-reel-shelf-renderer,
    ytd-reel-item-renderer,
    ytd-rich-shelf-renderer,
    #chips-wrapper,
    #header.ytd-rich-grid-renderer,
    #guide-button.ytd-masthead{
        display:none;
        height: 0px;
    }
    
    ytd-app[mini-guide-visible] ytd-page-manager.ytd-app{
        margin-left:0px
    }
    
    #button {
        display: none
    }
    #chips,
    .yt-chip-cloud-renderer,
    ytd-notification-topbar-button-renderer,
    ytd-mini-guide-renderer.ytd-app {
        visibility: hidden;
        display: none;
    }
    
    #voice-search-button{
        border-radius: 10px
    }
    

    
    #container.ytd-searchbox:hover,
    #container.ytd-searchbox:focus,
    #container.ytd-searchbox:active {
        border: 2px solid var(--background-secondary) !important;
    }

    #search-icon-legacy.ytd-searchbox {
        border-radius: 4px;
        margin-left: 5px;
        background: var(--orange);
        border-color: var(--orange);
        color: var(--foreground) !important;
    }
    #search-icon-legacy.ytd-searchbox:hover,
    #search-icon-legacy.ytd-searchbox:focus {
        background: var(--yellow) !Important;
        border: 2px solid var(--yellow);
    }
    ytd-searchbox[system-icons] #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {
        color: var(--background-primary);
        font-weight: bolder;
    }

    tp-yt0app-drawer {
        background: var(--background-primary);
    }

    ytd-masthead {
        --paper-input-container-input-align: baseline;
        display: block;
        width: 100%;
        background: var(--bg-dark);
    }

    paper-toggle-button[checked]:not([disabled]) .toggle-bar.paper-toggle-button {
        opacity: 1;
        background-color: var(--background-primary);
    }

    .guide-entry-badge.ytd-guide-entry-renderer {
        color: var(--yt-spec-brand-link-text);
    }

    #progress.ytd-thumbnail-overlay-resume-playback-renderer {
        background-color: var(--yt-spec-themed-blue);
    }

    #notification-count.ytd-notification-topbar-button-renderer {
        background-color: var(--yt-spec-themed-blue);
    }

    #button.yt-icon-button {
        color: var(--cyan);
    }
    .sbdd_b,
    .sbsb_a,
    .sbfl_b,
    .sbsb_c {
        background: var(--yt-spec-brand-background-primary);
    }

    .gsfs,
    .sbfl_b {
        color: var(--foreground);
    }

    .sbsb_d {
        background-color: var(--yt-spec-general-background-c);
    }

    .sbdd_b {
        border: 1px solid transparent;
    }

    .sbpqs_a {
        color: var(--pink);
    }

    .sbsb_i {
        color: var(--blue);
    }

    .sbfl_b {
        color: var(--cyan);
    }

    #cinematics {
        display: none;
    }
}

@-moz-document domain("github.com") {
    
    /* Insert code here... */
    :root {
        
        --bgColor-muted: rgb(25,34,39) !important;
		--color-header-bg: rgb(35, 37, 47) !important;
        --bgColor-default: var(--bg-light) !important;
        --color-page-header-bg: rgb(35, 37, 47) !important;
		--color-canvas-default: var(--bg-light) !important;
		--color-border-default: #162228  !important;
		--color-border-muted: rgb(68, 71, 90) !...

Reviews

No reviews yet.