[FIXED] Layout changes (CSS, colors) not applied

[j2l]

Description:

Can't change any Color.
Leaving and re-entering Admin > Layout shows emptied CSS and stock content.

Steps to reproduce:

1.Admin Panel > Layout > Custom CSS > Colors
Content =(color) #C2FFC0

Expected behavior:

change background color

Actual behavior:

No change, #fff is still applied.

Server Setup Information:

• Version of Rocket.Chat Server: 0.72.3

Additional info

Also Custom CSS is not taken in account and emptied after saving and leaving.
For example:

.content-background-color{
  background-color: #4444
}

and background remains to #fff

Relevant logs:

Browser:

Exception in queued task ReferenceError: DynamicCss is not defined
    at Object.changed (409b0ab89987a030a0809c6610f747f754fea2d4.js?meteor_js_resource=true:201)
    at e.changed (409b0ab89987a030a0809c6610f747f754fea2d4.js?meteor_js_resource=true:47)
    at Object.applyChange.changed (409b0ab89987a030a0809c6610f747f754fea2d4.js?meteor_js_resource=true:47)
    at t.collection._observeQueue.queueTask (409b0ab89987a030a0809c6610f747f754fea2d4.js?meteor_js_resource=true:47)
    at n._SynchronousQueue.t.runTask (409b0ab89987a030a0809c6610f747f754fea2d4.js?meteor_js_resource=true:1)
    at n._SynchronousQueue.t.flush (409b0ab89987a030a0809c6610f747f754fea2d4.js?meteor_js_resource=true:1)
    at n._SynchronousQueue.t.drain (409b0ab89987a030a0809c6610f747f754fea2d4.js?meteor_js_resource=true:1)
    at w.update (409b0ab89987a030a0809c6610f747f754fea2d4.js?meteor_js_resource=true:47)
    at e.Collection.update (409b0ab89987a030a0809c6610f747f754fea2d4.js?meteor_js_resource=true:69)
    at e.Collection.r.(anonymous function) [as update] (https://chat.myserver.com/409b0ab89987a030a0809c6610f747f754fea2d4.js?meteor_js_resource=true:101:1698)

Server :
docker logs rocketchat didn't show any relevant error about this behavior.

[j2l]

Alright,

I think I found why CSS and Colors are not applied / updated after a change in Layout for some users, like me:
Do you use a CDN, like Cloudflare?
If so, you must dump its cache before seeing changes too, not just your browser.
That's why sometimes, you see changes applied after "some time" (cache expiration, may be furious server restarts).

In Cloudflare admin panel, click on the highlighted spots:

Think to reload the page in the browser, flush browser cache (long click on reload button in Chrome) and reload again. The first one to populate the CDN, the second to apply it!
If headers are set right (I didn't check with Rocket.Chat Team code on this), you should be good to go!

Epilogue: I had to dig into the mongo DB to check what colors were registered to understand that something happen between the DB and the browser (both had correct parameters and browser cache was flushed), the only parameter left was the route between server and client, hence the CDN.
For the records, here's how to check into your DB, in case you didn't know:
docker run --link mongo:mongo -p 8081:8081 mongo-express
double check your server's firewall open ports, double check you applied changes on your firewall (héhé), then visit your website at port 8081 and click in rocketchat > rocketchat_settings, then search for "olor" (in case it's case sensitive) within i18nLabel key, in page 2 you'll see:

Don't forget to close (CTRL+C) the docker container as it is highly insecure by default!

Hope it helps 😸