Skip to content

Theming support in Sudonix

Moved Announcements
  • I can’t believe I actually missed this part - the icon where the magic happens ! To change the swatch to something else, use the “swatch” icon as shown below

    3a13e4c8-46c3-4393-985c-def4b7c59caa-image.png

    Select the swatch you’d like and the site will reload with the new colours.

  • Something of a slight deviation here in the sense that I’m developing a new stock light theme that will override the default. It’s designed to be easy on the eye, appealing from the layout perspective, and to be engaging… Here goes…

    edeec2c1-379e-4157-a6b5-a81ebba1c295-image.png

    It’s not quite ready yet as it needs some final polish before it gets officially released. However, I’ll let you into a secret. If you click on the swatch icon, you’ll see “Light” in the list which is the working title for this theme

    6fbabb7c-8b72-4fb4-a3eb-acf6714c4ff9-image.png

    Give it a spin, and let me know what you think. Just remember that this is a moving target currently and still has bugs 🐛

    Let me know if you find anything major (aside from what @crazycells has already reported which relates to the modified core CSS)

  • Small addition of sexy looking gradient popular tags

    c16f90bf-17ac-4a40-9080-621ae1a08f29-image.png

    This is part of the light theme I’ve been working on, and is designed to match the progress bar

    27fe918e-fd31-42b3-9f25-ee3996f0626a-image.png

    Seriously falling in love with this new design. It’s clean, sharp, and attractive all at once 🙂

  • Beautiful 🙂

  • For anyone following this thread or using the “light” theme, it’s been renamed to “Daylight” to more accurately reflect the colour scheme in use. If you are using this, when you reload, the default theme will probably be loaded. This is expected because the cookie is storing “light” and there will no longer be a match.

    If you select “Daylight”, then you should be good to go.

  • I spent some more time this afternoon / evening reviewing the overall structure of the themes, and had a lightbulb moment in the sense that it could (and should) be leaner / quicker. The big mistake here is duplicating the CSS in each Swatch (note I’m using the word “Swatch” here because the “theme” is undergoing major refactoring) makes the initial loading slower than it really should be as the entire page has to be reloaded to remove the previous CSS classes.

    From a design perspective, this didn’t make any sense the more I thought about it. So, off to Dev I went and began refactoring. The end result (in Dev at least) is that there is now one “common” CSS file that gets loaded once, and the “swatches” are just CSS variables (rather like mixins) where the existing ones are replaced with a new set on selection.

    Instead of adding another large CSS file, and effectively increasing the load time, we now simply call around 15 mixins and inject these into the head with an Ajax request. This means the Swatch changes instantly, and the site no longer needs to be reloaded to clear out any odd looking artefacts.

    Admittedly, this has now “broken” the daylight theme in the sense that I have to restructure it as it was experiential at the time, and something of a deviation in that the mixins used do not align properly as they do in the other swatches. This was more about attempting to achieve a specific look.

    I succeeded on that front as per the previous post, but now have to rework it based on the changes I’ve made to the other swatches in order to streamline them. One thing I did take from the daylight Swatch is the user posting style (giving an illusion of threaded replies) that makes the overall reading experience better in my view - this is now sewn into all swatches meaning a consistent viewing experience throughout.

    Tomorrow will hopefully allow me time to get the daylight Swatch working again. Once done and tested, I’ll implement it in production.

  • @phenomlab

    wooo it’s very good work Mark.

    I’m very interrested with taht features to improve what we have done together in order to less overload the load of my forum when using the theme switcher

  • Most of the work on the daylight Swatch has been completed. However, I did realise quite early on that I’d need to add some unique variables otherwise it meant having to remove functionality from the daylight colour scheme which I didn’t want to do.

    I’ve found a way around this hopefully so work will continue tomorrow as time permits.

  • Over the past couple of days, I’ve been making significant headway with this, and the performance benefits are huge. Hoping to release to production in the coming weeks.

  • It’s been a while so I thought I’d provide an update. Bar a couple of small bugs, I’m almost complete with the refactoring of the theming engine and associated code.

    During testing, this is a game changer in terms of loading speed. There are essentially two main components

    • A “global” CSS file that essentially provides the foundation for all themes.
    • The addition of a Swatch - based on CSS variables which contains no CSS. This means that no additional CSS is loaded or removed during theme changes, and also means there is no need to reload the site.
    • With minification, the global CSS theme (once unneeded elements are removed) comes in at around 10kb. The Swatch files are literally less than 1Kb

    Once I’ve moved this into production, I’ll share the code.

  • Hi All,

    I just implemented a raft of new code from DEV to PROD. You will need to reload your browser (ideally a hard refresh) to pick up the new code, styles, and swatches. It’ll be worth the effort - trust me 🙂

  • Ugh… Spotted some (really minor) 🐛 but nothing that’s not easily fixed. I need to implement the final stages also - most of which are code refactoring, and minification.

    I’ll post the completed code plus documentation as soon as it’s finished 🏁

  • @JAC thanks

  • *** NEW *** “FaceTube” theme added

    Like the YouTube and Facebook Dark themes ? Well, you can now have both here !!

    ec896468-5960-42c0-97ff-b45f3c9f041d-image.png

    Enjoy

  • @Sampo2910 thanks. I’m going to be cleaning up the code and proving a new post with instructions etc soon. Fully stable now with (I hope) no bugs, so ready for release once I’ve finished the cleanup.

  • *** NEW *** Greybird theme added
    For those who like the Ubuntu theme of the same name, this is for you. Not entirely a replica, but pretty close 🙂

    602b2b7d-7604-43f9-bc38-d69bf83808c7-image.png

  • *** NEW *** Tempest theme added

    A nice blend of dark colors. Easy on the eyes, and perfect for those who like a bit of darkness in their lives 🙂

    5f72aebb-0c38-474d-9deb-5f91814b5844-image.png


Related Topics
  • Ch..ch..ch..ch..changes!

    Announcements
    16
    15 Votes
    16 Posts
    223 Views

    @phenomlab of course, to be recognised is fantastic.

    @phenomlab said in Ch..ch..ch..ch..changes!:

    Sadly, no. Web crawlers and scrapers are often JS based and read text only, so styles don’t have any bearing.

    I’ve read mixed things about this, but no that does make sense, it was something I read a many years back when using Wordpress.

  • IMPORTANT: Theme / Swatch changes

    Announcements
    4
    6 Votes
    4 Posts
    287 Views

    @cagatay these changes aren’t published anywhere presently, so nothing for you to do.

  • Theme retirement

    Announcements
    21
    16 Votes
    21 Posts
    1k Views

    I relented somewhat here and added another swatch - one I missed, which was previous called “blackout”. This specific one has been adapted to work on the new theming engine, but the others have been reclassified, and renamed to suit.

    image.png

    As a result, the theme you might have had will probably be reflecting something else, so you (might) need to change your themes accordingly. The changes are as follows

    Light -> No Change
    Cloudy -> Is now the old “Dim”
    Dim -> Is now the old “Dark”
    Dark -> Now a new theme based on the revamped “Blackout”

  • NodeBB templates

    Locked Chitchat
    12
    4 Votes
    12 Posts
    1k Views

    Placing this here for reference
    https://sudonix.com/topic/216/nodebb-js-script-css-theme-switcher

    Further information and posts can be found at this link

  • Theme changes

    Announcements
    6
    10 Votes
    6 Posts
    551 Views

    There’s still some very minor bugs in the two themes (light and dark) but these will be resolved in the coming days. Some are specific to firefox, and well require special attention, but will still be resolved nonetheless.

  • Sudonix featured on justoverclock.it

    Announcements
    3
    8 Votes
    3 Posts
    360 Views

    @Madchatthew thanks

  • PWA support for Sudonix Platform

    Announcements
    4
    5 Votes
    4 Posts
    450 Views

    @crazycells Yes, you should install the app that is offered when you access the site. I’ve had mixed experiences with this though. It seems to work fine with Chrome and Firefox, but it’s a bit hit and miss with Apple devices because of their closed ecosystem, and the inability to access the push service directly.

    Android is completely different in the sense that the service is open for usage, meaning hooking into the pusher is simple. For Apple, it is closed source, so probably won’t work.

  • Support for Apple Emojis

    Announcements
    3
    0 Votes
    3 Posts
    296 Views

    @jac 😞 Seems not