Skip to content

Code.org Code Lab Dark Mode by flushedlol

Write a review Install Get Stylus

Details

Authorflushedlol

LicenseNo License

Categorycode.org

Created

Updated

Size6.8 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Tweaks for Code.org's Code Lab also with R3dd3v's Dark Mode Tweaks

Notes

It's work in progress, I'm still having to add more tweaks to the Code Lab.

Source code

/* ==UserStyle==
@name         Code.org Codelab Dark Mode
@version      1.0
@namespace    userstyles.world/user/flushedlol
@description  Dark mode for Code.org Codelab with R3dd3v tweaks
@author       r3dd3v (website tweaks), flushedlol (Code Lab Dark Mode)
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://studio.code.org/") {
.header-wrapper .header {
    background-color: #2d2d2d;
}
button {
    background-color: #ffa4df!important;
    border: 2px solid #000!important;
}
body {
    background-color: #0b0b0b
}
.small-footer-base,
#copyright-flyout,
#more-menu {
    background-color: #202020;
}

.ace_scroller {
    background-color: #0f0f0f!important;
}
.ace_identifier {
    color: #33c9ff;
}
.ace_keyword {
    color: #fe7bff!important;
}
.ace_paren {
    color: #ffa500!important;
}
.ace_operator {
    color: #ff6b6b!important;
}
.ace_punctuation {
    color: #f2ff00!important;
}
.ace_type {
    color: #1dffac!important;
}
.ace_numeric {
    color: #c33dff!important;
}

.ace_entity.ace_name.ace_function {
    color: #00fffb!important;
}
.ace_variable.ace_language {
    color: #20860c!important;
}
.ace_support.ace_function {
    color: #00ff00!important;
}
.ace_string {
    color: #c191ff!important;
}
.ace_comment {
    color: #89ac0f!important;
}

#codeWorkspace {
    background-color: #111!important;
    border-style: none none none!important;
}
.droplet-palette-wrapper {
    background-color: #111!important;
}
.droplet-palette-header {
    background-color: #111!important;
}
.ace_gutter {
    background-color: #111!important;
}
.ace_scrollbar {
    background-color: #111!important;
}
#debug-console {
    color: #cecece;
    background-color: #111!important;
}
#debug-watch {
    background-color: #111!important;
}
#debug-commands {
    background-color: #111!important;
}
.instructions-markdown ul {
    color: #aaa!important;
}
#scroll-container {
    background-color: #2d2d2d!important;
}
.csf-top-instructions p, .instructions-markdown p {
    line-height: 25px;
    font-size: 16px;
    color: #aaa!important;
}
#headers {
    height: 30px;
    background-color: #111!important;
    color: rgb(255, 255, 255);
    overflow-y: hidden;
    user-select: none;
}
strong, summary {
    color: #aaa!important;
}
.markdown-container {
    color: #aaa!important;
}
summary:hover {
    background: rgba(17,17,17,0.2);
    cursor: pointer;
}
pre {
    background-color: #222222;
    padding: 10px;
    font-size: 11px;
}
pre code {
    padding: 0;
    white-space: unset!important;
    color: #aaa!important;
    border: 0;
}
code {
    padding: 2px 4px;
    color: #aaa!important;
    background-color: #222222!important;
    border: 1px solid #171717!important;
    white-space: nowrap;
}
}

@-moz-document url("https://downloads.computinginthecore.org/bramble_0.1.30/index.html?disableExtensions=bramble-move-file") {
#editor-holder .cm-operator, #editor-holder .cm-tag {
    color: #5ba87e!important;
}
#editor-holder .CodeMirror, #editor-holder .CodeMirror .CodeMirror-scroll {
    background: #222222!important;
    color: rgba(255,255,255,0.85)!important;
}
span.cm-meta {
    color: #535353!important;
}
#editor-holder .cm-property, #editor-holder .cm-attribute, #editor-holder .cm-keyword {
    color: #a0779f!important;
}
#editor-holder .CodeMirror-cursor {
    border-left: 1px solid #f8f8f0 !important;
}
#editor-holder .cm-operator, #editor-holder .cm-tag {
    color: #5ba87e!important;
}
#editor-holder .CodeMirror-matchingtag {
    background-color: rgba(56,174,113,0.2)!important;
}
#editor-holder .CodeMirror-selected {
    background: #444 !important;
}

#editor-holder .CodeMirror-linenumbers {
    background: #222222!important;
}
#sidebar {
    background-color: black!important;
    text-shadow: none;
}
.jstree-leaf .selected-node, .jstree-leaf .selected-node, .jstree-leaf a.selected-node:hover, .extension, .jstree-leaf , .extension {
    color: white!important;
}
li.jstree-leaf a.selected-node span {
    color: white!important;
}
li.jstree-leaf a.selected-node {
    background: #222!important;
    padding-right: 40px;
}
li.jstree-leaf a span, li.jstree-leaf span.extension {
    font-size: 15px;
    color: rgba(255,255,255,0.5)!important;
}
#spinner-container {
    background-color: #222!important;
}
#editor-holder .image-view {
    background: #222!important;
}
.viewer-wrapper .viewer-header .file-type {
    font-weight: 600;
    color: rgba(255,255,255,0.85)!important;
}
#editor-holder .pane-content .image-data, #editor-holder .pane-content .image-path {
    text-align: left;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    user-select: text;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: rgba(255,255,255,0.85)!important;
}
.image-view-hex {
    color: rgba(255,255,255,0.85)!important;
}

.viewer-wrapper h3 {
    font-size: 15px;
    margin: 0 0 15px 0;
    padding: 0 0 10px 0;
    line-height: 18px;
    font-weight: 600;
    border-bottom: solid 1px rgba(255,255,255,0.85)!important;
    color: rgba(255,255,255,0.85)!important;
}
.viewer-wrapper .viewer-header {
    padding-bottom: 10px;
    text-align: left;
    border-bottom: solid 1px rgba(255,255,255,0.85)!important;
    margin-bottom: 20px;
    line-height: 15px;
    overflow: auto;
}
#editor-holder .cm-variable-3, #editor-holder .cm-qualifier, #editor-holder .cm-builtin {
    color: #A6E22E!important;
}
#editor-holder .cm-atom, #editor-holder .cm-number, #editor-holder .cm-link {
    color: #AE81FF!important;
}
#editor-holder .CodeMirror-matchingbracket {
    background-color: transparent !important;
    border-bottom: 1px solid!important;
    color: #FFF !important;
    padding-bottom: 0.166em!important;
}
#editor-holder .cm-string {
    color: #4f8eb2!important;
}
#editor-holder .cm-error {
    color: #ED488B !important;
}
#editor-holder .cm-string.cm-property, #editor-holder .cm-variable, #editor-holder .cm-variable-2 {
    color: rgba(255,255,255,0.85)!important;
}

ins.jstree-icon-html {
    background-image: url('https://downloads.computinginthecore.org/bramble_0.1.30/styles/images/icons/html.svg');
    background-color: black;
}
ins.jstree-icon-image {
    background-image: url('https://downloads.computinginthecore.org/bramble_0.1.30/styles/images/icons/image.svg');
    background-color: black;
}

ins.jstree-icon-css {
    background-image: url(https://downloads.computinginthecore.org/bramble_0.1.30/styles/images/icons/css.svg);
    background-color: black;
}
}

Reviews

No reviews yet.