Dark mode doesn't work

[GFNiko]

Describe the bug I hosted rocket.chat in my own docker environment and I copy pasted your code in the respective fields in the layout (custom csss and Custom Script for Logged In Users) Reloaded the page afterwards with ctrl+shift+r, logged out and back in, but nothing changed. Installed the desktop app and it looks the same as the website. And there is also no extra button in the upper area beside the username.

Expected behavior Dark mode in all important areas

Screenshots

Desktop (please complete the following information):

• Windows 10
• LibreWolf 108
• Version 5.4.0

[pbaity]

@GFNiko the dark mode toggle button is added to the menu at the top of the side nav on the left. Can you check there? (It's the sun icon)

[GFNiko]

No it's not there

[pbaity]

@GFNiko What version of Rocket.Chat are you running? If you can give me the steps you followed to set it up I'll try to recreate.

It may be an issue in a new version of Rocket.Chat. I suspect maybe the class names we use to select the side nav for adding the toggle button have changed.

[GFNiko]

It's version 5.4.0. I guess it is this because I cannot see a 5.4 version from the dark mode. My steps as I wrote in the OP are as follows:

I copy pasted your code in the respective fields in the layout (custom csss and Custom Script for Logged In Users). Reloaded the page afterwards with ctrl+shift+r, logged out and back in, but nothing changed. Installed the desktop app and it looks the same as the website. And there is also no extra button in the upper area beside the username.

If you want to know more, I am afraid, you have to ask for explicit details since I am not familiar with this. But I understand HTML and CSS (Javascript not so much unfortunately) if this would be needed

[pbaity]

Sorry, I meant to ask for the steps you followed to deploy your Rocket.Chat instance with Docker. I don't need too much detail because the deployment method shouldn't effect whether dark mode works. The Rocket.Chat version is what matters.

Just to confirm though, did you follow Rocket.Chat's docs for deploying with docker-compose?

[GFNiko]

Mostly, minor changes. Here is my docker-compose file:

version: '3.4'

services:
  rocketchat:
    image: rocket.chat:5
    restart: on-failure
    volumes:
      - ./uploads:/app/uploads
    environment:
      - PORT=3030
      - ROOT_URL=http://localhost:3000
      - MONGO_URL=mongodb://rocketchat-db:27017/rocketchat?replicaSet=rs0&directConnection=true
      - MONGO_OPLOG_URL=mongodb://rocketchat-db:27017/local?replicaSet=rs0&directConnection=true
      - DEPLOY_METHOD=docker
    depends_on:
      - mongo
    networks:
      - internal
    ports:
      - 3030:3030

  mongo:
    image: mongo:4.4
    container_name: rocketchat-db
    restart: on-failure
    volumes:
     - ./data/db:/data/db
     - ./data/dump:/dump
    command: mongod --dbpath /data/db --oplogSize 128 --replSet rs0 --storageEngine wiredTiger
    networks:
      - internal

  mongo-init-replica:
    image: mongo:4.4
    command: 'bash -c "for i in `seq 1 30`; do mongo rocketchat-db/rocketchat --eval \"rs.initiate({ _id: ''rs0'', members: [ { _id: 0, host: ''localhost:27017'' } ]})\" && s=$$? && break || s=$$?; echo \"Tried $$i t imes. Waiting 5 secs...\"; sleep 5; done; (exit $$s)"'
    depends_on:
      - mongo
    networks:
      - internal

networks:
    internal:
        name: internal
        external: false

[pbaity]

Thanks. I'll use your docker-compose file just to be sure I'm replicating what you did. Though like I said, I think the version will be all that matters. Sorry for all the noise about a trivial point :sweat_smile:

[GFNiko]

No problem, I'm glad you're taking the time to help me out :)

[pbaity]

Happy to help. I'm afraid I often don't get the free time to help hands-on but I do my best!

I just spun up a fresh Ubuntu VM and installed with docker (it defaulted to version 5.4.2) and it looks like dark mode is working for me:

I'll try again and specify 5.4.0, but I'd be surprised if it didn't work. I know you already have, but you might want to double-check your steps to install dark mode. Everything looks like it's in the right field in your screenshot. Did you copy in the whole raw files (or did they accidentally get truncated)? Did you remember to hit save?

[pbaity]

Just to confirm - I tried again with 5.4.0 (I forgot to use your docker-compose.yml earlier, so I used it this time and it used 5.4.0) and dark mode still works for me, same as above.

This makes me think there was maybe a copy-paste error? Try again, copying the raw contents of dark-mode.css and dark-mode-toggle.js. If even the last single line of the JS file was truncated, it won't work (because that last line calls the function to add the toggle button).

[cykomiko]

@pbaity can You check 5.4.1 please? it doesn't look good

[pbaity]

@cykomiko Did you install 5.4.1 with Docker? I don't see an image tag for 5.4.1 on DockerHub.

Also, I tested 5.4.0 and 5.4.2 and they looked fine - what in the world happened in 5.4.1!?

[cykomiko]

Did you install 5.4.1 with Docker?

No, it's manual installation. If You can't check I'll try to upgrade to 5.4.2 next week. Thanks!

[pbaity]

@cykomiko Yeah, you'll probably be able to upgrade before I get the time to do a manual installation. If upgrading to 5.4.2 doesn't solve your problem, let me know.

[GFNiko]

Did you copy in the whole raw files (or did they accidentally get truncated)? Did you remember to hit save?

Yes, raw copy per ctrl a, ctrl c, ctrl v. I did try it again and it works now. I feel like really dumb now. Sorry for bothering you. I did try that in fact 3 times before I wrote a ticket. Thank you for your help

[pbaity]

@GFNiko Haha no worries! It's easy for the "install" process to go wrong, since we have to rely on copy-pasting in custom CSS and JavaScript. Enjoy dark mode!