diff --git a/lib/config/theme.dart b/lib/config/theme.dart
index be390348c7868e7c63387df13e13c46de43f8a23..138460e58f89bc93afb0899d6cfe8f8e662a466f 100644
--- a/lib/config/theme.dart
+++ b/lib/config/theme.dart
@@ -39,11 +39,9 @@ final ColorScheme lightColorScheme = ColorScheme.light(
   secondary: primarySwatch.shade500,
   onSecondary: Colors.white,
   error: errorColor,
-  background: textSwatch.shade200,
-  onBackground: textSwatch.shade500,
   onSurface: textSwatch.shade500,
   surface: textSwatch.shade50,
-  surfaceVariant: Colors.white,
+  surfaceContainerHighest: Colors.white,
   shadow: textSwatch.shade900.withOpacity(.1),
 );
 
@@ -52,11 +50,9 @@ final ColorScheme darkColorScheme = ColorScheme.dark(
   secondary: primarySwatch.shade500,
   onSecondary: Colors.white,
   error: errorColor,
-  background: const Color(0xFF171724),
-  onBackground: textSwatch.shade400,
   onSurface: textSwatch.shade300,
   surface: const Color(0xFF262630),
-  surfaceVariant: const Color(0xFF282832),
+  surfaceContainerHighest: const Color(0xFF282832),
   shadow: textSwatch.shade900.withOpacity(.2),
 );
 
diff --git a/lib/ui/screens/api_page.dart b/lib/ui/screens/api_page.dart
index 22dc963aa246496f45eeb0dcca1b29ce512292df..1441faca93091a16f5a52c7bc35b0a3a4edc2c37 100644
--- a/lib/ui/screens/api_page.dart
+++ b/lib/ui/screens/api_page.dart
@@ -12,7 +12,7 @@ class ApiPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Material(
-      color: Theme.of(context).colorScheme.background,
+      color: Theme.of(context).colorScheme.surface,
       child: ListView(
         padding: const EdgeInsets.symmetric(horizontal: 4),
         physics: const BouncingScrollPhysics(),
diff --git a/lib/ui/screens/camera_page.dart b/lib/ui/screens/camera_page.dart
index 828c6e29a3a4bcb389701b4fc664016783382d00..668b889d236ab1dd236040e870a4137a4394eac8 100644
--- a/lib/ui/screens/camera_page.dart
+++ b/lib/ui/screens/camera_page.dart
@@ -12,7 +12,7 @@ class CameraPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Material(
-      color: Theme.of(context).colorScheme.background,
+      color: Theme.of(context).colorScheme.surface,
       child: const Column(
         mainAxisAlignment: MainAxisAlignment.start,
         crossAxisAlignment: CrossAxisAlignment.center,
diff --git a/lib/ui/screens/demo_page.dart b/lib/ui/screens/demo_page.dart
index 2c7269eb436c2c403bb61600447d1358009337b3..06b0cbe3f57ea01b271a7a2c8d94faa757fae773 100644
--- a/lib/ui/screens/demo_page.dart
+++ b/lib/ui/screens/demo_page.dart
@@ -13,7 +13,7 @@ class DemoPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Material(
-      color: Theme.of(context).colorScheme.background,
+      color: Theme.of(context).colorScheme.surface,
       child: ListView(
         padding: const EdgeInsets.symmetric(horizontal: 4),
         physics: const BouncingScrollPhysics(),
diff --git a/lib/ui/skeleton.dart b/lib/ui/skeleton.dart
index 5a4051d52d89730e2217b3480b9538f0d87fce1e..d22aceae1bb67faf82fada7260d3b87fcae0d76d 100644
--- a/lib/ui/skeleton.dart
+++ b/lib/ui/skeleton.dart
@@ -24,10 +24,10 @@ class _SkeletonScreenState extends State<SkeletonScreen> {
           return Menu.getPageWidget(pageIndex);
         },
       ),
-      backgroundColor: Theme.of(context).colorScheme.background,
+      backgroundColor: Theme.of(context).colorScheme.surface,
       bottomNavigationBar: CurvedNavigationBar(
-        color: Theme.of(context).colorScheme.onBackground,
-        backgroundColor: Theme.of(context).colorScheme.background,
+        color: Theme.of(context).colorScheme.onSurface,
+        backgroundColor: Theme.of(context).colorScheme.surface,
         animationDuration: const Duration(milliseconds: 200),
         height: 50,
         items: Menu.items.map((MenuItem item) => item.icon).toList(),