Gift modal: Support theme dark (#5333)

src/components/modals/gift/GiftItem.module.scss

@@ -13,6 +13,10 @@
   position: relative;
   cursor: var(--custom-cursor, pointer);
 
+  :global(html.theme-dark) & {
+    background-color: var(--color-background);
+  }
+
   &::before {
     content: "";
     position: absolute;

src/components/modals/gift/GiftModal.module.scss

@@ -7,6 +7,10 @@
 .root :global(.modal-content) {
   padding: 0;
   background-color: var(--color-background);
+
+  :global(html.theme-dark) & {
+    background-color: #181818;
+  }
 }
 
 .root :global(.modal-dialog),

src/components/modals/gift/StarGiftCategoryList.module.scss

@@ -19,6 +19,10 @@
   margin-left: -0.5rem;
   padding-left: 0.5rem;
 
+  :global(html.theme-dark) & {
+    background-color: #181818;
+  }
+
   @include mixins.gradient-border-horizontal(0.5rem, 0.5rem);
 }
 
@@ -45,6 +49,20 @@
   color: var(--color-text-secondary);
 }
 
+:global(html.theme-dark) {
+
+  .item-selected,
+  .item {
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  .selected-item {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
 .star {
   margin-right: 0.1875rem;
 }

src/components/ui/Button.scss

@@ -285,6 +285,10 @@
     color: var(--color-white);
     --ripple-color: rgba(0, 0, 0, 0.08);
 
+    .theme-dark & {
+      background-color: #CF8920;
+    }
+
     @include active-styles() {
       background-color: #FFB727CC;
     }