feat: add color accessibility mode (#1202)

Author: Robot-Inventor

src/_locales/en/messages.json

@@ -123,6 +123,9 @@
     "settingsShowReleaseNotes": {
         "message": "Show release notes after updates"
     },
+    "settingsEnableColorAccessibilityMode": {
+        "message": "Enable color accessibility mode"
+    },
     "settingsPleaseReload": {
         "message": "Please reload Twitter after changing settings."
     },
@@ -186,4 +189,4 @@
     "exitWithoutOpening": {
         "message": "Close without opening"
     }
-}
+}

src/_locales/ja/messages.json

@@ -123,6 +123,9 @@
     "settingsShowReleaseNotes": {
         "message": "アップデート後にリリースノートを表示"
     },
+    "settingsEnableColorAccessibilityMode": {
+        "message": "カラーアクセシビリティモードを有効化"
+    },
     "settingsPleaseReload": {
         "message": "設定を変更したらTwitterを再読み込みしてください。"
     },
@@ -186,4 +189,4 @@
     "exitWithoutOpening": {
         "message": "開かずに終了"
     }
-}
+}

src/_locales/ko/messages.json

@@ -123,6 +123,9 @@
     "settingsShowReleaseNotes": {
         "message": "업데이트 후 릴리즈 노트 표시"
     },
+    "settingsEnableColorAccessibilityMode": {
+        "message": "컬러 접근성 모드 활성화"
+    },
     "settingsPleaseReload": {
         "message": "설정을 변경한 후 Twitter를 다시 로드해주세요"
     },
@@ -186,4 +189,4 @@
     "exitWithoutOpening": {
         "message": "열지 않고 종료"
     }
-}
+}

src/_locales/zh_TW/messages.json

@@ -126,6 +126,10 @@
         "message": "更新後顯示發行說明",
         "description": "This field was translated by machine translation."
     },
+    "settingsEnableColorAccessibilityMode": {
+        "message": "啟用色彩無障礙模式",
+        "description": "This field was translated by machine translation."
+    },
     "settingsPleaseReload": {
         "message": "如更改過設定，請重新載入 Twitter/X"
     },
@@ -191,4 +195,4 @@
     "exitWithoutOpening": {
         "message": "不需要並關閉"
     }
-}
+}

src/css/style.css

@@ -1,11 +1,21 @@
 body[data-color-scheme="light"] {
-    --sb-background-green: #70d28b;
-    --sb-background-red: #f99f9f;
+    --sb-background-green: #a4dda8;
+    --sb-background-red: #f6afaf;
 }
 
 body[data-color-scheme="dark"] {
-    --sb-background-green: #0c411a;
-    --sb-background-red: #702d27;
+    --sb-background-green: #184223;
+    --sb-background-red: #5d2420;
+}
+
+body[data-color-accessibility-mode][data-color-scheme="light"] {
+    --sb-background-green: #c3d2ee;
+    --sb-background-red: #f4b892;
+}
+
+body[data-color-accessibility-mode][data-color-scheme="dark"] {
+    --sb-background-green: #22487d;
+    --sb-background-red: #772929;
 }
 
 .shadowban-scanner-tombstone-necromancer {

src/ts/browserAction/settingsItems.ts

@@ -76,6 +76,11 @@ const SETTINGS_ITEMS = [
                 settingsName: "showReleaseNotes",
                 translationKey: "settingsShowReleaseNotes",
                 type: "checkbox"
+            },
+            {
+                settingsName: "enableColorAccessibilityMode",
+                translationKey: "settingsEnableColorAccessibilityMode",
+                type: "checkbox"
             }
         ],
         type: "group"

src/ts/common/settings.ts

@@ -7,6 +7,7 @@ import { storage } from "webextension-polyfill";
  */
 const DEFAULT_SETTINGS = {
     alwaysDetailedView: false,
+    enableColorAccessibilityMode: false,
     enableCompactMode: false,
     enableForOtherUsersProfiles: true,
     enableForOtherUsersTweets: true,

src/ts/components/sbsMessage.ts

@@ -50,11 +50,6 @@ class SbsMessage extends LitElement {
             font-family: sans-serif;
         }
 
-        :host {
-            --message-background-color-red: rgb(255, 0, 0, 0.2);
-            --message-background-color-green: rgb(0, 255, 0, 0.2);
-        }
-
         a {
             color: inherit;
         }
@@ -118,7 +113,7 @@ class SbsMessage extends LitElement {
         .shadowban-scanner-message md-filled-button {
             margin-top: 0.5em;
             width: 100%;
-            --md-filled-button-container-color: rgb(255, 255, 255, 0.25);
+            --md-filled-button-container-color: rgb(255, 255, 255, 0.2);
             --md-ripple-hover-color: white;
             --md-ripple-pressed-color: white;
             --_container-shadow-color: rgba(0, 0, 0, 0.3);

src/ts/contentScript.ts

@@ -8,12 +8,14 @@ import { isSettings } from "../types/common/settings.guard";
 const main = async (): Promise<void> => {
     const settings = await storage.local.get(DEFAULT_SETTINGS);
 
-    if (
-        ["pro.twitter.com", "pro.x.com"].includes(location.hostname) &&
-        isSettings(settings) &&
-        !settings.enableOnXPro
-    ) {
-        return;
+    if (isSettings(settings)) {
+        if (["pro.twitter.com", "pro.x.com"].includes(location.hostname) && !settings.enableOnXPro) {
+            return;
+        }
+
+        if (settings.enableColorAccessibilityMode) {
+            document.body.setAttribute("data-color-accessibility-mode", "true");
+        }
     }
 
     const translator = new Translator(

src/types/common/settings.d.ts

@@ -8,6 +8,7 @@ export interface Settings {
     showNotesInMessages: boolean;
     showTweetButton: boolean;
     enableCompactMode: boolean;
+    enableColorAccessibilityMode: boolean;
     enableOnXPro: boolean;
     showReleaseNotes: boolean;
 }