Task/migrate to unified mat.theme mixin and add native color-scheme support (#6849)

* feat(client): implement mat.theme

* feat(client): implement color-scheme

* docs: update changelog

CHANGELOG.md

@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- Synchronized the native browser elements with the theme to improve the dark mode
 - Fixed a visual regression in the bottom navigation bar on mobile
 
 ## 3.2.0 - 2026-05-03

apps/client/src/styles/theme.scss

@@ -150,7 +150,9 @@ $gf-typography: (
 );
 
 .theme-light {
-  $gf-theme-default: mat.define-theme(
+  color-scheme: light;
+
+  @include mat.theme(
     (
       color: (
         primary: $_primary,
@@ -164,8 +166,6 @@ $gf-typography: (
     )
   );
 
-  @include mat.all-component-themes($gf-theme-default);
-
   @include mat.autocomplete-overrides(
     (
       background-color: var(--light-background)
@@ -233,7 +233,9 @@ $gf-typography: (
 }
 
 .theme-dark {
-  $gf-theme-dark: mat.define-theme(
+  color-scheme: dark;
+
+  @include mat.theme(
     (
       color: (
         primary: $_primary,
@@ -247,8 +249,6 @@ $gf-typography: (
     )
   );
 
-  @include mat.all-component-themes($gf-theme-dark);
-
   @include mat.button-overrides(
     (
       outlined-label-text-color: var(--light-primary-text),