From 8691469ff18985225c1745dc868d56c3e85fd1b5 Mon Sep 17 00:00:00 2001
From: "Mr. Stallion" <mrstallion@nobody.nowhere.fauxdomain.ext>
Date: Tue, 29 Dec 2020 22:54:16 -0600
Subject: [PATCH] Colorblind mode

---
 CHANGELOG.md                                  |   4 +
 README.md                                     |   7 +-
 chat/ChatView.vue                             |   4 +
 chat/ConversationView.vue                     |   4 +-
 chat/SettingsView.vue                         |  14 +-
 chat/assets/filters.svg                       |  79 ++++++++
 chat/common.ts                                |   1 +
 chat/interfaces.ts                            |   1 +
 docs/_config.yml                              |   2 +-
 electron/Index.vue                            |  12 +-
 electron/package.json                         |   2 +-
 package.json                                  |   2 +-
 scss/_rising.scss                             |  95 +++++-----
 scss/themes/_chat.scss                        |   8 +
 scss/themes/_colorblind.scss                  |  40 ++++
 scss/themes/chat/dark.scss                    |   9 +
 scss/themes/chat/default.scss                 |  25 +++
 scss/themes/chat/light.scss                   |   9 +
 scss/themes/variables/_dark_variables.scss    |   4 +
 scss/themes/variables/_default_variables.scss |   4 +
 scss/themes/variables/_light_variables.scss   |   4 +
 scss/util/accecss.scss                        | 175 ++++++++++++++++++
 22 files changed, 445 insertions(+), 60 deletions(-)
 create mode 100644 chat/assets/filters.svg
 create mode 100644 scss/themes/_colorblind.scss
 create mode 100644 scss/util/accecss.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1ac3bae..861ff4c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.8.0
+*   Added colorblind mode (settings -> rising -> colorblind mode)
+
+
 ## 1.7.0
 *   Option for serving ads in random order
 *   Fixed Twitter previews crashing the app
diff --git a/README.md b/README.md
index 0954309..d1e7b37 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # Download
-[Windows](https://github.com/mrstallion/fchat-rising/releases/download/v1.7.0/F-Chat-Rising-1.7.0-win.exe) (75 MB)
-| [MacOS](https://github.com/mrstallion/fchat-rising/releases/download/v1.7.0/F-Chat-Rising-1.7.0-macos.dmg) (76 MB)
-| [Linux](https://github.com/mrstallion/fchat-rising/releases/download/v1.7.0/F-Chat-Rising-1.7.0-linux.AppImage) (76 MB)
+[Windows](https://github.com/mrstallion/fchat-rising/releases/download/v1.8.0/F-Chat-Rising-1.8.0-win.exe) (75 MB)
+| [MacOS](https://github.com/mrstallion/fchat-rising/releases/download/v1.8.0/F-Chat-Rising-1.8.0-macos.dmg) (76 MB)
+| [Linux](https://github.com/mrstallion/fchat-rising/releases/download/v1.8.0/F-Chat-Rising-1.8.0-linux.AppImage) (76 MB)
 
 
 # F-Chat Rising
@@ -66,6 +66,7 @@ This repository contains a heavily customized version of the mainline F-Chat 3.0
     *    PM list shows characters' online status as a colored icon
     *    Use `Ctrl+Tab`, `Ctrl+Shift+Tab`, `Ctrl+PgDown`, and `Ctrl+PgUp` to switch between character tabs
     *    Show number of unread notes and messages in the bottom right corner
+    *    Colorblind mode
 *   Technical Details for Nerds
     *    Upgraded to Electron 10.x
     *    Replaced `node-spellchecker` with the built-in spellchecker that ships with Electron 8+
diff --git a/chat/ChatView.vue b/chat/ChatView.vue
index 88208c4..f2c787f 100644
--- a/chat/ChatView.vue
+++ b/chat/ChatView.vue
@@ -362,6 +362,10 @@
         getClasses(conversation: Conversation): string {
             return conversation === core.conversations.selectedConversation ? ' active' : unreadClasses[conversation.unread];
         }
+
+        isColorblindModeActive(): boolean {
+          return core.state.settings.risingColorblindMode;
+        }
     }
 </script>
 
diff --git a/chat/ConversationView.vue b/chat/ConversationView.vue
index 749edb1..c2ba950 100644
--- a/chat/ConversationView.vue
+++ b/chat/ConversationView.vue
@@ -785,8 +785,8 @@
             padding-bottom: 2px;
 
             &.unicorn {
-              background-color: #00adad;
-              border: solid 1px #1d9a9a;
+              background-color: var(--scoreUnicornMatchBg);
+              border: 1px solid var(--scoreUnicornMatchFg);
               box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.5);
 
               &::before {
diff --git a/chat/SettingsView.vue b/chat/SettingsView.vue
index 6de751a..8f6d8f8 100644
--- a/chat/SettingsView.vue
+++ b/chat/SettingsView.vue
@@ -192,6 +192,13 @@
                 </label>
             </div>
 
+            <div class="form-group">
+                <label class="control-label" for="risingColorblindMode">
+                    <input type="checkbox" id="risingColorblindMode" v-model="risingColorblindMode"/>
+                    Colorblind mode
+                </label>
+            </div>
+
         </div>
         <div v-show="selectedTab === '3'">
             <template v-if="hidden.length">
@@ -260,6 +267,7 @@
         risingComparisonInSearch!: boolean;
 
         risingShowUnreadOfflineCount!: boolean;
+        risingColorblindMode!: boolean;
 
 
         async load(): Promise<void> {
@@ -295,6 +303,8 @@
             this.risingComparisonInUserMenu = settings.risingComparisonInUserMenu;
             this.risingComparisonInSearch = settings.risingComparisonInSearch;
             this.risingShowUnreadOfflineCount = settings.risingShowUnreadOfflineCount;
+
+            this.risingColorblindMode = settings.risingColorblindMode;
         }
 
         async doImport(): Promise<void> {
@@ -347,7 +357,9 @@
                 risingCharacterPreview: this.risingCharacterPreview,
                 risingComparisonInUserMenu: this.risingComparisonInUserMenu,
                 risingComparisonInSearch: this.risingComparisonInSearch,
-                risingShowUnreadOfflineCount: this.risingShowUnreadOfflineCount
+                risingShowUnreadOfflineCount: this.risingShowUnreadOfflineCount,
+
+                risingColorblindMode: this.risingColorblindMode
             };
             if(this.notifications) await core.notifications.requestPermission();
         }
diff --git a/chat/assets/filters.svg b/chat/assets/filters.svg
new file mode 100644
index 0000000..5708e81
--- /dev/null
+++ b/chat/assets/filters.svg
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1">
+  <defs>
+    <filter id="protanopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.567, 0.433, 0,     0, 0
+                0.558, 0.442, 0,     0, 0
+                0,     0.242, 0.758, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+    <filter id="protanomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.817, 0.183, 0,     0, 0
+                0.333, 0.667, 0,     0, 0
+                0,     0.125, 0.875, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+    <filter id="deuteranopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.625, 0.375, 0,   0, 0
+                0.7,   0.3,   0,   0, 0
+                0,     0.3,   0.7, 0, 0
+                0,     0,     0,   1, 0"/>
+    </filter>
+    <filter id="deuteranomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.8,   0.2,   0,     0, 0
+                0.258, 0.742, 0,     0, 0
+                0,     0.142, 0.858, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+    <filter id="tritanopia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.95, 0.05,  0,     0, 0
+                0,    0.433, 0.567, 0, 0
+                0,    0.475, 0.525, 0, 0
+                0,    0,     0,     1, 0"/>
+    </filter>
+    <filter id="tritanomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.967, 0.033, 0,     0, 0
+                0,     0.733, 0.267, 0, 0
+                0,     0.183, 0.817, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+    <filter id="achromatopsia">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.299, 0.587, 0.114, 0, 0
+                0.299, 0.587, 0.114, 0, 0
+                0.299, 0.587, 0.114, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+    <filter id="achromatomaly">
+      <feColorMatrix
+        in="SourceGraphic"
+        type="matrix"
+        values="0.618, 0.320, 0.062, 0, 0
+                0.163, 0.775, 0.062, 0, 0
+                0.163, 0.320, 0.516, 0, 0
+                0,     0,     0,     1, 0"/>
+    </filter>
+  </defs>
+</svg>
diff --git a/chat/common.ts b/chat/common.ts
index 68745fb..b7d72fb 100644
--- a/chat/common.ts
+++ b/chat/common.ts
@@ -53,6 +53,7 @@ export class Settings implements ISettings {
     risingComparisonInSearch = true;
 
     risingShowUnreadOfflineCount = true;
+    risingColorblindMode = false;
 }
 
 
diff --git a/chat/interfaces.ts b/chat/interfaces.ts
index c83fbac..f055624 100644
--- a/chat/interfaces.ts
+++ b/chat/interfaces.ts
@@ -219,6 +219,7 @@ export namespace Settings {
         readonly risingComparisonInSearch: boolean;
 
         readonly risingShowUnreadOfflineCount: boolean;
+        readonly risingColorblindMode: boolean;
     }
 }
 
diff --git a/docs/_config.yml b/docs/_config.yml
index ca2acfa..3a493c4 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -49,7 +49,7 @@ theme: jekyll-theme-slate
 changelog: https://github.com/mrstallion/fchat-rising/blob/master/CHANGELOG.md
 
 download:
-  version: 1.7.0
+  version: 1.8.0
 
   url: https://github.com/mrstallion/fchat-rising/releases/download/v%VERSION%/F-Chat-Rising-%VERSION%-%PLATFORM_TAIL%
 
diff --git a/electron/Index.vue b/electron/Index.vue
index bbc2382..858c52d 100644
--- a/electron/Index.vue
+++ b/electron/Index.vue
@@ -443,11 +443,17 @@
         }
 
 
-        getThemeClass(): string {
-            return `theme-${this.settings.theme}`;
+        getThemeClass(): Record<string, boolean> {
+          try {
+            return {
+              [`theme-${this.settings.theme}`]: true,
+              colorblindMode: core.state.settings.risingColorblindMode
+            };
+          } catch(err) {
+            return { [`theme-${this.settings.theme}`]: true };
+          }
         }
 
-
         nextProfile(): void {
           if (!this.nextProfileAvailable()) {
             return;
diff --git a/electron/package.json b/electron/package.json
index 4ee680e..af0106f 100644
--- a/electron/package.json
+++ b/electron/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fchat",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "author": "The F-List Team and Mister Stallion (Esq.)",
   "description": "F-List.net Chat Client",
   "main": "main.js",
diff --git a/package.json b/package.json
index 0ead2a0..38d1155 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "f-list-rising",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "author": "The F-List Team and and Mister Stallion (Esq.)",
   "description": "A heavily modded F-Chat 3.0 client for F-List",
   "license": "MIT",
diff --git a/scss/_rising.scss b/scss/_rising.scss
index 19eb594..e52bc45 100644
--- a/scss/_rising.scss
+++ b/scss/_rising.scss
@@ -1,55 +1,54 @@
-:root {
-  --scoreMatchBg: #{$scoreMatchBg};
-  --scoreMatchFg: #{$scoreMatchFg};
-  --scoreWeakMatchBg: #{$scoreWeakMatchBg};
-  --scoreWeakMatchFg: #{$scoreWeakMatchFg};
-  --scoreWeakMismatchBg: #{$scoreWeakMismatchBg};
-  --scoreWeakMismatchFg: #{$scoreWeakMismatchFg};
-  --scoreMismatchBg: #{$scoreMismatchBg};
-  --scoreMismatchFg: #{$scoreMismatchFg};
-  --scoreTitleColor: #{$scoreTitleColor};
-  --scoreMinimizeButtonFg: #{$scoreMinimizeButtonFg};
-  --scoreMinimizeButtonBg: #{$scoreMinimizeButtonBg};
-  --scoreReportBg: #{$scoreReportBg};
+$risingVariables: (
+  scoreMatchBg: #{$scoreMatchBg},
+  scoreMatchFg: #{$scoreMatchFg},
+  scoreWeakMatchBg: #{$scoreWeakMatchBg},
+  scoreWeakMatchFg: #{$scoreWeakMatchFg},
+  scoreWeakMismatchBg: #{$scoreWeakMismatchBg},
+  scoreWeakMismatchFg: #{$scoreWeakMismatchFg},
+  scoreMismatchBg: #{$scoreMismatchBg},
+  scoreMismatchFg: #{$scoreMismatchFg},
+  scoreTitleColor: #{$scoreTitleColor},
+  scoreMinimizeButtonFg: #{$scoreMinimizeButtonFg},
+  scoreMinimizeButtonBg: #{$scoreMinimizeButtonBg},
+  scoreReportBg: #{$scoreReportBg},
 
-  --scoreFadedMatchBg: #{$scoreFadedMatchBg};
-  --scoreFadedMatchFg: #{$scoreFadedMatchFg};
-  --scoreFadedWeakMatchBg: #{$scoreFadedWeakMatchBg};
-  --scoreFadedWeakMatchFg: #{$scoreFadedWeakMatchFg};
-  --scoreFadedWeakMismatchBg: #{$scoreFadedWeakMismatchBg};
-  --scoreFadedWeakMismatchFg: #{$scoreFadedWeakMismatchFg};
-  --scoreFadedMismatchBg: #{$scoreFadedMismatchBg};
-  --scoreFadedMismatchFg: #{$scoreFadedMismatchFg};
+  scoreFadedMatchBg: #{$scoreFadedMatchBg},
+  scoreFadedMatchFg: #{$scoreFadedMatchFg},
+  scoreFadedWeakMatchBg: #{$scoreFadedWeakMatchBg},
+  scoreFadedWeakMatchFg: #{$scoreFadedWeakMatchFg},
+  scoreFadedWeakMismatchBg: #{$scoreFadedWeakMismatchBg},
+  scoreFadedWeakMismatchFg: #{$scoreFadedWeakMismatchFg},
+  scoreFadedMismatchBg: #{$scoreFadedMismatchBg},
+  scoreFadedMismatchFg: #{$scoreFadedMismatchFg},
 
-  --scoreStandoutMatchBorderColor: #{$scoreStandoutMatchBorderColor};
-  --scoreStandoutMatchBgColor: #{$scoreStandoutMatchBgColor};
-  --scoreStandoutWeakMatchBorderColor: #{$scoreStandoutWeakMatchBorderColor};
-  --scoreStandoutWeakMatchBgColor: #{$scoreStandoutWeakMatchBgColor};
-  --scoreStandoutNeutralBorderColor: #{$scoreStandoutNeutralBorderColor};
-  --scoreStandoutWeakMismatchBorderColor: #{$scoreStandoutWeakMismatchBorderColor};
-  --scoreStandoutWeakMismatchBgColor: #{$scoreStandoutWeakMismatchBgColor};
-  --scoreStandoutMismatchBorderColor: #{$scoreStandoutMismatchBorderColor};
+  scoreStandoutMatchBorderColor: #{$scoreStandoutMatchBorderColor},
+  scoreStandoutMatchBgColor: #{$scoreStandoutMatchBgColor},
+  scoreStandoutWeakMatchBorderColor: #{$scoreStandoutWeakMatchBorderColor},
+  scoreStandoutWeakMatchBgColor: #{$scoreStandoutWeakMatchBgColor},
+  scoreStandoutNeutralBorderColor: #{$scoreStandoutNeutralBorderColor},
+  scoreStandoutWeakMismatchBorderColor: #{$scoreStandoutWeakMismatchBorderColor},
+  scoreStandoutWeakMismatchBgColor: #{$scoreStandoutWeakMismatchBgColor},
+  scoreStandoutMismatchBorderColor: #{$scoreStandoutMismatchBorderColor},
 
-  --characterImageWrapperBg: #{$characterImageWrapperBg};
-  --characterGuestbookPostBg: #{$characterGuestbookPostBg};
-  --characterGuestbookPostBorderColor: #{$characterGuestbookPostBorderColor};
-  --characterGuestbookReplyBg: #{$characterGuestbookReplyBg};
-  --characterGuestbookTimestampFg: #{$characterGuestbookTimestampFg};
-  --characterKinkCustomColor: #{$characterKinkCustomColor};
-  --characterKinkCustomBorderColor: #{$characterKinkCustomBorderColor};
-  --characterKinkStockColor: #{$characterKinkStockColor};
-  --characterKinkStockHighlightedColor: #{$characterKinkStockHighlightedColor};
-  --characterInfotagColor: #{$characterInfotagColor};
+  characterImageWrapperBg: #{$characterImageWrapperBg},
+  characterGuestbookPostBg: #{$characterGuestbookPostBg},
+  characterGuestbookPostBorderColor: #{$characterGuestbookPostBorderColor},
+  characterGuestbookReplyBg: #{$characterGuestbookReplyBg},
+  characterGuestbookTimestampFg: #{$characterGuestbookTimestampFg},
+  characterKinkCustomColor: #{$characterKinkCustomColor},
+  characterKinkCustomBorderColor: #{$characterKinkCustomBorderColor},
+  characterKinkStockColor: #{$characterKinkStockColor},
+  characterKinkStockHighlightedColor: #{$characterKinkStockHighlightedColor},
+  characterInfotagColor: #{$characterInfotagColor},
 
-  --messageTimeBgColor: #{$messageTimeBgColor};
-  --messageTimeFgColor: #{$messageTimeFgColor};
+  messageTimeBgColor: #{$messageTimeBgColor},
+  messageTimeFgColor: #{$messageTimeFgColor},
 
-  --headerBackgroundMaskColor: #{$headerBackgroundMaskColor};
+  headerBackgroundMaskColor: #{$headerBackgroundMaskColor},
 
-  --linkForcedColor: #{$linkForcedColor};
-  --tabSecondaryFgColor: #{$tabSecondaryFgColor};
-
-  --input-bg: #{$input-bg};
-  --input-color: #{$input-color};
-}
+  linkForcedColor: #{$linkForcedColor},
+  tabSecondaryFgColor: #{$tabSecondaryFgColor},
 
+  input-bg: #{$input-bg},
+  input-color: #{$input-color},
+);
diff --git a/scss/themes/_chat.scss b/scss/themes/_chat.scss
index f7ef985..53fc493 100644
--- a/scss/themes/_chat.scss
+++ b/scss/themes/_chat.scss
@@ -34,6 +34,14 @@
 @import "../flist_overrides";
 @import "../rising";
 
+
+:root {
+  @each $varName, $value in $risingVariables {
+    --#{$varName}: #{$value};
+  }
+}
+
+
 * {
   &::-webkit-scrollbar-track {
     box-shadow: inset 0 0 8px $card-border-color;
diff --git a/scss/themes/_colorblind.scss b/scss/themes/_colorblind.scss
new file mode 100644
index 0000000..a1a5556
--- /dev/null
+++ b/scss/themes/_colorblind.scss
@@ -0,0 +1,40 @@
+$scoreUnicornMatchBg: #0093d2;
+$scoreUnicornMatchFg: #0093d2;
+$scoreMatchBg: #006cb7;
+$scoreMatchFg: #006cb7;
+$scoreWeakMatchBg: #015486;
+$scoreWeakMatchFg: #015486;
+$scoreWeakMismatchBg: #606060;
+$scoreWeakMismatchFg: #606060;
+$scoreMismatchBg: #ab0000;
+$scoreMismatchFg: #ab0000;
+
+$scoreStandoutMatchBorderColor: #049ada;
+$scoreStandoutMatchBgColor: rgba(4, 132, 186, 0.47);
+$scoreStandoutWeakMatchBorderColor: #006cb7;
+$scoreStandoutWeakMatchBgColor: rgba(2, 91, 153, 0.4);
+$scoreStandoutNeutralBorderColor: rgba(0, 0, 0, 0);
+$scoreStandoutWeakMismatchBorderColor: #888;
+$scoreStandoutWeakMismatchBgColor: rgba(170, 170, 170, 0.0);
+$scoreStandoutMismatchBorderColor: #ab0000;
+
+$genders: (
+        "shemale": #e2445f,
+        "herm": #d40759,
+        "none": $gray-500,
+        "female": #66ff74,
+        "male": #6699ff,
+        "male-herm": #007fff,
+        "transgender": #ee8822,
+        "cunt-boy": #63ee22,
+);
+
+@each $gender, $color in $genders {
+  .gender-#{$gender} {
+    color: $color;
+  }
+
+  .message-event .gender-#{$gender} {
+    color: lighten($color, 5%)
+  }
+}
diff --git a/scss/themes/chat/dark.scss b/scss/themes/chat/dark.scss
index 95fd132..1c4eeee 100644
--- a/scss/themes/chat/dark.scss
+++ b/scss/themes/chat/dark.scss
@@ -31,3 +31,12 @@
         }
     }
 }
+
+.colorblindMode {
+  @import "../colorblind";
+  @import "../../rising";
+
+  @each $varName, $value in $risingVariables {
+    --#{$varName}: #{$value};
+  }
+}
diff --git a/scss/themes/chat/default.scss b/scss/themes/chat/default.scss
index 75bd1ed..0cf5681 100644
--- a/scss/themes/chat/default.scss
+++ b/scss/themes/chat/default.scss
@@ -31,3 +31,28 @@
     }
   }
 }
+
+.colorblindMode {
+  @import "../colorblind";
+  @import "../../rising";
+
+  @each $varName, $value in $risingVariables {
+    --#{$varName}: #{$value};
+  }
+}
+
+//@import "../../util/accecss";
+//
+//@include accecss(
+//  'html body',
+//  false,
+//  false,
+//  tritanopia
+//);
+
+// deuteranomaly
+// protanomaly
+// protanopia
+// deuteranopia
+// tritanomaly
+// tritanopia
diff --git a/scss/themes/chat/light.scss b/scss/themes/chat/light.scss
index 0e6b94f..d27368b 100644
--- a/scss/themes/chat/light.scss
+++ b/scss/themes/chat/light.scss
@@ -31,3 +31,12 @@
         }
     }
 }
+
+.colorblindMode {
+  @import "../colorblind";
+  @import "../../rising";
+
+  @each $varName, $value in $risingVariables {
+    --#{$varName}: #{$value};
+  }
+}
diff --git a/scss/themes/variables/_dark_variables.scss b/scss/themes/variables/_dark_variables.scss
index d7aa9b0..a693db7 100644
--- a/scss/themes/variables/_dark_variables.scss
+++ b/scss/themes/variables/_dark_variables.scss
@@ -60,6 +60,8 @@ $text-background-color: $gray-100;
 $text-background-color-disabled: $gray-200;
 
 // F-List Rising
+$scoreUnicornMatchBg: rgb(0, 173, 173);
+$scoreUnicornMatchFg: rgb(29, 154, 154);
 $scoreMatchBg: rgb(0, 142, 0);
 $scoreMatchFg: rgb(0, 113, 0);
 $scoreWeakMatchBg: rgb(0, 80, 0);
@@ -73,6 +75,8 @@ $scoreMinimizeButtonFg: rgba(255, 255, 255, 0.7);
 $scoreMinimizeButtonBg: rgba(0,0,0,0.2);
 $scoreReportBg: rgba(0,0,0,0.2);
 
+$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
+$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
 $scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
 $scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
 $scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
diff --git a/scss/themes/variables/_default_variables.scss b/scss/themes/variables/_default_variables.scss
index decdad0..f81a00b 100644
--- a/scss/themes/variables/_default_variables.scss
+++ b/scss/themes/variables/_default_variables.scss
@@ -59,6 +59,8 @@ $text-background-color: $gray-200;
 $text-background-color-disabled: $gray-100;
 
 // F-List Rising
+$scoreUnicornMatchBg: rgb(0, 173, 173);
+$scoreUnicornMatchFg: rgb(29, 154, 154);
 $scoreMatchBg: rgb(0, 142, 0);
 $scoreMatchFg: rgb(0, 113, 0);
 $scoreWeakMatchBg: rgb(0, 80, 0);
@@ -72,6 +74,8 @@ $scoreMinimizeButtonFg: rgba(255, 255, 255, 0.7);
 $scoreMinimizeButtonBg: rgba(0,0,0,0.2);
 $scoreReportBg: rgba(0,0,0,0.2);
 
+$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
+$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
 $scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
 $scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
 $scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
diff --git a/scss/themes/variables/_light_variables.scss b/scss/themes/variables/_light_variables.scss
index 38b7c8a..6b39f0f 100644
--- a/scss/themes/variables/_light_variables.scss
+++ b/scss/themes/variables/_light_variables.scss
@@ -15,6 +15,8 @@ $text-muted: $gray-500;
 
 
 // F-List Rising
+$scoreUnicornMatchBg: rgb(0, 173, 173);
+$scoreUnicornMatchFg: rgb(29, 154, 154);
 $scoreMatchBg: rgba(0, 180, 0, 0.65);
 $scoreMatchFg: rgba(0, 133, 0, 0.4);
 $scoreWeakMatchBg: rgba(0, 180, 0, 0.22);
@@ -28,6 +30,8 @@ $scoreMinimizeButtonFg: rgba(255, 255, 255, 0.6);
 $scoreMinimizeButtonBg: rgba(0,0,0,0.1);
 $scoreReportBg: rgba(0,0,0,0.08);
 
+$scoreFadedUnicornMatchBg: adjust-color($scoreUnicornMatchBg, $alpha: -0.6);
+$scoreFadedUnicornMatchFg: adjust-color($scoreUnicornMatchFg, $alpha: -0.6);
 $scoreFadedMatchBg: adjust-color($scoreMatchBg, $alpha: -0.6);
 $scoreFadedMatchFg: adjust-color($scoreMatchFg, $alpha: -0.6);
 $scoreFadedWeakMatchBg: adjust-color($scoreWeakMatchBg, $alpha: -0.6);
diff --git a/scss/util/accecss.scss b/scss/util/accecss.scss
new file mode 100644
index 0000000..ae2d58d
--- /dev/null
+++ b/scss/util/accecss.scss
@@ -0,0 +1,175 @@
+/// GRID
+
+$path-to-filter: '../../../chat/assets';
+
+@mixin log(){
+  content:'.'attr(class);position: absolute;
+  top: 0;left: 0;z-index: 99999999;padding: .1em;background: rgba(0,0,0, .9);
+  opacity: .1;
+  color: #fff !important;
+  font-size: 14px;
+}
+
+@mixin grid(){
+
+
+  box-shadow: inset 0 0 0 1px rgba(purple, .1) !important;
+  &:hover{
+    box-shadow: inset 0 0 0 1px rgba(purple, 1) !important;
+  }
+  *{
+    box-shadow: inset 0 0 0 1px rgba(red, .1) !important;
+    &:hover{
+      box-shadow: inset 0 0 0 1px rgba(red, 1) !important;
+    }
+    + *{
+      box-shadow: inset 0 0 0 1px rgba(blue, .1) !important;
+      &:hover{
+        box-shadow: inset 0 0 0 1px rgba(blue, 1) !important;
+      }
+      + *{
+        box-shadow: inset 0 0 0 1px rgba(green, .1) !important;
+        &:hover{
+          box-shadow: inset 0 0 0 1px rgba(green, 1) !important;
+        }
+        + *{
+          box-shadow: inset 0 0 0 1px rgba(purple, .1) !important;
+          &:hover{
+            box-shadow: inset 0 0 0 1px rgba(purple, 1) !important;
+          }
+          + *{
+            box-shadow: inset 0 0 0 1px rgba(red, .1) !important;
+            &:hover{
+              box-shadow: inset 0 0 0 1px rgba(red, 1) !important;
+            }
+            +  *{
+              box-shadow: inset 0 0 0 1px rgba(blue, .1) !important;
+              &:hover{
+                box-shadow: inset 0 0 0 1px rgba(blue, 1) !important;
+              }
+              +  *{
+                box-shadow: inset 0 0 0 1px rgba(green, .1) !important;
+                &:hover{
+                  box-shadow: inset 0 0 0 1px rgba(green, 1) !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/// Mixin debug
+/// @include debug(<true:false>, <true:false>, <false:filterName>, <false:elementName>);
+/// Param :
+///        [1]: Specified debug element
+///        [2]: css zone
+///        [3]: Grayscale view
+///        [4]: Colorblind filters **
+///
+/// ** Available filters : `protanopia`, `protanomaly`, `deuteranopia`, `deuteranomaly`, `tritanopia`, `tritanomaly`, `achromatopsia`, `achromatomal
+///
+///
+/// Usage :
+/// `@include accecss(<element:false>, <true:false>, <true:false>, <filterName:false>);`
+///
+/// @group helpers
+
+@mixin accecss($element: false, $zones: false, $grayscale: false, $cbFilter: false){
+
+  @if $grayscale == true and $cbFilter == false {
+    @if $element != false {
+      #{$element} {
+        filter: grayscale(100%);
+      }
+    }
+
+    @else {
+      html body {
+        filter: grayscale(100%);
+      }
+    }
+  }
+  @else if $grayscale == true and $cbFilter != false {
+    @if $element != false {
+      #{$element} {
+
+
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}');
+
+      }
+    }
+
+    @else {
+      html body {
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}') grayscale(0) !important;
+      }
+    }
+  }
+
+  @else if $grayscale == false and $cbFilter != false{
+    @if $element != false {
+      #{$element} {
+
+
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}');
+
+      }
+    }
+
+    @else {
+      html body {
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}') grayscale(0) !important;
+      }
+    }
+  }
+
+  @else if $cbFilter != false and $element != false {
+    @if $element != false {
+      #{$element} {
+
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}');
+
+      }
+    }
+
+    @else {
+      html body {
+        filter: url('#{$path-to-filter}/filters.svg##{$cbFilter}') grayscale(0) !important;
+      }
+    }
+  }
+
+  @if $zones == true or
+  $zones == 'logs' or
+  $grayscale == true and $cbFilter == false and $zones == true or
+  $grayscale == true and $cbFilter != false and $zones == true or
+  $grayscale == false and $cbFilter != false and $zones == true    {
+    /*
+      CSS accecss : TRUE
+      */
+
+      @if $element == false {
+        html, body{
+          @include grid();
+        }
+      }
+
+      @else if $element != false {
+        #{$element}{
+          @include grid();
+        }
+      }
+    }
+
+
+  @else{
+  /*
+  CSS accecss : FALSE
+  */
+  }
+}
+