Skip to content

IMPORTANT: Theme / Swatch changes

Announcements
  • Less really is more - @crazycells , I have to agree 🙂

    See the post below for more detail around the decision

    https://sudonix.org/topic/517/theme-retirement/2

    I’ve spent a LOT of time completely redesigning the theme interface so that it matches modern standards, and colours. Based on this, there are several changes under the bonnet which you won’t be able to see or access unless you clear your cache.

    I will make every effort to automate as much as possible on this platform, but of course, I have zero control over your browser cache, so you will need to that manually.

    What’s changed?

    I’ve made the entire forum “Material Design” themed. Whilst I’m not necessarily a Google fan, I do very much like the way the UI is put together, and it’s a familiar concept that just about everyone with a mobile phone and internet connection has encountered at some point (probably every day actually)

    Did you dump Bootstrap?

    Ha - no. Bootstrap is a major component of this platform, and it would look pretty odd without it. In a similar vein, jQuery is also very much still present, and required for the custom functions I’ve written to run.

    How many themes are there now?

    There are now 3 - down from 15. These are now light, dim, and dark. Not very imaginative, but simple solutions are always best.

    What do they look like?

    Below are examples

    Light

    3833fcd7-eae3-4c98-b66d-96938838bd53-image.png

    Dim

    2b376f95-85a5-4c2a-b074-89fc3d99cc65-image.png

    Dark

    0d82760e-2688-4db5-97cc-5605829d7c7c-image.png

    Can I still use “x” theme?

    You can, but these are not directly compatible with the new theming system, and therefore, you will get very undesirable results unless you clear your cache and choose one of the new selections. I also will not be back porting these themes to make them work - they are now considered legacy

    Any new features?

    Kind of. I added components as I went, meaning that there are some obvious changes, and some you’ll never notice. The new themes make use of accents such as the below, and future updates (coming soon) will provide enhancements in this same area

    03d5d75e-8bdb-4f3e-84a2-9df0640402a8-image.png

    Did you design the themes yourself?

    Yes - and no. MD is a very mature standard, and therefore, there are a good number of colours natively available. However, not all that glitters is gold, so some modifications were necessary to enhance readability etc.

    Can you share the resources you used for inspiration?

    Of course 🙂 See below

    Material Design

    https://mdbootstrap.com/

    Material Design

    https://mdbootstrap.com/live/_doc/all-colors.html

    GUI Challenges

    https://gui-challenges.web.app/color-schemes/dist/

    GUI Challenges - Git Demos

    https://github.com/argyleink/gui-challenges

    There are more - you literally just need to search for them. These are not direct “copies”, but merely for me take inspiration and create something special / sexy / unique (delete as applicable).

    Hope you like these new themes. Over the coming weeks (as was always the long term plan), I will be using the Material theme Accents to define category colours so they make sense, and do not look “garish” against the new themes.

    Enjoy.

  • good work Mark as always do your best.

  • Mark we should do anything also to get these changes?

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


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

    Announcements
    16
    15 Votes
    16 Posts
    209 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.

  • Swatch / Theme Changer

    Code Respository
    8
    3 Votes
    8 Posts
    2k Views

    @veronikya it might flicker on load, yes, and that’s normal. It’s because the CSS and JS are loaded before the custom elements, but it shouldn’t be too bad on reasonable links.

    It shouldn’t flicker at all navigating through the site though as the CSS and JS are already loaded.

  • 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”

  • Rebranding / other changes

    Announcements
    42
    33 Votes
    42 Posts
    2k Views

    @crazycells said in Rebranding / other changes:

    thanks for the info you gave, I need to transfer this info to our dev team

    No problems - let me know if you need any other info.

  • NodeBB: Creating the Swatch modes

    Solved Configure
    2
    0 Votes
    2 Posts
    187 Views

    @mventures the swatch feature you refer to isn’t a NodeBB plugin, but a utility that I wrote that handles this. It is available for v2 (as you can see here) but I’ve stopped developing and releasing the code because it has been entirely rewritten to work for v3.

    If you’d like the code, this is possible, but you’ll need to upgrade to v3 first.

  • Changing the look of recent cards

    Announcements
    1
    2 Votes
    1 Posts
    270 Views
    No one has replied
  • Theming support in Sudonix

    Moved Announcements
    41
    61 Votes
    41 Posts
    5k Views

    @phenomlab said in Theming support in Sudonix:

    I thought I’d better come by here with an update so everyone knows that the Swatch project isn’t abandoned, or has simply “gone cold”. In fact, quite the opposite.

    I’ve setup a dev instance on my home network which I’m currently developing against. I’ll put some screenshots up soon, but the Swatch code is currently enjoying a rewrite. The great news is that you’ll get ten times the flexibility you have now meaning greater support for light themes, although the downside is that there isn’t that much backwards compatibility meaning some of my own themes even need to be completely redesigned.

    However, this isn’t the end of the world. Once you’re familiar with the classes, it really doesn’t take long at all to create your own themes.

    More to follow.

    I’ll be putting together a video of what the revamped theme will look like very soon - just got some small issues to iron out, and code cleanup beforehand…

  • Theme changes

    Announcements
    6
    10 Votes
    6 Posts
    550 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.