diff options
| -rw-r--r-- | README.md | 9 | ||||
| -rw-r--r-- | scratch-gui-dark.css | 41 |
2 files changed, 50 insertions, 0 deletions
diff --git a/README.md b/README.md index 3b677de..61236c3 100644 --- a/README.md +++ b/README.md @@ -25,3 +25,12 @@ Configure your settings at the top of the file. This is designed for scratchr2, so it won't have an affect on places like your messages page. As such, it's not designed to work with people who actively try to interact with you. + +## scratch-gui-dark (.css) + +Silly half-complete userstyle that makes the Scratch 3.0 GUI dark-themed. + +Designed to target standalone GUI pages, e.g. llk.github.io/scratch-gui or +preview.scratch.mit.edu. May mess with the /preview/ project page (not +tested). Will probably break as scratch-gui is updated and has more features +added and enabled. diff --git a/scratch-gui-dark.css b/scratch-gui-dark.css new file mode 100644 index 0000000..4396bc7 --- /dev/null +++ b/scratch-gui-dark.css @@ -0,0 +1,41 @@ +body { background-color: black; } +.blocklyMainBackground { fill: #444 !important; } +/*.blocklyBlockCanvas { filter: brightness(0.9) saturate(0) !important; }*/ +.blocklySvg { background-color: #222 !important; } +.blocklyFlyoutBackground { fill: #222 !important; } +.blocklyFlyout { border-right-color: #000 !important; } +.blocklyZoom image { opacity: 0.25; } +.blocklyScrollbarHandle { fill: #555 !important; } +.blocklyWidgetDiv .goog-menu { background: #555 !important; border-color: #111; } +.blocklyWidgetDiv .goog-menuitem { color: #FFF !important; } +.blocklyWidgetDiv .goog-menuitem-highlight { background-color: #999 !important; border-top: 1px solid #333; border-bottom: 1px solid #333 } +.blocklyWidgetDiv .goog-menuitem-disabled .goog-menuitem-content { color: #AAA !important; } +.scratchCategoryMenu, .blocklyToolboxDiv, [class^=selector_wrapper] { background: #333 !important; color: #EEE; } +.scratchCategoryMenuItem.categorySelected { background: #444 !important; } +[class^=menu-bar_menu-bar_] { background: #222 !important; } +[class^=sprite-selector_], [class^=stage-selector_] { background: #333 !important; color: #EEE; } +[class*=sprite-selector-item] { background: #3A3A3A !important; color: #EEE; } +[class^=selector_new-buttons]::before { background: none !important; } +[class^=sprite-info] { background: #333 !important; color: #EEE; } +[class^=gui_extension-button-container] { background: #444 !important; border-color: #222 !important; } +[class^=gui_body-wrapper] { background-color: #2E2E2E !important; } +[class*=gui_tab_] { background-color: #444 !important; border-bottom-color: #2E2E2E !important; } +[class*=gui_tab_][class*=gui_is-selected] { background-color: #555 !important; } +[class^=asset-panel_] { background-color: #444 !important; color: #EEE; } +[class^=sound-editor_round-button] { filter: brightness(0.75) saturate(0) !important; } +[class*=button_button], [class^=sound-editor_button] { background: #555 !important; border-color: #333 !important; } +.injectionDiv, .blocklyToolboxDiv, [class^=stage_stage-wrapper], [class^=asset-panel_], [class^=sprite-selector], [class^=stage-selector] { border-color: #111 !important; } +[class^=stage_stage-wrapper-overlay] { background-color: #000; } +[class*=stage_stage-overlay-content] { border: 1px solid #333 !important; } +[class^=stage-header_stage-header-wrapper-overlay] { background-color: #000; } +[class^=react-tabs]:focus::after { display: none; } +[class^=input_input-form_], [class^=sprite-info], [class^=stage-header] { border-color: #666 !important; } +[class^=backpack_backpack-header] { background: #444; color: white; } +[class^=button_outlined-button] { background: #444 !important; } +[class^=menu-bar_help-icon] { filter: brightness(0.5); } +.Popover-body { background: #333; border-color: #222; } +.Popover-tipShape { fill: #333; stroke: #222; } +[class^=color-picker_row-header] { color: #EEE; } +[class^=color-picker_divider] { border-color: #555; } +[class^=color-picker_swatch] { border-color: #666; } +[class^=slider_handle] { background-color: #EEE; } |