Dark Blue Theme OMV 5

1. offizieller Beitrag

    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

    Hat das Thema freigeschaltet.
    • Offizieller Beitrag

    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.



    Zitat von KM0201

    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 |

    Gefällt mir 1
    Zitat von KM0201

    "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 |

    • Offizieller Beitrag
    Zitat von topaLE

    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.

    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!

    Zitat von ruudm

    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 |

    • Offizieller Beitrag
    Zitat von ruudm

    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)

    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 |

    Haha 1
    Zitat von chente

    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 |

    • Offizieller Beitrag

    It looks great, thanks !!


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


    Zitat von chente

    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 |

    Gefällt mir 2
    • Offizieller Beitrag
    Zitat von topaLE

    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.

    • Offizieller Beitrag
    Zitat von chente

    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.

    Zitat von KM0201

    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 |

    • Offizieller Beitrag
    Zitat von topaLE

    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?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden