Spinner Text not visible when changing to dark theme

Question

When I change the theme from light mode to dark mode the spinner text isn't visible by default or when a value is selected. I tried setting the text color to android:textColor="?android:textColorPrimary" but that didn't work. I've also tried setting text color to black but result is still the same. The app works perfectly fine in light mode.

Here are some screenshots : Spinner in dark mode:

Spinner in light mode

When I select any option "Sin" or "Cos" form the spinner, the spinner value gets selected in code but the text is not visible, it remains empty white space.

Here is my xml code for the activity :

<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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/backgroundDark"
        tools:context=".InputActivity">
    
        <ListView
            android:id="@+id/inputListView"
            android:layout_width="match_parent"
            android:layout_height="310dp"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="20dp"
            android:background="@color/backgroundDarkSecondary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/inputControls" />
    
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/inputControls"
            android:layout_width="match_parent"
            android:layout_height="370dp"
            android:layout_marginStart="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="20dp"
            android:background="@color/backgroundDarkSecondary"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
    
            <EditText
                android:id="@+id/amplitudeEditText"
                android:layout_width="80dp"
                android:layout_height="30dp"
                android:layout_marginTop="30dp"
                android:layout_marginEnd="40dp"
                android:background="@color/white"
                android:ems="10"
                android:inputType="numberDecimal"
                android:textColor="@color/backgroundDark"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
    
            <TextView
                android:id="@+id/amplitudeTextView"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginStart="40dp"
                android:layout_marginTop="30dp"
                android:ems="10"
                android:text="Amplitude"
                android:textColor="@android:color/primary_text_dark"
                android:textSize="18sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
    
            <TextView
                android:id="@+id/phaseTextView"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginStart="40dp"
                android:layout_marginTop="30dp"
                android:text="Phase"
                android:textColor="@android:color/primary_text_dark"
                android:textSize="18sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/amplitudeTextView" />
    
            <EditText
                android:id="@+id/phaseEditText"
                android:layout_width="80dp"
                android:layout_height="30dp"
                android:layout_marginTop="30dp"
                android:layout_marginEnd="40dp"
                android:background="#FFFFFF"
                android:ems="10"
                android:inputType="numberDecimal"
                android:textColor="@color/backgroundDark"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/amplitudeEditText" />
    
            <TextView
                android:id="@+id/waveformTextView"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginStart="40dp"
                android:layout_marginTop="30dp"
                android:text="Waveform"
                android:textColor="@android:color/primary_text_dark"
                android:textSize="18sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/phaseTextView" />
    
            <Spinner
                android:id="@+id/waveformSpinner"
                android:layout_width="80dp"
                android:layout_height="30dp"
                android:layout_marginTop="30dp"
                android:layout_marginEnd="40dp"
                android:background="#FFFFFF"
                android:textColor="?android:textColorPrimary"
                android:textSize="18sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/phaseEditText" />
    
            <TextView
                android:id="@+id/colorTextView"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginStart="40dp"
                android:layout_marginTop="30dp"
                android:text="Color"
                android:textColor="@android:color/primary_text_dark"
                android:textSize="18sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/waveformTextView" />
    
            <Spinner
                android:id="@+id/colorSpinner"
                android:layout_width="80dp"
                android:layout_height="30dp"
                android:layout_marginTop="30dp"
                android:layout_marginEnd="40dp"
                android:background="#FFFFFF"
                android:textColor="?android:textColorPrimary"
                android:textSize="18sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/waveformSpinner" />
    
            <Button
                android:id="@+id/addInputButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="125dp"
                android:layout_marginTop="20dp"
                android:layout_marginEnd="125dp"
                android:backgroundTint="@color/primary"
                android:text="Add Input"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.117"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/nameTextView" />
    
            <TextView
                android:id="@+id/nameTextView"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_marginStart="40dp"
                android:layout_marginTop="30dp"
                android:text="Name"
                android:textColor="@android:color/primary_text_dark"
                android:textSize="18sp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/colorTextView" />
    
            <EditText
                android:id="@+id/nameEditText"
                android:layout_width="80dp"
                android:layout_height="30dp"
                android:layout_marginTop="30dp"
                android:layout_marginEnd="40dp"
                android:background="#FFFFFF"
                android:ems="10"
                android:inputType="text"
                android:textColor="@android:color/primary_text_light"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/colorSpinner" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    
    </androidx.constraintlayout.widget.ConstraintLayout>

Since I don't have any changes to my theme when switching from light mode to dark mode i tried to have the same code for my themes.xml for both dark theme and light theme hoping it would prevent such issues.

themes.xml code :

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.CanvasPractice" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryVariant">@color/backgroundDark</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/secondary</item>
        <item name="colorSecondaryVariant">@color/secondary</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>

    <style name="Theme.CanvasPractice.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

PS:This is my first time asking a question here so forgive me for any mistakes.

Answer 1

You have the white background set for the Spinner as android:background="#FFFFFF" in the code. The light and dark mode won't switch this color as it a fixed color and not depending on the theme. You should use a style supporting Spinner background if needed which can be different as per the need for light and dark modes.