Cloudron makes it easy to run web apps like WordPress, Nextcloud, GitLab on your server. Find out more or install now.


Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Bookmarks
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

Cloudron Forum

Apps | Demo | Docs | Install
  1. Cloudron Forum
  2. FreeScout
  3. Dark Mode Now Available (unofficial)

Dark Mode Now Available (unofficial)

Scheduled Pinned Locked Moved FreeScout
15 Posts 3 Posters 2.5k Views 3 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • humptydumptyH Offline
    humptydumptyH Offline
    humptydumpty
    wrote on last edited by humptydumpty
    #4

    Here's my version of the CSS code. This is a full replacement to what's in darkmode.css (Darkmode\Public\css\darkmode.css).

    https://paste.cloudron.io/osabijokan.css (rev. 2)

    Here's a screenshot of it:

    Screenshot 2021-03-06 213052.png

    Edit: rev.2 - new tickets have highlighted background to make it easier to spot

    1 Reply Last reply
    1
    • jimcavoliJ Offline
      jimcavoliJ Offline
      jimcavoli
      App Dev
      wrote on last edited by
      #5

      You should see if they'd take a patch upstream for this! Nice work

      humptydumptyH 1 Reply Last reply
      2
      • jimcavoliJ jimcavoli

        You should see if they'd take a patch upstream for this! Nice work

        humptydumptyH Offline
        humptydumptyH Offline
        humptydumpty
        wrote on last edited by
        #6

        @jimcavoli This is already posted upstream on their github by another user. All I did was modify their CSS since I didn't like the color palette they used.

        1 Reply Last reply
        1
        • humptydumptyH Offline
          humptydumptyH Offline
          humptydumpty
          wrote on last edited by humptydumpty
          #7

          I made a new purple theme (dracula inspired) if anyone is interested.

          https://paste.cloudron.io/jatanegogo.css

          In the notification area, I replaced the customer profile picture with a notification bell emoji. Please delete the last two lines in the css file if you don't want to have that replaced.

          For new comers coming across this, download the unofficial dark mode plugin and paste the code in there.

          172e53f6-5bbd-4536-8391-e14f069c33ac-image.png

          edit: updated link - css fix

          robiR 1 Reply Last reply
          1
          • humptydumptyH humptydumpty

            I made a new purple theme (dracula inspired) if anyone is interested.

            https://paste.cloudron.io/jatanegogo.css

            In the notification area, I replaced the customer profile picture with a notification bell emoji. Please delete the last two lines in the css file if you don't want to have that replaced.

            For new comers coming across this, download the unofficial dark mode plugin and paste the code in there.

            172e53f6-5bbd-4536-8391-e14f069c33ac-image.png

            edit: updated link - css fix

            robiR Offline
            robiR Offline
            robi
            wrote on last edited by
            #8

            @humptydumpty Nice, from here it looks more indigo 💜

            Conscious tech

            humptydumptyH 1 Reply Last reply
            0
            • robiR robi

              @humptydumpty Nice, from here it looks more indigo 💜

              humptydumptyH Offline
              humptydumptyH Offline
              humptydumpty
              wrote on last edited by
              #9

              @robi maybe I should have chosen the colors on my other monitor and not on the 100% sRGB one 😆

              robiR 1 Reply Last reply
              0
              • humptydumptyH humptydumpty

                @robi maybe I should have chosen the colors on my other monitor and not on the 100% sRGB one 😆

                robiR Offline
                robiR Offline
                robi
                wrote on last edited by
                #10

                @humptydumpty hehe.

                It would be nice if CSS could set a global color variable at the top and then use offsets from that color everywhere in the code so there's only one place to change it for a different base color.

                Conscious tech

                humptydumptyH 1 Reply Last reply
                0
                • robiR robi

                  @humptydumpty hehe.

                  It would be nice if CSS could set a global color variable at the top and then use offsets from that color everywhere in the code so there's only one place to change it for a different base color.

                  humptydumptyH Offline
                  humptydumptyH Offline
                  humptydumpty
                  wrote on last edited by
                  #11

                  @robi I could work on that next time I fiddle with it. How can I use variables though?

                  The colors palette consists of about 4-5 colors at most.

                  robiR 1 Reply Last reply
                  0
                  • humptydumptyH humptydumpty

                    @robi I could work on that next time I fiddle with it. How can I use variables though?

                    The colors palette consists of about 4-5 colors at most.

                    robiR Offline
                    robiR Offline
                    robi
                    wrote on last edited by
                    #12

                    @humptydumpty

                    Quick search reveals:
                    https://www.geeksforgeeks.org/css-variables/

                    Conscious tech

                    humptydumptyH 2 Replies Last reply
                    0
                    • robiR robi

                      @humptydumpty

                      Quick search reveals:
                      https://www.geeksforgeeks.org/css-variables/

                      humptydumptyH Offline
                      humptydumptyH Offline
                      humptydumpty
                      wrote on last edited by
                      #13

                      @robi That looks super easy to implement, even for me!

                      1 Reply Last reply
                      1
                      • robiR robi

                        @humptydumpty

                        Quick search reveals:
                        https://www.geeksforgeeks.org/css-variables/

                        humptydumptyH Offline
                        humptydumptyH Offline
                        humptydumpty
                        wrote on last edited by humptydumpty
                        #14

                        @robi do you mind double checking the code real quick?

                        https://paste.cloudron.io/xefizegehu.css

                        Something is off with the code because it's breaking the darkmode when saved.

                        What I've edited/added is:

                        :root {
                                --color-text: #d9d9d9;
                                --color-dark: #394885;
                                --color-darker: #303d71;
                                --color-darkest: #232d53;
                                --color-headers: #2196F3;
                                --color-headers2: #4789cc;	
                                --color7: #93a1af;
                                --color-special1: #24a438;
                                --color-special2: #b37100;		
                        }
                        

                        In notepad++ using the search and replace tool, I replaced "#d9d9d9" with "var(--color-text)", etc.. .... minus the quotations of course.

                        Where did I go wrong?

                        robiR 1 Reply Last reply
                        0
                        • humptydumptyH humptydumpty

                          @robi do you mind double checking the code real quick?

                          https://paste.cloudron.io/xefizegehu.css

                          Something is off with the code because it's breaking the darkmode when saved.

                          What I've edited/added is:

                          :root {
                                  --color-text: #d9d9d9;
                                  --color-dark: #394885;
                                  --color-darker: #303d71;
                                  --color-darkest: #232d53;
                                  --color-headers: #2196F3;
                                  --color-headers2: #4789cc;	
                                  --color7: #93a1af;
                                  --color-special1: #24a438;
                                  --color-special2: #b37100;		
                          }
                          

                          In notepad++ using the search and replace tool, I replaced "#d9d9d9" with "var(--color-text)", etc.. .... minus the quotations of course.

                          Where did I go wrong?

                          robiR Offline
                          robiR Offline
                          robi
                          wrote on last edited by
                          #15

                          @humptydumpty you only need one ; per brace { } pair.

                          Use a CSS validator to help you.

                          Conscious tech

                          1 Reply Last reply
                          0
                          Reply
                          • Reply as topic
                          Log in to reply
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes


                          • Login

                          • Don't have an account? Register

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Categories
                          • Recent
                          • Tags
                          • Popular
                          • Bookmarks
                          • Search