From 473355a5d9563aa01c6d2ec7f05035b4b0858942 Mon Sep 17 00:00:00 2001
From: mattyatea <mattyacocacora0@gmail.com>
Date: Sat, 23 Sep 2023 19:10:51 +0900
Subject: [PATCH] fix

---
 packages/frontend/src/components/MkButton.vue |  6 +-
 .../src/components/MkFollowButton.vue         | 14 +++--
 packages/frontend/src/components/MkMenu.vue   | 12 ++--
 .../frontend/src/components/MkPostForm.vue    | 20 +++----
 .../components/MkReactionsViewer.reaction.vue |  5 +-
 packages/frontend/src/components/MkSwitch.vue |  2 +-
 packages/frontend/src/components/MkTab.vue    |  2 +
 packages/frontend/src/store.ts                |  4 +-
 .../src/ui/_common_/navbar-for-mobile.vue     |  2 +-
 packages/frontend/src/ui/_common_/navbar.vue  | 55 +++++++++++++------
 10 files changed, 75 insertions(+), 47 deletions(-)

diff --git a/packages/frontend/src/components/MkButton.vue b/packages/frontend/src/components/MkButton.vue
index 6bd59b3906..94eab89ba9 100644
--- a/packages/frontend/src/components/MkButton.vue
+++ b/packages/frontend/src/components/MkButton.vue
@@ -319,7 +319,7 @@ function onMousedown(evt: MouseEvent): void {
   &.gamingDark {
     background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
     background-size: 1800% 1800%;
-    color: white !important;
+    color: black;
     -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
     -moz-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
     animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
@@ -327,7 +327,7 @@ function onMousedown(evt: MouseEvent): void {
     &:not(:disabled):hover {
       background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
       background-size: 1800% 1800% ;
-      color: white !important;
+      color: black;
       -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ;
       -moz-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
       animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ;
@@ -336,7 +336,7 @@ function onMousedown(evt: MouseEvent): void {
     &:not(:disabled):active {
       background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
       background-size: 1800% 1800% !important;
-      color: white !important;
+      color: black;
       -webkit-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite ;
       -moz-animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
       animation: AnimationDark 45s cubic-bezier(0, 0.45, 0.30, 1) infinite;
diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index f7cf3f2abb..c68bf96a0f 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -205,7 +205,7 @@ onBeforeUnmount(() => {
     -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
     -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
     animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-
+    border: solid 1px black;
   }
 
   &.gamingLight {
@@ -215,6 +215,7 @@ onBeforeUnmount(() => {
     -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
     -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
     animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
+    border: solid 1px white;
   }
 
   &.full {
@@ -293,6 +294,7 @@ onBeforeUnmount(() => {
       -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
       -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
       animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
+      border: solid 1px white;
     }
 
     &.gamingDark:active {
@@ -302,7 +304,7 @@ onBeforeUnmount(() => {
       -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
       -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
       animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
-      border-color: black;
+      border: solid 1px white;
     }
 
     &.gamingLight:hover {
@@ -311,7 +313,7 @@ onBeforeUnmount(() => {
       -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
       -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
       animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-      border-color: black;
+      border: solid 1px white;
     }
 
     &.gamingLight:active {
@@ -321,12 +323,13 @@ onBeforeUnmount(() => {
       -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
       -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
       animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-      border-color: black;
+      border: solid 1px white;
     }
 
     &.gamingDark {
       -webkit-text-fill-color: unset !important;
       color: black;
+      border: solid 1px white;
       background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
       background-size: 1800% 1800%;
       -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@@ -337,6 +340,7 @@ onBeforeUnmount(() => {
     &.gamingLight {
       -webkit-text-fill-color: unset !important;
       color: white;
+      border: solid 1px white;
       background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
       background-size: 1800% 1800% !important;
       -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@@ -357,7 +361,7 @@ onBeforeUnmount(() => {
   margin-right: 6px;
 
   &.gamingDark {
-    color: white;
+    color: black;
 
   }
 
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index cd104f6dce..d9341c5872 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -8,30 +8,30 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div
 		ref="itemsEl" v-hotkey="keymap"
 		class="_popup _shadow"
-		:class="[$style.root, { [$style.center]: align === 'center', [$style.asDrawer]: asDrawer }]"
+		:class="[$style.root, { [$style.center]: align === 'center', [$style.asDrawer]: asDrawer },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]"
 		:style="{ width: (width && !asDrawer) ? width + 'px' : '', maxHeight: maxHeight ? maxHeight + 'px' : '' }"
 		@contextmenu.self="e => e.preventDefault()"
 	>
 		<template v-for="(item, i) in items2">
 			<div v-if="item === null" role="separator" :class="$style.divider"></div>
-			<span v-else-if="item.type === 'label'" role="menuitem" :class="[$style.label, $style.item]">
+			<span v-else-if="item.type === 'label'" role="menuitem" :class="[$style.label, $style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]">
 				<span>{{ item.text }}</span>
 			</span>
-			<span v-else-if="item.type === 'pending'" role="menuitem" :tabindex="i" :class="[$style.pending, $style.item]">
+			<span v-else-if="item.type === 'pending'" role="menuitem" :tabindex="i" :class="[$style.pending, $style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]">
 				<span><MkEllipsis/></span>
 			</span>
-			<MkA v-else-if="item.type === 'link'" role="menuitem" :to="item.to" :tabindex="i" class="_button" :class="$style.item" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+			<MkA v-else-if="item.type === 'link'" role="menuitem" :to="item.to" :tabindex="i" class="_button" :class="[$style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" @click.passive="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
 				<MkAvatar v-if="item.avatar" :user="item.avatar" :class="$style.avatar"/>
 				<span>{{ item.text }}</span>
 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
 			</MkA>
-			<a v-else-if="item.type === 'a'" role="menuitem" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button" :class="$style.item" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+			<a v-else-if="item.type === 'a'" role="menuitem" :href="item.href" :target="item.target" :download="item.download" :tabindex="i" class="_button" :class="[$style.item,{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" @click="close(true)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<i v-if="item.icon" class="ti-fw" :class="[$style.icon, item.icon]"></i>
 				<span>{{ item.text }}</span>
 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
 			</a>
-			<button v-else-if="item.type === 'user'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
+			<button v-else-if="item.type === 'user'" role="menuitem" :tabindex="i" class="_button" :class="[$style.item, { [$style.active]: item.active },{[$style.gamingDark]: gaming === 'dark',[$style.gamingLight]: gaming === 'light' }]" :disabled="item.active" @click="clicked(item.action, $event)" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
 				<MkAvatar :user="item.user" :class="$style.avatar"/><MkUserName :user="item.user"/>
 				<span v-if="item.indicate" :class="$style.indicator"><i class="_indicatorCircle"></i></span>
 			</button>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index a3c0596402..f8ef7715f6 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -1064,23 +1064,21 @@ defineExpose({
   color: var(--fgOnAccent);
   background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
 
-  &.gamingLight {
-
+  &.gamingLight{
+    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
+    background-size: 1800% 1800%;
+    -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    -moz-animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+    animation: AnimationDark 44s cubic-bezier(0, 0.25, 0.25, 1) infinite;
+  }
+  &.gamingDark{
+    color: white;
     background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
     background-size: 1800% 1800% !important;
     -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
     -moz-animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
     animation: AnimationLight 45s cubic-bezier(0, 0.25, 0.25, 1) infinite !important;
   }
-  &.gamingDark{
-    color: white;
-    background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
-    background-size: 1800% 1800%;
-
-    -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
-    -moz-animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
-    animation: AnimationDark 44s cubic-bezier(0, 0.45, 0.30, 1) infinite;
-  }
 }
 
 .headerRightItem {
diff --git a/packages/frontend/src/components/MkReactionsViewer.reaction.vue b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
index d9c8a8a86c..6da1404bb6 100644
--- a/packages/frontend/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/frontend/src/components/MkReactionsViewer.reaction.vue
@@ -192,7 +192,7 @@ useTooltip(buttonEl, async (showing) => {
 		box-shadow: 0 0 0px 1px var(--accent) inset;
 
     &.gamingDark{
-      color:white;
+      color: black;
       background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);      background-size: 1800% 1800%;
       -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
       -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@@ -213,6 +213,9 @@ useTooltip(buttonEl, async (showing) => {
 			color: var(--accent);
       &.gamingLight{
         color: white;
+      }
+      &.gamingDark{
+        color: black;
       }
 		}
 
diff --git a/packages/frontend/src/components/MkSwitch.vue b/packages/frontend/src/components/MkSwitch.vue
index 4a14121c70..1c50b27ae3 100644
--- a/packages/frontend/src/components/MkSwitch.vue
+++ b/packages/frontend/src/components/MkSwitch.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div :class="[$style.root, { [$style.disabled]: disabled && gaming === '', [$style.checked]: checked && gaming === '' , [$style.gamingdarkDisabled]: disabled && gaming === 'dark', [$style.gamingLightDisabled]: disabled && gaming === 'light'}]">
+<div :class="[$style.root, { [$style.disabled]: disabled && gaming === '', [$style.checked]: checked && gaming === '' }]">
 	<input
 		ref="input"
 		type="checkbox"
diff --git a/packages/frontend/src/components/MkTab.vue b/packages/frontend/src/components/MkTab.vue
index 1fef2d020f..4bfba7afe2 100644
--- a/packages/frontend/src/components/MkTab.vue
+++ b/packages/frontend/src/components/MkTab.vue
@@ -83,6 +83,7 @@ export default defineComponent({
 			background: var(--accentedBg);
 
       &.gamingDark{
+        color:white;
         background: linear-gradient(270deg, #e7a2a2, #e3cfa2, #ebefa1, #b3e7a6, #a6ebe7, #aec5e3, #cabded, #e0b9e3, #f4bddd);
         background-size: 1800% 1800%;
         -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@@ -90,6 +91,7 @@ export default defineComponent({
         animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
       }
       &.gamingLight{
+        color: black;
         background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
         background-size: 1800% 1800% !important;
         -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 7400a6bb47..1030555b09 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -41,8 +41,8 @@ export const noteActions: NoteAction[] = [];
 export const noteViewInterruptors: NoteViewInterruptor[] = [];
 export const notePostInterruptors: NotePostInterruptor[] = [];
 export const pageViewInterruptors: PageViewInterruptor[] = [];
-export const bannerDark='https://files.prismisskey.space/misskey/ac141052-7a16-4608-bc08-263566326a6d.jpg'
-export const bannerLight ='https://files.prismisskey.space/misskey/e8d13afc-2348-4b13-a64a-f55a19e8d7aa.jpg'
+export const bannerDark='https://files.prismisskey.space/misskey/5182a391-5b9f-4ba9-90a5-a692aa59b938.png'
+export const bannerLight ='https://files.prismisskey.space/misskey/96e65f59-eab3-47d4-bb1e-d141100bd2fc.png'
 export const iconDark='https://files.prismisskey.space/misskey/f3b3c9f8-ff2a-474d-a858-64ffe9023e22.png'
 export const iconLight='https://files.prismisskey.space/misskey/c7e56b1d-4c4f-408f-bf73-3175f4eb26ca.png'
 
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index 54fbf1606a..7b63285aa9 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -377,7 +377,7 @@ function more() {
 
   &.gamingDark:hover, &.gamingDark.active {
     text-decoration: none;
-    color: white;
+    color: black;
 
     &.gamingDark:before {
       content: "";
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index a4f008f9e8..8ba1649bec 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -292,15 +292,15 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingLight {
-      color: black !important;
+      color: white;
     }
 
     &.gamingDark {
-      color: black !important;
+      color: black;
     }
 
     &.gamingLight:before {
-			color: black !important;
+      color: white;
       content: "";
       display: block;
       width: calc(100% - 38px);
@@ -321,7 +321,8 @@ function more(ev: MouseEvent) {
 
     &.gamingLight:hover, &.gamingLight.active {
 
-			color: black !important;
+      color: white;
+
       &.gamingLight:before {
         background: linear-gradient(270deg, #c06161, #c0a567, #b6ba69, #81bc72, #63c3be, #8bacd6, #9f8bd6, #d18bd6, #d883b4);
         background-size: 1800% 1800% !important;
@@ -461,7 +462,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingDark:hover {
-      color: white;
+      color: black;
 
       background-size: 1800% 1800%;
       text-decoration: none;
@@ -471,8 +472,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingDark.active {
-      color: white;
-
+      color: black;
       background-size: 1800% 1800%;
       -webkit-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
       -moz-animation: AnimationDark 44s cubic-bezier(0, 0.2, 0.90, 1) infinite;
@@ -480,7 +480,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingDark:hover, &.gamingDark.active {
-      color: white;
+      color: black;
 
       &.gamingDark:before {
         content: "";
@@ -502,7 +502,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingLight:hover {
-			color: white;
+      color: white;
       background-size: 1800% 1800% !important;
       text-decoration: none;
       -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@@ -512,7 +512,6 @@ function more(ev: MouseEvent) {
 
     &.gamingLight:active {
       color: white;
-
       background-size: 1800% 1800% !important;
       -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
       -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
@@ -520,7 +519,7 @@ function more(ev: MouseEvent) {
     }
 
     &.gamingLight:hover, &.gamingLight.active {
-			color: white;
+      color: white;
 
 
       &.gamingLight:before {
@@ -562,9 +561,17 @@ function more(ev: MouseEvent) {
       color: white;
     }
 
+    &.gamingDark.active {
+      color: black;
+    }
+
     &.gamingLight {
       color: black;
     }
+
+    &.gamingLight.active {
+      color: white;
+    }
   }
 
   .itemText {
@@ -616,6 +623,7 @@ function more(ev: MouseEvent) {
     display: block;
     position: relative;
     width: 100%;
+    color: black;
     height: 52px;
     margin-bottom: 16px;
     text-align: center;
@@ -669,12 +677,12 @@ function more(ev: MouseEvent) {
         -webkit-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
         -moz-animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
         animation: AnimationLight 45s cubic-bezier(0, 0.2, 0.90, 1) infinite !important;
-				color: white;
+        color: white;
       }
     }
 
     &.gamingDark:before {
-      color: white;
+      color: black;
       content: "";
       display: block;
       position: absolute;
@@ -750,16 +758,20 @@ function more(ev: MouseEvent) {
     width: 100%;
     text-align: center;
 
+    &.gamingLight {
+      color: white;
+    }
+
     &:hover, &.active {
       text-decoration: none;
       color: var(--accent);
 
       &.gamingDark {
-        color: white;
+        color: black;
       }
 
       &.gamingLight {
-        color: #DEE7E4;
+        color: white;
       }
 
       &:before {
@@ -810,7 +822,8 @@ function more(ev: MouseEvent) {
 
     &.gamingLight:hover, &.gamingLight.active {
       text-decoration: none;
-			color: white;
+      color: white !important;
+
       &.gamingLight:before {
         content: "";
         display: block;
@@ -854,8 +867,16 @@ function more(ev: MouseEvent) {
       color: white;
     }
 
+    &.gamingDark.active {
+      color: black;
+    }
+
     &.gamingLight {
-			color: white;
+      color: black;
+    }
+
+    &.gamingLight.active {
+      color: white;
     }
   }