Dark Blue Theme OMV 5

  • Hello Friends,


    Since there are quite few appealing dark themes for OMV, I had sat down yesterday and put together a Dark Blue.


    The whole thing is available for download on GitHub. Who finds errors ... can keep them ;-) Just kidding. Of course feedback is desired. This is tested for OMV5.

    For older versions there may be differences in the class. So just test :-)


    Now have fun with the Dark Blue. Regards


    (Edit 22.10) ... und für unsere deutschen Zuschauer hier die Anleitung.


  • macom

    Approved the thread.
  • Really well done. I tend to like darker themes so I'm w/ this one.


    Only things I'd probably do different... is the "green" for the switches.. I'd have probably made those a tad brighter. Maybe it's my eyes playing tricks on me, but it looks like the enabled/disabled is more what I"m saying... and *maybe* when the switch is off, change that to a color that offsets the background more.. the gray may blend into the blue for some.



    Air Conditioners are a lot like PC's... They work great until you open Windows.


  • different... is the "green" for the switches.. I'd have probably made those a tad brighter.

    I'll take another look ... As I said, had implemented yesterday only times on the fly. It's still brand new and you can still change everything. Currently you can find all changes in the GitHub repository. ;-)

    | Alle Fehler die ihr findet, könnt ihr gerne behalten ;-) - Proxmox PVE - KODI - Linux - FHEM Smarthome , eben alles was begeistert |

  • "green" for the switches

    Your wish was once addressed. As I said, it's a matter of taste. One does not find this good, the other that ... / Hope that now goes in your direction with the bright green.



    Changes are in the GitHub.

    | Alle Fehler die ihr findet, könnt ihr gerne behalten ;-) - Proxmox PVE - KODI - Linux - FHEM Smarthome , eben alles was begeistert |

  • Your wish was once addressed. As I said, it's a matter of taste. One does not find this good, the other that ... / Hope that now goes in your direction with the bright green.



    Changes are in the GitHub.

    No need to change it on my behalf, I was just pointing out a couple of personal preferences. Someone properly motivated could easily go through and find this and adjust it. Doing something like this, if you try to make it pleasing to every single person.... you're going to end up on a hamster wheel forever. Ask ryecoaaron .. :)


    Looks great though.

    Air Conditioners are a lot like PC's... They work great until you open Windows.


  • I like the looks of the theme but I am not so familiar with setting filepermissions, as suggested on your Github.

    Set permissions to what :/ Can you point me to a direction? Thx!

    Pi4 | 64 bit | omv 6.0.5-3 (and Intel NUC)


  • I like the looks of the theme but I am not so familiar with setting filepermissions

    Either use su to use the openmediavault user via console or use a SFTP (SSH access) to copy the files and then change the file permissions.


    | Alle Fehler die ihr findet, könnt ihr gerne behalten ;-) - Proxmox PVE - KODI - Linux - FHEM Smarthome , eben alles was begeistert |

  • I like the looks of the theme but I am not so familiar with setting filepermissions, as suggested on your Github.

    Set permissions to what :/ Can you point me to a direction? Thx!

    1. SSH your server and become root


    2

    Code
    cd /var/www/openmediavault/css

    3. (this will open a blank file)

    Code
    nano theme-custom.css

    4. Copy/paste all the contents of this file, into the theme-custom.css file. (use the two boxes in the upper right as an easy way to copy paste the whole thing, as there's a bunch of lines if you try dragging your mouse)... https://github.com/topa-LE/omv…lob/main/theme-custom.css

    5. Cntrl X, then Y, then enter to save.

    6. back at the prompt use the command ls -l to view the folder contents. Note the theme-custeom.css has different ownership than the other files (line 14 in the codebox below)


    7. Change ownership of the file

    Code
    chown openmediavault-webgui:openmediavault-webgui theme-custom.css

    8. Now execute the ls -l command again, and notice the difference of ownership now matches the other files (line 14)

    9. Make a backup copy of defaults.scss

    Code
    cp defaults.scss defaults.scss.backup

    10. Use the ls command, and you should now see a defaults.scss.backup


    Code
    root@openmediavault:/var/www/openmediavault/css# ls
    Makefile theme-all.min.css
    defaults.scss theme-all.min.css.map
    defaults.scss.backup theme-all.scss
    materialdesignicons.min.css theme-custom.css
    materialdesignicons.min.css.map theme-triton.min.css
    theme-all-rtl.min.css theme-triton.min.css.map
    theme-all-rtl.min.css.map theme-triton.scss
    theme-all-rtl.scss
    root@openmediavault:/var/www/openmediavault/css#

    11. Edit defaults.scss

    Code
    nano defaults.scss

    12. Scroll to the bottom, and adjust the values as follows...

    Code
    $omv-color-more-lighter: #b2c2cd;
    $omv-color-lighter: #6897b6;
    $omv-color-default: #1b5d88;
    $omv-color-darker: #0b1625;
    $omv-color-more-darker: #0b1625;

    13. Cntrl X, then Y to save, then Enter.

    14. Back at the prompt, refresh the OMV webUI to see the new theme. (Note you may need to clear the web cache.. Cntrl + F5, while on the OMV sign on screen)


    To go back to the original OMV theme


    15. Remove theme-custom.css

    Code
    rm theme-custom.css

    16. Remove defaults.scss

    Code
    rm defaults.scss

    17. Restore the backup we created in step 9

    Code
    cp defaults.scss.backup defaults.scss

    18. Set ownership on the new defaults.scss

    Code
    chown openmediavault-webgui:openmediavault-webgui defaults.scss

    Reload the webUI, and you should be back at the original UI. (Note you may need to clear the web cache.. Cntrl + F5, while on the OMV sign on screen)

    Air Conditioners are a lot like PC's... They work great until you open Windows.


    Edited 10 times, last by KM0201: typos and just not paying attention.. :) ().

  • There was one faster ... ;-)


    Code
    sudo chown openmediavault-webgui /var/www/openmediavault/css



    Or depending on which user has openmediavault installed. Usually this is openmediavault-webgui.

    | Alle Fehler die ihr findet, könnt ihr gerne behalten ;-) - Proxmox PVE - KODI - Linux - FHEM Smarthome , eben alles was begeistert |

  • You still have an error in point 7


    "opemmediavault"

    Then so please:

    7. chown openmediavault-webgui:openmediavault-webgui theme-custom.css

    | Alle Fehler die ihr findet, könnt ihr gerne behalten ;-) - Proxmox PVE - KODI - Linux - FHEM Smarthome , eben alles was begeistert |

  • It looks great, thanks !!


    If you still want to improve it, you can still see some icons in black, the omv-extras add-ons.


    The best thanks to the help provided is to report what your solution was. The next one will thank you :thumbup:

  • If you still want to improve it, you can still see some icons in black, the omv-extras add-ons.

    I am aware of that around the bug, however I had just started to completely recreate it 2 days ago. Therefore it is good to get the feedback from you. With the invert of the svg's I am aware to solve it.

    | Alle Fehler die ihr findet, könnt ihr gerne behalten ;-) - Proxmox PVE - KODI - Linux - FHEM Smarthome , eben alles was begeistert |

  • I am aware of that around the bug, however I had just started to completely recreate it 2 days ago. Therefore it is good to get the feedback from you. With the invert of the svg's I am aware to solve it.

    Well, as long as you're just seeking opinions for improvement and don't feel like this is being demanded of you... I really like the red/white for the apply changes bar at the top. I'd recommend that red is how the switch looks when it is a disabled service... vs the grey you have now. Easily distinguishable.

    Air Conditioners are a lot like PC's... They work great until you open Windows.


  • You still have an error in point 7


    "opemmediavault"

    There's something about typing instructions when you've been up for about 17hrs, that is probably pretty entertaining to others. :). I don't do it if I know it's something that can really get borked... but this was a simple one.


    Fixed.

    Air Conditioners are a lot like PC's... They work great until you open Windows.


  • I'd recommend that red is how the switch looks when it is a disabled service... vs the grey you have now. Easily distinguishable.

    Will have to look at it later, as all svg pics need to be set invert. Yes I like to do this and it's just the beginning. Let's see how the theme looks in a few weeks ;-) If you have a tip how to convert just the black app icons , which have individual own SVG ...? For any help from others, I myself need less time ... and that is just very limited with me.

    | Alle Fehler die ihr findet, könnt ihr gerne behalten ;-) - Proxmox PVE - KODI - Linux - FHEM Smarthome , eben alles was begeistert |

  • Will have to look at it later, as all svg pics need to be set invert. Yes I like to do this and it's just the beginning. Let's see how the theme looks in a few weeks ;-) If you have a tip how to convert just the black app icons , which have individual own SVG ...? For any help from others, I myself need less time ... and that is just very limited with me.

    are the svg's on the omv-extras github?

    Air Conditioners are a lot like PC's... They work great until you open Windows.


Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!