others-How to be compliant with system color when using template messages on wechat?

1. Purpose

In this post, I would demo how to be compliant with system color when sending template messages on wechat. The problem is shown as follows:

You can see that the text color in the above image is obscure , the phone’s system (android/iOS) is in dark mode.

2. Environment

• wechat template message

3. The solution and solution

3.1 What is template message

Message templates are only used by Official Accounts to send important service notifications to users in service scenarios that meet their requirements, such as credit card payment notifications, and product purchase success notifications. Promotional messages such as ads and all the other messages that may harass users are not supported.

3.2 How to send template message?

Sending Message Templates

API request format

HTTP request method: POST
https://api.weixin.qq.com/cgi-bin/message/template/send?access_token=ACCESS_TOKEN

POST data description

POST data example:

      {
           "touser":"OPENID",
           "template_id":"ngqIpbwh8bUfcSsECmogfXcV14J0tQlEpBO27izEYtY",
           "url":"http://weixin.qq.com/download",  
           "miniprogram":{
             "appid":"xiaochengxuappid12345",
             "pagepath":"index?foo=bar"
           },          
           "data":{
                   "first": {
                       "value":"Purchase succeeded!",
                       "color":"#173177"
                   },
                   "keyword1":{
                       "value":"Chocolate",
                       "color":"#173177"
                   },
                   "keyword2": {
                       "value":"39.8 CNY",
                       "color":"#173177"
                   },
                   "keyword3": {
                       "value":"2014-9-22",
                       "color":"#173177"
                   },
                   "remark":{
                       "value":"Welcome to purchase more!",
                       "color":"#173177"
                   }
           }
       }

Parameters:

Parameter	Required	Description
touser	Yes	Recipient’s openid
template_id	Yes	Template ID
url	No	The URL to which the template is redirected (redirection is not available for foreign accounts)
miniprogram	No	The data required for redirection to a Mini Program. If redirection is not needed, this parameter is not required.
appid	Yes	The appid of the Mini Program to be redirected to (The appid of the Mini Program must be linked to the Official Account sending the message template. Mini Games are not supported.)
pagepath	No	The path to the page of the Mini Program to be redirected to. Parameters can be added to the path, for example, index?foo=bar. The Mini Program must be published, and Mini Games are not supported.
data	Yes	Template data
color	No	The font color of the template content. If it is not specified, black is used by default.

But the color is not compliant with android or iOS system color, how to solve this problem?

3.3 The solution

We can set the text color as follows:

   {
           "touser":"OPENID",
           "template_id":"ngqIpbwh8bUfcSsECmogfXcV14J0tQlEpBO27izEYtY",
           "url":"http://weixin.qq.com/download",  
           "miniprogram":{
             "appid":"xiaochengxuappid12345",
             "pagepath":"index?foo=bar"
           },          
           "data":{
                   "first": {
                       "value":"Purchase succeeded!"
                   },
                   "keyword1":{
                       "value":"Chocolate"
                   },
                   "keyword2": {
                       "value":"39.8 CNY"
                   },
                   "keyword3": {
                       "value":"2014-9-22"
                   },
                   "remark":{
                       "value":"Welcome to purchase more!"
                   }
           }
       }

Now we got this result:

Now, it works! you can see that the color of text is compliant with android or iOS system, no matter the mode is dark or white.

4. Summary

In this post, I tried to demo how to solve the color compliant problem when using wechat template message.