---
title: "primarySurface"
description: "primarySurface represents the background color of components that are [Colors.primary] in light
theme, and [Colors.surface] in dark theme, such as [androidx.compose.material.TabRow] and
[androidx.compose.material.TopAppBar]. This is to reduce brightness of large surfaces in dark
theme, aiding contrast and readability. See
[Dark Theme](https://material.io/design/color/dark-theme.html#custom-application)."
type: "property"
---

<div class='type'>Property</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
val Colors.primarySurface: Color
```


primarySurface represents the background color of components that are `Colors.primary` in light
theme, and `Colors.surface` in dark theme, such as `androidx.compose.material.TabRow` and
`androidx.compose.material.TopAppBar`. This is to reduce brightness of large surfaces in dark
theme, aiding contrast and readability. See
`Dark Theme`(https://material.io/design/color/dark-theme.html#custom-application).

#### Returns

| | |
| --- | --- |
|  | `Colors.primary` if in light theme, else `Colors.surface` |