Fixes #4195 (Added dark mode feature)

activity/activity.info

@@ -9,6 +9,7 @@ website = http://sugarlabs.github.io/musicblocks/guide/
 categories = programming art music
 summary = A Logo-inspired mouse that plays music
 repository = https://github.com/sugarlabs/musicblocks
+supports_dark_mode = true
 
 
 

css/dark-mode/base.css

@@ -0,0 +1,76 @@
+/* Force dark mode on root elements */
+.dark-mode,
+.dark-mode body,
+.dark-mode html,
+.dark-mode #body {
+    background-color: #1a1a1a !important;
+    color: #ffffff !important;
+}
+
+/* Override Material Design colors */
+.dark-mode .blue,
+.dark-mode .blue.darken-1,
+.dark-mode .blue.darken-2,
+.dark-mode .blue.lighten-1,
+.dark-mode .blue.lighten-2,
+.dark-mode .nav-wrapper,
+.dark-mode nav {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+}
+
+/* All containers and windows */
+.dark-mode .windowFrame,
+.dark-mode .modalWindowFrame,
+.dark-mode .browserWindowFrame,
+.dark-mode .TOUR,
+.dark-mode #tourData,
+.dark-mode #helpElem,
+.dark-mode .helpDiv,
+.dark-mode .modal,
+.dark-mode .dropdown-content,
+.dark-mode #modal-container,
+.dark-mode #searchBar,
+.dark-mode .search-wrapper {
+    background-color: #2d2d2d !important;
+    color: #ffffff !important;
+    border-color: #3d3d3d !important;
+}
+
+/* All inputs and form elements */
+.dark-mode input,
+.dark-mode textarea,
+.dark-mode select,
+.dark-mode button,
+.dark-mode .btn,
+.dark-mode .btn-floating {
+    background-color: #2d2d2d !important;
+    color: #ffffff !important;
+    border-color: #3d3d3d !important;
+}
+
+/* Scrollbars */
+.dark-mode *::-webkit-scrollbar {
+    width: 12px;
+    background-color: #1a1a1a !important;
+}
+
+.dark-mode *::-webkit-scrollbar-thumb {
+    background-color: #3d3d3d !important;
+    border-radius: 6px;
+}
+
+/* Hover states */
+.dark-mode button:hover,
+.dark-mode .btn:hover,
+.dark-mode a:hover {
+    background-color: #3d3d3d !important;
+}
+
+/* Preserve block colors */
+.dark-mode .block,
+.dark-mode .blockLabel,
+.dark-mode [class*="block"] {
+    background-color: inherit !important;
+    color: inherit !important;
+} 

css/dark-mode/blocks.css

@@ -0,0 +1,53 @@
+/* Force dark mode on block containers */
+.dark-mode .palette,
+.dark-mode .paletteContainer,
+.dark-mode #palette {
+    background-color: #1a1a1a !important;
+    color: #ffffff !important;
+}
+
+/* Preserve block colors */
+.dark-mode .block.start { background-color: #FFB800 !important; }
+.dark-mode .block.pitch { background-color: #4CAF50 !important; }
+.dark-mode .block.note { background-color: #FF8A65 !important; }
+.dark-mode .block.rhythm { background-color: #7CB342 !important; }
+.dark-mode .block.drum { background-color: #00BCD4 !important; }
+.dark-mode .block.number { background-color: #FF69B4 !important; }
+
+/* Block value inputs */
+.dark-mode .value {
+    background-color: #FF69B4 !important; /* Pink for value inputs */
+}
+
+/* Block text and labels */
+.dark-mode .blockLabel,
+.dark-mode .blockText,
+.dark-mode .blockValue {
+    color: #000000 !important; /* Keep text dark for readability on colored blocks */
+}
+
+/* Block workspace */
+.dark-mode #workspace {
+    background-color: #1a1a1a !important;
+}
+
+/* Left sidebar categories */
+.dark-mode .blockCategory {
+    background-color: #2d2d2d !important;
+    border-bottom: 1px solid #4d4d4d !important;
+}
+
+/* Block connections */
+.dark-mode .blockConnectionPoint {
+    background-color: #ffffff !important;
+}
+
+/* Block hover states */
+.dark-mode .block:hover {
+    filter: brightness(1.1);
+}
+
+/* Block selection */
+.dark-mode .block.selected {
+    outline: 2px solid #ffffff !important;
+} 

css/dark-mode/canvas-override.css

@@ -0,0 +1 @@
+

css/dark-mode/canvas.css

@@ -0,0 +1,22 @@
+/* Force dark mode on canvas elements */
+.dark-mode #workspace,
+.dark-mode .canvasHolder,
+.dark-mode #canvas,
+.dark-mode #myCanvas,
+.dark-mode #overlayCanvas,
+.dark-mode #hideContents {
+    background-color: #1a1a1a !important;
+    color: #ffffff !important;
+}
+
+/* SVG and graphical elements */
+.dark-mode svg,
+.dark-mode path,
+.dark-mode rect,
+.dark-mode circle,
+.dark-mode line,
+.dark-mode polyline,
+.dark-mode polygon {
+    fill: currentColor !important;
+    stroke: currentColor !important;
+} 

css/dark-mode/components.css

@@ -0,0 +1,108 @@
+/* Wheel navigation and special components */
+.dark-mode .wheelNav,
+.dark-mode #wheelDiv,
+.dark-mode #wheelDiv2,
+.dark-mode #meterWheelDiv,
+.dark-mode #contextWheelDiv,
+.dark-mode #submenuWheelDiv,
+.dark-mode #helpfulWheelDiv {
+    background-color: #2d2d2d !important;
+    color: #ffffff !important;
+}
+
+/* Modal and dialog components */
+.dark-mode .modal,
+.dark-mode #lilypondModal,
+.dark-mode .modal-overlay,
+.dark-mode #helpElem,
+.dark-mode #tourData {
+    background-color: #2d2d2d !important;
+    color: #ffffff !important;
+}
+
+/* Lists and dropdowns */
+.dark-mode ul,
+.dark-mode li,
+.dark-mode .dropdown-content li > a,
+.dark-mode .dropdown-content li > span {
+    background-color: #2d2d2d !important;
+    color: #ffffff !important;
+}
+
+/* Additional components */
+.dark-mode .search-wrapper,
+.dark-mode .search-results,
+.dark-mode .help-container,
+.dark-mode .settings-container,
+.dark-mode .plugin-container {
+    background-color: #2d2d2d !important;
+    color: #ffffff !important;
+}
+
+/* Ensure all icons are visible */
+.dark-mode i.material-icons {
+    color: #ffffff !important;
+}
+
+/* Handle hover states */
+.dark-mode .btn:hover,
+.dark-mode button:hover,
+.dark-mode .nav-wrapper a:hover {
+    background-color: #4d4d4d !important;
+}
+
+/* Status indicators */
+.dark-mode .status-indicator,
+.dark-mode .loading-indicator,
+.dark-mode .progress-bar {
+    background-color: #3d3d3d !important;
+    color: #ffffff !important;
+}
+
+/* Block specific components */
+.dark-mode .set-instrument {
+    background-color: #00BCD4 !important; /* Cyan */
+}
+
+.dark-mode .pitch-block {
+    background-color: #4CAF50 !important; /* Green */
+}
+
+.dark-mode .note-value {
+    background-color: #FF69B4 !important; /* Pink */
+}
+
+.dark-mode .drum-block {
+    background-color: #00BCD4 !important; /* Cyan */
+}
+
+/* Block labels */
+.dark-mode .name-label,
+.dark-mode .value-label,
+.dark-mode .number-label {
+    color: #000000 !important;
+    background-color: transparent !important;
+}
+
+/* Block connections */
+.dark-mode .connector {
+    background-color: #ffffff !important;
+}
+
+/* Block shadows */
+.dark-mode .block {
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2) !important;
+}
+
+/* Force dark mode on components */
+.dark-mode .modal,
+.dark-mode .modal-content,
+.dark-mode .modal-footer,
+.dark-mode .modal-header,
+.dark-mode .tooltipped,
+.dark-mode .tooltip-content,
+.dark-mode .collection,
+.dark-mode .collection-item {
+    background-color: #1a1a1a !important;
+    color: #ffffff !important;
+} 

css/dark-mode/critical.css

@@ -0,0 +1,30 @@
+/* Critical dark mode styles */
+.dark-mode #loading-image-container {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+}
+
+.dark-mode #canvas,
+.dark-mode #myCanvas,
+.dark-mode #overlayCanvas,
+.dark-mode .canvasHolder,
+.dark-mode #workspace {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+}
+
+/* Force dark mode on workspace */
+.dark-mode .workspace,
+.dark-mode .workspace *:not(.block):not(.blockLabel) {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+    color: #ffffff !important;
+}
+
+/* Force dark mode on canvas container */
+.dark-mode .canvasHolder,
+.dark-mode .canvasHolder *:not(.block):not(.blockLabel) {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+    color: #ffffff !important;
+} 

css/dark-mode/easel.css

@@ -0,0 +1,25 @@
+/* EaselJS stage and canvas dark mode */
+.dark-mode canvas,
+.dark-mode #canvas,
+.dark-mode #myCanvas,
+.dark-mode #overlayCanvas {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+}
+
+/* Force dark mode on stage container */
+.dark-mode .createjs-container,
+.dark-mode .easeljs-container,
+.dark-mode [class*="createjs"],
+.dark-mode [class*="easeljs"] {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+}
+
+/* Force dark mode on workspace */
+.dark-mode #workspace,
+.dark-mode .workspace,
+.dark-mode .canvasHolder {
+    background: #1a1a1a !important;
+    background-color: #1a1a1a !important;
+}