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.4k 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
    #1

    Source: https://github.com/freescout-helpdesk/freescout/issues/1069

    Method 1

    This requires two steps to get it to work if you follow the github page:

    • Upload & Activate the dark mode module that places a toggle in the top bar (/app/data/Modules/)

    • Add the CSS code to the stylesheet (folder path: Darkmode\Public\css\darkmode.css)

    modules.png

    Screenshot 2021-03-06 183642.png

     

    Method 2

    Alternatively, you can use the zip from the link below which includes the needed css code. All you need to do is upload it to the server as mentioned above and you're all set.

    https://www.dropbox.com/s/r7hofncs26vsb0q/Darkmode.zip?dl=1

    P.S. The colors aren't that great looking. I'll share my version of the css code once I tweak it to my liking.

    robiR 1 Reply Last reply
    2
    • humptydumptyH humptydumpty

      Source: https://github.com/freescout-helpdesk/freescout/issues/1069

      Method 1

      This requires two steps to get it to work if you follow the github page:

      • Upload & Activate the dark mode module that places a toggle in the top bar (/app/data/Modules/)

      • Add the CSS code to the stylesheet (folder path: Darkmode\Public\css\darkmode.css)

      modules.png

      Screenshot 2021-03-06 183642.png

       

      Method 2

      Alternatively, you can use the zip from the link below which includes the needed css code. All you need to do is upload it to the server as mentioned above and you're all set.

      https://www.dropbox.com/s/r7hofncs26vsb0q/Darkmode.zip?dl=1

      P.S. The colors aren't that great looking. I'll share my version of the css code once I tweak it to my liking.

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

      @humptydumpty if you adjust the link to the zip to end with a 1 instead of a 0, it will download w/o asking to sign in.

      Conscious tech

      humptydumptyH 1 Reply Last reply
      1
      • robiR robi

        @humptydumpty if you adjust the link to the zip to end with a 1 instead of a 0, it will download w/o asking to sign in.

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

        @robi Thanks for the tip!

        1 Reply Last reply
        0
        • 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