• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Foreground Color
2
3The foreground color attributes set the foreground color of a component.
4
5>  **NOTE**
6>
7>  The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version.
8
9## Attributes
10
11| Name| Type| Description|
12| -------- | -------- | -------- |
13| foregroundColor | [ResourceColor](ts-types.md#resourcecolor) \| [ColoringStrategy](ts-types.md#coloringstrategy) | Foreground color. The value can be a specific color or a coloring strategy.|
14
15## Example
16
17### Example 1
18```ts
19// xxx.ets
20@Entry
21@Component
22struct ForegroundColorExample {
23  build() {
24    Column({ space: 100 }) {
25      // Draw a circle with a diameter of 150 and the default fill color black.
26      Circle({ width: 150, height: 200 })
27      // Draw a circle with a diameter of 150.
28      Circle({ width: 150, height: 200 }).foregroundColor(Color.Red)
29    }.width('100%').backgroundColor(Color.Blue)
30  }
31}
32```
33
34![foregroundColor_circle](figures/foregroundColor_circle.png)
35
36### Example 2
37
38```ts
39// xxx.ets
40@Entry
41@Component
42struct ColoringStrategyExample {
43  build() {
44    Column({ space: 100 }) {
45      // Draw a circle with a diameter of 150 and the default fill color black.
46      Circle({ width: 150, height: 200 })
47      // Draw a circle with a diameter of 150 and set its foreground color to the inverse of the component background color.
48      Circle({ width: 150, height: 200 })
49        .backgroundColor(Color.Black)
50        .foregroundColor(ColoringStrategy.INVERT)
51    }.width('100%')
52  }
53}
54```
55![foregroundColor_circle](figures/ColoringStrategy_circle.png)
56
57### Example 3
58
59```ts
60// xxx.ets
61@Entry
62@Component
63struct foregroundColorInherit {
64  build() {
65    Column() {
66      Button('Foreground Color: Set to Orange').fontSize(20).foregroundColor(Color.Orange).backgroundColor(Color.Gray)
67      Divider()
68      Button ('Foreground Color: Inherited from Parent Component When Not Set').fontSize(20).backgroundColor(Color.Gray)
69    }.foregroundColor(Color.Red)
70  }
71}
72```
73
74![foregroundColor_circle](figures/foregroundColorInherit.jpg)
75