feat: implement dark mode support for reaction buttons and update styles accordingly

ui/src/pages/Questions/Detail/components/Reactions/index.tsx

@@ -26,6 +26,7 @@ import classNames from 'classnames';
 import { Icon } from '@/components';
 import { queryReactions, updateReaction } from '@/services';
 import { tryNormalLogged } from '@/utils/guard';
+import { isDarkTheme } from '@/utils/common';
 import { ReactionItem } from '@/common/interface';
 
 interface Props {
@@ -60,6 +61,7 @@ const Index: FC<Props> = ({
   const [reactions, setReactions] = useState<ReactionItem[]>();
   const [reactIsActive, setReactIsActive] = useState<boolean>(false);
   const { t } = useTranslation('translation');
+  const darkMode = isDarkTheme();
 
   useEffect(() => {
     queryReactions(objectId).then((res) => {
@@ -94,7 +96,7 @@ const Index: FC<Props> = ({
                 : t(`reaction.${d.name}`)
             }
             key={d.icon}
-            variant="light"
+            variant={darkMode ? 'dark' : 'light'}
             active={reactions?.find((v) => v.emoji === d.name)?.is_active}
             className={`${index !== 0 ? 'ms-1' : ''}`}
             size="sm"
@@ -116,7 +118,7 @@ const Index: FC<Props> = ({
       {showAddCommentBtn && (
         <Button
           className="rounded-pill me-2 link-secondary"
-          variant="light"
+          variant={darkMode ? 'dark' : 'light'}
           size="sm"
           onClick={handleClickComment}>
           <Icon name="chat-text-fill" />
@@ -136,7 +138,7 @@ const Index: FC<Props> = ({
           aria-haspopup="true"
           active={reactIsActive}
           className="smile-btn rounded-pill link-secondary"
-          variant="light">
+          variant={darkMode ? 'dark' : 'light'}>
           <Icon name="emoji-smile-fill" />
           <span className="ms-1">+</span>
         </Button>
@@ -165,7 +167,7 @@ const Index: FC<Props> = ({
                   : t('reaction.react_emoji', { emoji: data.emoji })
               }
               aria-pressed="true"
-              variant="light"
+              variant={darkMode ? 'dark' : 'light'}
               active={data.is_active}
               size="sm"
               onClick={() =>

ui/src/pages/Questions/Detail/index.scss

@@ -27,11 +27,17 @@
         [data-bs-theme='dark'] & {
           background-color: var(--bs-gray-800);
         }
+
         background-color: var(--bs-gray-100);
       }
 
-      &:active, &.active {
+      &:active,
+      &.active {
         background-color: var(--bs-gray-200);
+
+        [data-bs-theme='dark'] & {
+          background-color: var(--bs-gray-800);
+        }
       }
     }
   }
@@ -59,4 +65,4 @@
       font-size: calc(1.275rem + 0.3vw) !important;
     }
   }
-}
+}