Add high-contrast glyph rarity colors

src/components/modals/options/glyph-appearance/GlyphDisplayOptionsModal.vue

@@ -24,6 +24,7 @@ export default {
       glyphInfoType: 0,
       showGlyphInfoByDefault: false,
       glyphBorders: false,
+      highContrastRarity: false,
     };
   },
   computed: {
@@ -64,6 +65,10 @@ export default {
       player.options.glyphBorders = newValue;
       EventHub.dispatch(GAME_EVENT.GLYPH_VISUAL_CHANGE);
     },
+    highContrastRarity(newValue) {
+      player.options.highContrastRarity = newValue;
+      EventHub.dispatch(GAME_EVENT.GLYPH_VISUAL_CHANGE);
+    },
   },
   methods: {
     update() {
@@ -75,6 +80,7 @@ export default {
       this.glyphInfoType = options.showHintText.glyphInfoType;
       this.showGlyphInfoByDefault = options.showHintText.showGlyphInfoByDefault;
       this.glyphBorders = options.glyphBorders;
+      this.highContrastRarity = options.highContrastRarity;
     },
     noEffectStyle() {
       if (this.glyphInfoType !== 0) return null;
@@ -123,6 +129,10 @@ export default {
         :style="noEffectStyle()"
         text="Always show Glyph Info:"
       />
+      <ModalOptionsToggleButton
+        v-model="highContrastRarity"
+        text="High-contrast rarity colors:"
+      />
       <ExpandingControlBox
         class="o-primary-btn c-dropdown-btn"
       >

src/core/constants.js

@@ -240,42 +240,58 @@ window.GlyphRarities = [
     minStrength: 3.5,
     name: "Celestial",
     darkColor: "#3d3dec",
-    lightColor: "#9696ff"
+    lightColor: "#9696ff",
+    darkHighContrast: "#ffff00",
+    lightHighContrast: "#c0c000"
   }, {
     minStrength: 3.25,
     name: "Transcendent",
     darkColor: "#03ffec",
-    lightColor: "#00c3c3"
+    lightColor: "#00c3c3",
+    darkHighContrast: "#00ffff",
+    lightHighContrast: "#00c0c0"
   }, {
     minStrength: 3,
     name: "Mythical",
     darkColor: "#d50000",
-    lightColor: "#d50000"
+    lightColor: "#d50000",
+    darkHighContrast: "#c00000",
+    lightHighContrast: "#ff0000"
   }, {
     minStrength: 2.75,
     name: "Legendary",
     darkColor: "#ff9800",
-    lightColor: "#d68100"
+    lightColor: "#d68100",
+    darkHighContrast: "#ff8000",
+    lightHighContrast: "#ff8000"
   }, {
     minStrength: 2.5,
     name: "Epic",
     darkColor: "#9c27b0",
-    lightColor: "#9c27b0"
+    lightColor: "#9c27b0",
+    darkHighContrast: "#ff00ff",
+    lightHighContrast: "#ff00ff"
   }, {
     minStrength: 2,
     name: "Rare",
     darkColor: "#5096f3",
-    lightColor: "#0d40ff"
+    lightColor: "#0d40ff",
+    darkHighContrast: "#6060ff",
+    lightHighContrast: "#0000ff"
   }, {
     minStrength: 1.5,
     name: "Uncommon",
     darkColor: "#43a047",
-    lightColor: "#1e8622"
+    lightColor: "#1e8622",
+    darkHighContrast: "#00ff00",
+    lightHighContrast: "#00b000"
   }, {
     minStrength: 1,
     name: "Common",
     darkColor: "#ffffff",
-    lightColor: "#000000"
+    lightColor: "#000000",
+    darkHighContrast: "#ffffff",
+    lightHighContrast: "#000000"
   },
 ];
 

src/core/glyphs/glyph-cosmetics.js

@@ -173,7 +173,8 @@ export const GlyphAppearanceHandler = {
   getRarityColor(strength, type) {
     const rarityEntry = getRarity(strength);
     const isLight = CosmeticGlyphTypes[type].currentColor.bg === "white";
-    return rarityEntry[isLight ? "lightColor" : "darkColor"];
+    const colorKey = `${isLight ? "light" : "dark"}${player.options.highContrastRarity ? "HighContrast" : "Color"}`;
+    return rarityEntry[colorKey];
   },
   getColorProps(colorStr) {
     // This condition is a bit odd - this specifically selects out the hybrid custom colors which have both a BG color

src/core/player.js

@@ -808,6 +808,7 @@ window.player = {
     headerTextColored: false,
     showNewGlyphIcon: true,
     showUnequippedGlyphIcon: true,
+    highContrastRarity: false,
     hideAlterationEffects: false,
     ignoreGlyphEffects: false,
     ignoreGlyphLevel: false,