diff --git a/packages/s2-core/src/theme/palette/dark.ts b/packages/s2-core/src/theme/palette/dark.ts
index c809ced41e..2a2ff53ff9 100644
--- a/packages/s2-core/src/theme/palette/dark.ts
+++ b/packages/s2-core/src/theme/palette/dark.ts
@@ -2,7 +2,11 @@ import type { Palette } from '../../common';
 
 export const paletteDark: Palette = {
   brandColor: '#255dff',
-  basicColorRelations: [],
+  semanticColors: {
+    red: '#FF4D4F',
+    green: '#29A294',
+    yellow: '#FAAD14',
+  },
   basicColors: [
     '#ffffff',
     '#151a27',
@@ -20,5 +24,5 @@ export const paletteDark: Palette = {
     '#f0f0f0',
     '#dcdcdc',
   ],
-  semanticColors: { red: '#FF4D4F', green: '#29A294', yellow: '#FAAD14' },
+  basicColorRelations: [],
 };
diff --git a/packages/s2-react/playground/components/Mobile.tsx b/packages/s2-react/playground/components/Mobile.tsx
index 74ed209885..27af788644 100644
--- a/packages/s2-react/playground/components/Mobile.tsx
+++ b/packages/s2-react/playground/components/Mobile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { customMerge, type S2DataConfig } from '@antv/s2';
+import { customMerge, SpreadSheet, type S2DataConfig } from '@antv/s2';
 import { MobileSheet } from '../../src/components/sheets/mobile-sheet';
 import { defaultOptions, pivotSheetDataCfg } from '../config';
 import type { SheetComponentOptions, SheetComponentsProps } from '../../src';
@@ -9,9 +9,9 @@ const MobileDataCfg: S2DataConfig = {
   ...pivotSheetDataCfg,
 };
 
-export const MobileSheetComponent: React.FC<Partial<SheetComponentsProps>> = (
-  props,
-) => {
+export const MobileSheetComponent: React.FC<
+  Partial<SheetComponentsProps> & React.RefAttributes<SpreadSheet>
+> = React.forwardRef((props, ref) => {
   const context = usePlaygroundContext();
   const mobileOptions: SheetComponentOptions = {
     width: 400,
@@ -35,10 +35,11 @@ export const MobileSheetComponent: React.FC<Partial<SheetComponentsProps>> = (
 
   return (
     <MobileSheet
+      ref={ref}
       dataCfg={MobileDataCfg}
       options={options}
       {...props}
       {...context}
     />
   );
-};
+});
diff --git a/packages/s2-react/playground/context/playground.context.ts b/packages/s2-react/playground/context/playground.context.ts
index 2376ead647..8edc02067d 100644
--- a/packages/s2-react/playground/context/playground.context.ts
+++ b/packages/s2-react/playground/context/playground.context.ts
@@ -1,13 +1,13 @@
-import React from 'react';
-import type { SpreadSheet, ThemeCfg } from '@antv/s2';
 import { noop } from 'lodash';
+import React from 'react';
+import type { SpreadSheet } from '@antv/s2';
 import type { SheetComponentsProps } from '../../src';
 
-export const PlaygroundContext = React.createContext<{
-  ref?: React.MutableRefObject<SpreadSheet | null>;
-  onMounted: SheetComponentsProps['onMounted'];
-  themeCfg: ThemeCfg;
-}>({
+export const PlaygroundContext = React.createContext<
+  Partial<SheetComponentsProps> & {
+    ref?: React.MutableRefObject<SpreadSheet | null>;
+  }
+>({
   onMounted: noop,
   themeCfg: { name: 'default' },
 });
diff --git a/packages/s2-react/playground/index.tsx b/packages/s2-react/playground/index.tsx
index 9f96ef7ac9..be26bb49e3 100644
--- a/packages/s2-react/playground/index.tsx
+++ b/packages/s2-react/playground/index.tsx
@@ -256,6 +256,10 @@ function MainLayout() {
     );
   }, [sheetType, tableSheetColumnType]);
 
+  const onSheetDestroy = logHandler('onDestroy', () => {
+    clearInterval(scrollTimer.current!);
+  });
+
   //  ================== Config ========================
 
   const mergedOptions: SheetComponentOptions = customMerge(
@@ -346,6 +350,7 @@ function MainLayout() {
         value={{
           ref: s2Ref,
           onMounted: onSheetMounted,
+          onDestroy: onSheetDestroy,
           themeCfg,
         }}
       >
@@ -1247,9 +1252,7 @@ function MainLayout() {
                         onRangeSort={logHandler('onRangeSort')}
                         onRangeSorted={logHandler('onRangeSorted')}
                         onMounted={onSheetMounted}
-                        onDestroy={logHandler('onDestroy', () => {
-                          clearInterval(scrollTimer.current!);
-                        })}
+                        onDestroy={onSheetDestroy}
                         onColCellClick={onColCellClick}
                         onRowCellClick={logHandler('onRowCellClick')}
                         onCornerCellClick={logHandler(
diff --git a/packages/s2-react/src/context/SpreadSheetContext.tsx b/packages/s2-react/src/context/SpreadSheetContext.tsx
index a411dcc2aa..092a9ece31 100644
--- a/packages/s2-react/src/context/SpreadSheetContext.tsx
+++ b/packages/s2-react/src/context/SpreadSheetContext.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import type { SpreadSheet } from '@antv/s2';
 
-export const SpreadSheetContext = React.createContext<SpreadSheet | undefined>(
+export const SpreadSheetContext = React.createContext<SpreadSheet>(
   null as unknown as SpreadSheet,
 );