scratch-gui-dark.css

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; }