Before copying the LESS and CSS I recommend activating the night mode in Appearance> Dark mode
All the less and css codes are in the github repository just leave them the link.



Paste Less - Appearance> Custom Styles
Link - https://github.com/retsill/DarkBlue-FlarumStyle/blob/main/darkblue/less/style.less

Paste HTML for Footer - Appearance> Custom Footer
Link - https://github.com/retsill/DarkBlue-FlarumStyle/blob/main/darkblue/footer.html

The area of the footer can put the links they want, simply change their name and paste their url as well as the icons.

The CSS for Footer won't work Custom styles so you have to paste the code - Appearance> Custom Header
Link - https://github.com/retsill/DarkBlue-FlarumStyle/blob/main/darkblue/css/bloques.css

I hope you like it ...

    dllister changed the title to 2020 Dark Blue - New and simple dark theme in LESS / CSS .

    hadpro if it's something similar except that from this template I add a footer to it.

      I love this. I’m not sure if I’ll use it or not but I love it. One day, Friends of Flarum maybe could make the day/night mode extension so that you can choose from turning things mostly black, to maybe a dark grey, and then also a dark blue as options. For example, I love Twitter’s dark blue-ish night mode.

      16 days later

      dllister This is good. Would you be able to give the code just for the footer? I like your theme but I can't use a dark theme overall. Your footer layout is pretty good. Just want to get that working for my flarum forum.

          Any screenshots available?

          thanks @[deleted], I have tried that along with the header and CSS part but somehow the columns in the footer don't work. All the stuff in footer comes up on one column. The only way I got columns is by using an example like the one here
          https://codepen.io/scanfcode/pen/MEZPNd which had script in the header calling for google api's and with that the links extension breaks - the drop down menus don't work. I've taken off footer from my site until I can find some working footer code with columns.

            • [deleted]

            • Post #10

            kris88 have you tried display: inline; in the CSS ? I haven't tested this of course, but in the screenshot the divs are floated in columns

              dllister The CSS for Footer won't work Custom styles so you have to paste the code - Appearance> Custom Header

              don't forget to add <style></style> to work 🙂

                @[deleted] , @Amarok Thanks guys. It was indeed the lack of <style></style> tags that troubled me and it was silly to think of!

                5 months later

                dllister I would like to adjust that on my side. How can you get that from you and what do you have to pay attention to?

                  8 months later

                  i pasted the codes as in description
                  header is messed up like this
                  and footer is messed up like this
                  what do i do to fix this please help ??

                  a year later

                  You should build this theme into a extension, sound great idea over there.