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:

image-20210721103110636

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:

WechatIMG304

WechatIMG305

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.

-->