MaterialToolbar doesn't work properly with edge-to-edge

Question

I am trying to make my MaterialToolbar fill the system bar with its background color. From what I understand, this should work automatically on SDK 35 without any additional actions. However, I’m encountering an issue where the system bar is transparent and inherits the color of the activity background, as shown in the screenshot below:

my app screenshot

I’ve already tried modifying the parameters in theme.xml, but the issue persists.

My layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <com.google.android.material.appbar.MaterialToolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:menu="@menu/top_toolbar"
            android:gravity="center_horizontal"
            android:minHeight="?attr/actionBarSize"
            style="@style/Widget.MaterialComponents.Toolbar.Primary">

            <TextView
                style="@style/TextAppearance.Material3.TitleLarge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="@string/top_toolbar_title"
                android:textColor="@android:color/white" />

        </com.google.android.material.appbar.MaterialToolbar>

    </com.google.android.material.appbar.AppBarLayout>

    ...

</androidx.constraintlayout.widget.ConstraintLayout>

My activity:

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }
    }
}

What steps should I take to ensure the system bar adopts the same color as the toolbar?