SoFunction
Updated on 2025-04-10

4 reasons why font color and background color are invalid and solutions

1. Only the background color is set, the background color is invalid

//Error Demonstration({
    backgroundColor:"#c9e5fd"
})

Note: The background color needs to be set at the same time as the font color to take effect

2. Font color only supports lowercase hexadecimal, otherwise the font color and background color are invalid.

//Error demonstration 1({
    frontColor:"#fff",
    backgroundColor:"#c9e5fd"
})
// Error demonstration 2({
    frontColor:"#FFFFFF",
    backgroundColor:"#c9e5fd"
})

3. The font color cannot be set except black and white, otherwise the font color and background color will be invalid.

//Error Demonstration({
    frontColor:"#c9e5fd",
    backgroundColor:"#c9e5fd"
})

Note: Font colors only support black and white: #ffffff and #000000

4. The font color cannot have space symbols, otherwise the font color and background color settings will be invalid.

//Error Demonstration({
    frontColor:" #000000",
    backgroundColor:" #c9e5fd",
})

Note: Correct code

// Correct demonstration({
	frontColor:"#ffffff",
	backgroundColor:"#c9e5fd",
})

Attachment: uni-app sets the page navigation bar color

The color is limited to hexadecimal color in the following two methods.

In page routing, use style to set the background color of the navigation bar of each page such as:

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "front page",//Set the page title text        "enablePullDownRefresh":true//Open pull-down refresh
"navigationBarBackgroundColo","#000000"
      }
    },
    ...
  ]
}

2. Use (OBJECT) to set the page navigation bar color. like:

({
    backgroundColor: '#ff0000',
})

There are restrictions on backgroundColor parameters on Android, black is greater than rgb(30,30,30), and white is less than rgb(235,235,235)

Summarize

This is the article about the four reasons and solutions for setting font color and background color invalid. For more relevant invalid content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!