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.


  • 3 Votes
    8 Posts
    801 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.

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

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

  • 24 Votes
    27 Posts
    907 Views

    @cagatay You can target the CSS and see how it is constructed. You probably need the revised CSS and theme files.

    CSS is below

    .btn-primary, .btn-light { --bs-btn-active-bg: var(--bs-node-btn-active-bg); --bs-btn-active-border-color: var(--bs-node-btn-active-border); --bs-btn-bg: var(--bs-node-btn-bg); --bs-btn-border-color: var(--bs-node-btn-border); --bs-btn-box-shadow: none; --bs-btn-color: var(--bs-node-btn-color); --bs-btn-hover-bg: var(--bs-node-btn-active-bg); --bs-btn-hover-border-color: var(--bs-node-btn-active-border); font-size: 14px; padding: 4px 8px; background: var(--bs-btn-bg); }
  • 0 Votes
    2 Posts
    140 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.

  • 36 Votes
    55 Posts
    4k Views

    @DownPW I see why. The code relies on the existence of

    [component="topic/quickreply/container"]

    However, this by definition means that the below has to be enabled

    aeef638f-4188-489d-a9f2-f3a26dbca9d8-image.png

    It will then work

    7fb38631-e0f3-46ef-b652-00929d927b13-image.png

    For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if “Quick Reply” is disabled, meaning it won’t fire as it can’t locate that specific component.

    The downside is that you might not want the quick reply function, but I think it’s a PITA to scroll up to the top of the post just to reply, so I have it on 🙂

  • 4 Votes
    8 Posts
    325 Views

    @Sampo2910 Here’s a demo of it from their blog

    skins.gif

  • 4 Votes
    12 Posts
    762 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