blockly dark theme

2020-06-07 15:25:15 +08:00 · 2020-06-07 15:25:15 +08:00 · db653ec14e
commit db653ec14e
parent a52c151dd8
1 changed files with 114 additions and 0 deletions
--- a/_server/editor_blockly.js
+++ b/_server/editor_blockly.js
@ -687,6 +687,120 @@ editor_blockly = function () {
    }

    editor_blockly.completeItems = [];
+
+
+    editor_blockly.setTheme=function (theme) {
+        var blocklyAddtionStyleNode;
+        blocklyAddtionStyleNode=document.getElementById('blocklyAddtionStyleNode_jxzdiv2v376fvcw7v')
+        if (blocklyAddtionStyleNode==null) {
+            blocklyAddtionStyleNode=document.createElement('style')
+            blocklyAddtionStyleNode.setAttribute('id','blocklyAddtionStyleNode_jxzdiv2v376fvcw7v')
+            document.head.appendChild(blocklyAddtionStyleNode)
+            var updateColour = Blockly.BlockSvg.prototype.updateColour
+            var setShadowColour_ = Blockly.BlockSvg.prototype.setShadowColour_
+            var setBorderColour_ = Blockly.BlockSvg.prototype.setBorderColour_
+        }
+        
+        if (theme==='light') {
+            blocklyAddtionStyleNode.innerHTML=``
+            Blockly.BlockSvg.prototype.updateColour=updateColour
+            Blockly.BlockSvg.prototype.setShadowColour_=setShadowColour_
+            Blockly.BlockSvg.prototype.setBorderColour_=setBorderColour_
+        }
+        if (theme=='dark') {
+
+            // 改这个调整方块黑的程度 0~1, 越大越黑
+            var globalScale=0.1
+
+            blocklyAddtionStyleNode.innerHTML=`
+
+            .blocklySvg {
+                background-color: #000;
+            }
+
+            .blocklyNonEditableText>rect, .blocklyEditableText>rect {
+                fill: #000;
+                fill-opacity: .4;
+            }
+
+            .blocklyNonEditableText>text, .blocklyEditableText>text {
+                fill: #fff;
+            }
+
+            input.blocklyHtmlInput {
+                color: white;
+                background-color: black;
+            }
+            `
+
+
+            Blockly.BlockSvg.prototype.updateColour = function() {
+                if (this.disabled) {
+                    // Disabled blocks don't have colour.
+                    return;
+                }
+                var hexColour = this.getColour();
+                var colourSecondary = this.getColourSecondary();
+                var colourTertiary = this.getColourTertiary();
+                var rgb = goog.color.darken(goog.color.hexToRgb(hexColour),globalScale);
+                hexColour = goog.color.rgbArrayToHex(rgb);
+
+                if (this.isShadow()) {
+                    hexColour = this.setShadowColour_(rgb, colourSecondary);
+                } else {
+                    this.setBorderColour_(rgb, colourTertiary);
+                }
+                this.svgPath_.setAttribute('fill', hexColour);
+
+                var icons = this.getIcons();
+                for (var i = 0; i < icons.length; i++) {
+                    icons[i].updateColour();
+                }
+
+                // Bump every dropdown to change its colour.
+                // TODO (#1456)
+                for (var x = 0, input; input = this.inputList[x]; x++) {
+                    for (var y = 0, field; field = input.fieldRow[y]; y++) {
+                        field.forceRerender();
+                    }
+                }
+            }
+            ;
+
+            Blockly.BlockSvg.prototype.setShadowColour_ = function(a, b) {
+                if (b) {
+                    this.svgPathLight_.style.display = "none";
+                    this.svgPathDark_.style.display = "none";
+                    this.svgPath_.setAttribute("fill", b);
+                    var c = b
+                } else
+                    a = goog.color.darken(a, .4),
+                    c = goog.color.rgbArrayToHex(a),
+                    this.svgPathLight_.style.display = "none",
+                    this.svgPathDark_.setAttribute("fill", c);
+                return c
+            }
+            ;
+
+            Blockly.BlockSvg.prototype.setBorderColour_ = function(a, b) {
+                if (b)
+                    this.svgPathLight_.setAttribute("stroke", "none"),
+                    this.svgPathDark_.setAttribute("fill", "none"),
+                    this.svgPath_.setAttribute("stroke", b);
+                else {
+                    this.svgPathLight_.style.display = "";
+                    var c = goog.color.rgbArrayToHex(goog.color.darken(a, .2))
+                    , d = goog.color.rgbArrayToHex(goog.color.lighten(a, .3));
+                    this.svgPathLight_.setAttribute("stroke", c);
+                    this.svgPathDark_.setAttribute("fill", d);
+                    this.svgPath_.setAttribute("stroke", "none")
+                }
+            }
+            ;
+
+        }
+    }
+
    return editor_blockly;
 }