From a8f14a3d2a16712ad61b2c825d0a1d04192cd61d Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Thu, 14 May 2026 23:44:36 +0700
Subject: [PATCH] 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                      |  1 +
 apps/client/src/styles/theme.scss | 12 ++++++------
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 359ade060..6eb4852e0 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 296270e7f..3cec572cc 100644
--- a/apps/client/src/styles/theme.scss
+++ b/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),