diff --git a/src/components/Sheet/README.md b/src/components/Sheet/README.md
index 8f2e517dd..7cbf0f6c1 100644
--- a/src/components/Sheet/README.md
+++ b/src/components/Sheet/README.md
@@ -48,6 +48,7 @@ const SheetExample = () => {
 
 ## CSS API
 
-| Name                        | Description     |
-| :-------------------------- | :-------------- |
-| `--g-sheet-content-padding` | Content padding |
+| Name                         | Description      |
+| :--------------------------- | :--------------- |
+| `--g-sheet-content-padding`  | Content padding  |
+| `--g-sheet-background-color` | Background color |
diff --git a/src/components/Sheet/Sheet.scss b/src/components/Sheet/Sheet.scss
index 14b78402f..1ec9b6a31 100644
--- a/src/components/Sheet/Sheet.scss
+++ b/src/components/Sheet/Sheet.scss
@@ -55,7 +55,7 @@ $block: '.#{variables.$ns}sheet';
         height: $top-height;
         border-start-start-radius: 20px;
         border-start-end-radius: 20px;
-        background-color: var(--g-color-base-float);
+        background-color: var(--g-sheet-background-color, var(--g-color-base-float));
     }
 
     &__sheet-top-resizer {
@@ -75,7 +75,7 @@ $block: '.#{variables.$ns}sheet';
         max-height: calc(90% - #{$top-height});
         overflow: hidden auto;
         overscroll-behavior-y: contain;
-        background-color: var(--g-color-base-float);
+        background-color: var(--g-sheet-background-color, var(--g-color-base-float));
 
         transition: height $transition-duration ease;