Dark Theme for Google Colab IDE by stp155906

/* ==UserStyle==
@name           Dark Theme for Google Colab IDE
@namespace      USO Archive
@author         Ahmad Pouramini
@description    `A dark theme for python IDE of Google Colab`
@version        20190308.11.13
@license        CC0-1.0
@preprocessor   uso
==/UserStyle== */
@-moz-document domain("colab.research.google.com"), domain("https://colab.research.google.com/drive/1mwJdtZtBIEWFe_fBpEfbAFv4bUo2Ka0a#scrollTo=4TVARaybiGB9") {
    body {
        --code-cell-background: #4b0bdfb3;
        --colab-primary-surface-color: url('https://raw.githubusercontent.com/Stp155906/image/main/IMG_6031%202.jpg');
        --colab-primary-text-color: rgb(228, 226, 255);
        --colab-primary-background-color: url('https://raw.githubusercontent.com/Stp155906/image/main/IMG_6031%202.jpg');
        --colab-secondary-surface-color: url('https://raw.githubusercontent.com/Stp155906/image/main/IMG_6031%202.jpg');
        --colab-toolbar-surface-color: #ffffffe0;
        --primary-background-color: #8ccaff;
        --colab-highlighted-surface-color: #99a;
        --colab-tertiary-text-color: #7100e2;
        --colab-border-color: url(https://i.imgur.com/bgmVeyt.jpg);
        --colab-page-background-surface-color: #c400ea;
        --paper-input-container-input-color: #00ffe4;
        --paper-checkbox-label-color: #b089fd;
    }

    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .cell.text,
    .markdown,
    .main-content,
    .notebook-content,
    .add-cell,
    .cell,
    .text,
    .formview,
    .formview-title {
        font-size: 14px;
    }

    paper-item {
        cursor: default;
        color: #fffdfd;
    }

    #top-toolbar {
        background-color: url(https://i.imgur.com/bgmVeyt.jpg);
    }

    .cm-s-default .cm-def {
        color: #fff;
        font-size: 16px;
    }

    .notebook-content-background {
        background-color: var(--colab-primary-background-color);
    }

    colab-file-tree {
        display: flex;
        flex-flow: column;
        flex-grow: 1;
        overflow-y: auto;
        color: #cdb4ff;
    }
    .layout.vertical {
        display: flex;
        flex-direction: column;
        background: #2222229c;
    }
    .tooltiptext {
        background-color: #000000c7;
        border: 0;
        border-radius: 0;
        max-height: 500px;
        overflow: auto;
        white-space: pre-wrap;
        font-size: 14px;
        color: #e4e4f5;
        padding: 10px;
    }
    .text.edit .markdown-toolbar {
        background-color: #fff;
    }

    colab-dialog-impl {
        background: #191919 !important;
    }

    .code .cm-matchhighlight.CodeMirror-selectedtext {
        background: #6e6d6e;
    }

    .code .cm-matchhighlight {
        background: #5502a2;
    }

    .goog-menubar .goog-menu-button {
        border: 1px solid #222;
    }



    span.CodeMirror-selectedtext {
        background: #e7e7ec;
    }

    .goog-menu,
    .goog-menuitem,
    .goog-menuseparator.goog-menuitem-disabled,
    .goog-menuitem-content,
    .editor.flex {
        color: #eee;
        background: #a517ff;
        border-color: #20e2f2;
    }

    .goog-menuitem-accel {
        color: #af09e8;
        background: #464545;
    }

    .paper-material-0[elevation="2"] {
        box-shadow: 1px 1px 5px 3px #888888c7/* , 0 3px 3px 0  #8888, 0 3px 3px -1px  #8888; */
    }

    .add-cell {
        background: #180b29a8! important;
    }

    .CodeMirror-code {
        color: #bbb7b7!important;
        background: #222;
    }

    .CodeMirror pre,
    .CodeMirror.cm-s-default.CodeMirror-simplescroll {
        color: #ccc;
        background: #000;
    }

    .CodeMirror-activeline pre {
        background: #333;
        line-height: 21px;
    }

    pre.CodeMirror-line {
        color: #262728;
        line-height: 21px;
    }

    .CodeMirror-matchingbracket {
        color: #c5bbeb!important;
    }

    .CodeMirror-cursor {
        border-left: 1px solid #0f0;
    }

    /* gutters */
    .code.output-selected .output-info {
        background: #884ba4;
    }

    .cell-gutter {
        background: #222;
    }

    .code.focused.output-selected .cell-gutter {
        color: #131313;
        background: #222;
    }

    .code.focused .cell-gutter {
        color: #8a8a8a;
        background: #555;
    }

    .output-info {
        color: #cdbbff;
        background: #000;
    }

    .code.focused .cell-execution-indicator iron-icon {
        color: #4f4f52;
    }

    /* markdown */
    .text.edit .cm-header {
        color: #f9f9f9;
    }

    .text.edit .markdown,
    .text.edit .CodeMirror,
    .text.edit .cm-variable-2,
    .text.edit .cm-comment,
    .text.edit .cm-quote {
        color: #f88;
        font-family: 'Roboto', 'Noto', sans-serif;
        font-size: 14px
    }
    .text.edit .markdown a,
    .text.edit .cm-link,
    .text.edit .cm-url,
    .text.edit .cm-header.cm-link,
    .text.edit .cm-header.cm-url {
        color: #1c1c84
    }

    .text.edit .CodeMirror .markdown-mathjax {
        color: #f80;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: italic;
        font-weight: 400;
        letter-spacing: 1px
    }

    .cm-s-default .cm-keyword {
        color: #0ff;
        font-weight: bold;
        font-size: 16px;
    }
    .cm-s-default .cm-atom {
        color: #310831
    }
    .cm-s-default .cm-number {
        color: #fa0;
        font-weight: bold;
        font-size: 14px;
    }

    .cm-s-default .cm-variable,
    .cm-s-default .cm-property {
        color: #373744;
        font-size: 16px;
        line-height: 21px;
    }

    .cm-s-default .cm-punctuation,
    .cm-s-default .cm-operator {
        color: #2f2853;
        font-weight: bold;
    }

    .cm-s-default .cm-variable-2 {
        color: #8f8f9e
    }
    .cm-s-default .cm-variable-3,
    .cm-s-default .cm-type {
        color: #a5e2ee
    }
    .cm-s-default .cm-comment {
        color: #9ca7bd;
        font-size: 14px;
        font-style: italic;
        line-height: 18px;
        /*    font-weight: bold;    */
    }
    .cm-s-default .cm-string {
        color: #caecfa;
        font-weight: bold;
        font-size: 14px;
    }
    .cm-s-default .cm-string-2 {
        color: #8f0;
        font-size: 14px;
    }
    .cm-s-default .cm-meta {
        color: #f80;
        font-size: 14px;
    }
    .cm-s-default .cm-qualifier {
        color: #e4e4e4;
        font-size: 14px;
    }
    .cm-s-default .cm-builtin {
        color: #333;
        font-size: 16px;
    }
    .cm-s-default .cm-bracket {
        color: #2a2a29
    }
    .cm-s-default .cm-tag {
        color: #d5c8c8;
        font-weight: bold;
    }
    .cm-s-default .cm-attribute {
        color: #212122
    }
    .cm-s-default .cm-hr {
        color: #373737
    }

    a,
    .cm-s-default .cm-link {
        color: #711495
    }
    .cm-s-default .cm-error {
        color: #000;
        background: #8b80a11a;
    }
    .cm-invalidchar {
        color: #000;
        background: #342b3c;
    }

    .content-area,
    .error-message,
    .scrollable,
    .buttons {
        background-color: #000;
        color: #382d3e;
    }

    .paper-button {
        color: #c8bbfd;
        opacity: 0.3;
        background-color: #050505de;
        border: 2px;
        border-color: #383238;
    }
    .iron-overlay-backdrop-0 {
        background-color: #313131;
    }

    .iron-overlay-backdrop-0.opened {
        opacity: 0.5;
    }

    #iron-pages,
    #iron-overlay-backdrop {
        background: #00000054;
        color: #222;
    }
}