diff --git a/app/src/main/java/com/github/libretube/helpers/ThemeHelper.kt b/app/src/main/java/com/github/libretube/helpers/ThemeHelper.kt
index d9fb78b44..a8c4dc97d 100644
--- a/app/src/main/java/com/github/libretube/helpers/ThemeHelper.kt
+++ b/app/src/main/java/com/github/libretube/helpers/ThemeHelper.kt
@@ -9,6 +9,7 @@ import android.graphics.Color
 import android.os.Build
 import android.text.Spanned
 import android.view.Window
+import androidx.annotation.ColorInt
 import androidx.appcompat.app.AppCompatActivity
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.core.text.HtmlCompat
@@ -24,24 +25,21 @@ object ThemeHelper {
     /**
      * Set the colors of the system bars (status bat and navigation bar)
      */
-    fun setSystemBarColors(context: Context, window: Window, isBottomNavVisible: Boolean) {
+    fun setSystemBarColors(context: Context, window: Window, @ColorInt bottomNavColor: Int? = null) {
         setStatusBarColor(context, window)
-        setNavigationBarColor(context, window, isBottomNavVisible)
+        setNavigationBarColor(context, window, bottomNavColor)
     }
 
     /**
      * Set the background color of the status bar
      */
     private fun setStatusBarColor(context: Context, window: Window) {
-        window.statusBarColor = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-            getThemeColor(context, android.R.attr.colorBackground)
-        } else {
-            if (isDarkMode(context)) {
-                getThemeColor(context, android.R.attr.colorBackground)
-            } else {
+        window.statusBarColor =
+            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M && !isDarkMode(context)) {
                 getThemeColor(context, com.google.android.material.R.attr.colorOnBackground)
+            } else {
+                getThemeColor(context, android.R.attr.colorBackground)
             }
-        }
     }
 
     /**
@@ -50,17 +48,14 @@ object ThemeHelper {
     private fun setNavigationBarColor(
         context: Context,
         window: Window,
-        isBottomNavVisible: Boolean
+        @ColorInt bottomNavColor: Int?
     ) {
-        window.navigationBarColor = if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M && !isDarkMode(context)) {
-            getThemeColor(context, com.google.android.material.R.attr.colorOnBackground)
-        } else {
-            if (isBottomNavVisible) {
-                getThemeColor(context, com.google.android.material.R.attr.colorSurfaceContainer)
+        window.navigationBarColor =
+            if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M && !isDarkMode(context)) {
+                getThemeColor(context, com.google.android.material.R.attr.colorOnBackground)
             } else {
-                getThemeColor(context, android.R.attr.colorBackground)
+                bottomNavColor ?: getThemeColor(context, android.R.attr.colorBackground)
             }
-        }
     }
 
     /**
diff --git a/app/src/main/java/com/github/libretube/ui/activities/MainActivity.kt b/app/src/main/java/com/github/libretube/ui/activities/MainActivity.kt
index a91a39b39..2cdea64c0 100644
--- a/app/src/main/java/com/github/libretube/ui/activities/MainActivity.kt
+++ b/app/src/main/java/com/github/libretube/ui/activities/MainActivity.kt
@@ -50,8 +50,10 @@ import com.github.libretube.ui.models.PlayerViewModel
 import com.github.libretube.ui.models.SearchViewModel
 import com.github.libretube.ui.models.SubscriptionsViewModel
 import com.github.libretube.util.UpdateChecker
+import com.google.android.material.elevation.SurfaceColors
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
+import okhttp3.internal.toHexString
 
 class MainActivity : BaseActivity() {
     lateinit var binding: ActivityMainBinding
@@ -111,7 +113,10 @@ class MainActivity : BaseActivity() {
         }
 
         // sets the color if the navigation bar is visible
-        ThemeHelper.setSystemBarColors(this, window, binding.bottomNav.menu.size() > 0)
+        val bottomNavColor = SurfaceColors.getColorForElevation(this, binding.bottomNav.elevation).takeIf {
+            binding.bottomNav.menu.size() > 0
+        }
+        ThemeHelper.setSystemBarColors(this, window, bottomNavColor)
 
         // set default tab as start fragment
         navController.graph = navController.navInflater.inflate(R.navigation.nav).also {
diff --git a/app/src/main/java/com/github/libretube/ui/base/BaseActivity.kt b/app/src/main/java/com/github/libretube/ui/base/BaseActivity.kt
index 907d5775a..1ef272a64 100644
--- a/app/src/main/java/com/github/libretube/ui/base/BaseActivity.kt
+++ b/app/src/main/java/com/github/libretube/ui/base/BaseActivity.kt
@@ -39,7 +39,7 @@ open class BaseActivity : AppCompatActivity() {
 
         // Set the navigation and statusBar color if SDK < 23
         if (Build.VERSION.SDK_INT < Build.VERSION_CODES.M) {
-            ThemeHelper.setSystemBarColors(this, window, false)
+            ThemeHelper.setSystemBarColors(this, window)
         }
 
         // set the apps language