add color intensity option

client/src/builtin/ColoredText.js

@@ -11,29 +11,54 @@
 import BuiltinModule from './BuiltinModule';
 
 import { Utils } from 'common';
-import { Patcher, MonkeyPatch, WebpackModules, ReactComponents } from 'modules';
+import { Settings, Patcher, MonkeyPatch, WebpackModules, ReactComponents } from 'modules';
 
 export default new class ColoredText extends BuiltinModule {
 
+    constructor() {
+        super();
+        this._intensityUpdated = this._intensityUpdated.bind(this);
+        this.injectColoredText = this.injectColoredText.bind(this);
+    }
+
     get settingPath() {
         return ['ui', 'default', 'colored-text'];
     }
 
+    get intensityPath() {
+        return ['ui', 'advanced', 'colored-text-intensity'];
+    }
+
+    get intensitySetting() {
+        return Settings.getSetting(...this.intensityPath);
+    }
+
+    get intensity() {
+        return 1 - this.intensitySetting.value / 100;
+    }
+
+    _intensityUpdated() {
+        this.MessageContent.forceUpdateAll();
+    }
+
     async enabled(e) {
         if (Patcher.getPatchesByCaller('BD:ColoredText').length) return;
-        const MessageContent = await ReactComponents.getComponent('MessageContent', { selector: WebpackModules.getSelector('container', 'containerCozy', 'containerCompact', 'edited') });
-        MonkeyPatch('BD:ColoredText', MessageContent.component.prototype).after('render', this.injectColoredText);
-        MessageContent.forceUpdateAll();
+        this.intensitySetting.on('setting-updated', this._intensityUpdated);
+        this.MessageContent = await ReactComponents.getComponent('MessageContent', { selector: WebpackModules.getSelector('container', 'containerCozy', 'containerCompact', 'edited') });
+        MonkeyPatch('BD:ColoredText', this.MessageContent.component.prototype).after('render', this.injectColoredText);
+        this.MessageContent.forceUpdateAll();
     }
 
     injectColoredText(thisObject, args, returnValue) {
+        const ColorShader = WebpackModules.getModuleByName('ColorShader');
         const markup = Utils.findInReactTree(returnValue, m => m && m.props && m.props.className && m.props.className.includes('da-markup'));
         const roleColor = thisObject.props.message.colorString;
-        if (markup && roleColor) markup.props.style = {color: roleColor};
+        if (markup && roleColor) markup.props.style = {color: ColorShader.lighten(roleColor, this.intensity)};
     }
 
     disabled(e) {
         Patcher.unpatchAll('BD:ColoredText');
+        this.intensitySetting.off('setting-updated', this._intensityUpdated);
     }
 
 }

client/src/data/user.settings.default.json

@@ -129,6 +129,24 @@
                         "value": false
                     }
                 ]
+            },
+            {
+                "id": "advanced",
+                "name": "Advanced",
+                "type": "drawer",
+                "settings": [
+                    {
+                        "id": "colored-text-intensity",
+                        "type": "slider",
+                        "text": "Colored Text Intensity",
+                        "hint": "Intensity of the colored text setting.",
+                        "value": 100,
+                        "min": 0,
+                        "max": 100,
+                        "step": 1,
+                        "unit": "%"
+                    }
+                ]
             }
         ]
     },