fix(Snackbar): mode dark use ColorSchemeProvider

Author: SevereCloud

packages/vkui/src/components/Snackbar/subcomponents/Basic/Basic.module.css

@@ -42,10 +42,6 @@
   }
 }
 
-.modeDark {
-  background: var(--vkui--color_background_contrast_inverse);
-}
-
 .before {
   margin-inline-end: 12px;
 }
@@ -76,10 +72,6 @@
   color: var(--vkui--color_text_subhead);
 }
 
-.modeDark .contentText {
-  color: var(--vkui--color_text_contrast);
-}
-
 /* layout */
 .layoutHorizontal .action {
   position: relative;

packages/vkui/src/components/Snackbar/subcomponents/Basic/Basic.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import type * as React from 'react';
+import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../../../hooks/useAdaptivity';
 import type { HTMLAttributesWithRootRef } from '../../../../types';
+import { ColorSchemeProvider } from '../../../ColorSchemeProvider/ColorSchemeProvider';
 import { RootComponent } from '../../../RootComponent/RootComponent';
 import { Paragraph } from '../../../Typography/Paragraph/Paragraph';
 import { Subhead } from '../../../Typography/Subhead/Subhead';
@@ -74,14 +75,13 @@ export function Basic({
   const { density = 'none' } = useAdaptivity();
   const layout = after || subtitle ? 'vertical' : 'none';
 
-  return (
+  const snackbar = (
     <RootComponent
       {...restProps}
       baseClassName={classNames(
         styles.body,
         stylesLayout[layoutProps || layout],
         density !== 'compact' && densityClassNames[density],
-        mode === 'dark' && styles.modeDark,
       )}
     >
       {before && <div className={styles.before}>{before}</div>}
@@ -96,4 +96,10 @@ export function Basic({
       {after && <div className={styles.after}>{after}</div>}
     </RootComponent>
   );
+
+  if (mode === 'dark') {
+    return <ColorSchemeProvider value="dark">{snackbar}</ColorSchemeProvider>;
+  }
+
+  return snackbar;
 }