Skip to content

Swatch / Theme Changer

Code Respository
  • Hi all,

    As most of you know, there is a swatch / theme switcher on this site, which can be found here

    2b2a7aeb-b373-4cfd-867a-363af8baf4d7-image.png

    I decided to create this based on an idea from @DownPW who wanted to add theming capability to NodeBB v2.x. This started off as a relatively simple code snippet, and then over time, leveraged technologies such as Ajax etc in order to provide new features. The code is now fully mature having gone through various iterations and changes in order to make it fully compliant with BS5 and NodeBB v3.x

    Let’s get started…

    Disclaimer

    You are strongly recommended to test this process out in a dev environment before trying it in production. Trust me, there’s nothing worse than having users ask you why things don’t look right when they access your forum, and you’d spent ages setting everything up, so do yourself a favour - if you really are intent on putting this into your own site, please test it first and get comfortable with the process before proceeding to live.

    Synopsis

    First and foremost, it’s worth explaining how the various elements this uses are combined to make one product.

    1. The Brand Header widget - this is used for the actual HTML that contains all of our selections (Light, Dim, Darkness)
    2. The JS code - this is placed into your ACP under /admin/appearance/customise#custom-js. We are leveraging the already present jQuery to execute these functions
    3. The “theme files” - these are located in your /public structure inside a special folder we identify as customcss

    All of my code is slowly moving to git and this particular repository can be found below

    https://github.com/phenomlab/swatch/tree/main

    JS Code

    The code itself looks “complex”, but actually isn’t. You can find it here

    https://github.com/phenomlab/swatch/blob/main/functions.js

    You’ll need to copy all of this code, and paste it into /admin/appearance/customise#custom-js. Don’t forget to enable this feature (see below)

    9c4a8f24-e97e-410e-9175-cd10d3e1582b-image.png

    Don’t expect any miracles at this point 🙂

    The widget code

    In your ACP, go to /admin/extend/widgets and look for

    Brand Header global / brand-header

    Using the selectors on the right, drag the HTML widget into this area

    4aa1208e-6790-4551-9e6d-ed84c3d9be11-image.png

    37d2a041-44bd-4148-8f9f-16e5088a1ede-image.png

    Drop it into the area shown in the screenshot. This will form the container for the HTML code we need to add, which is here

    https://github.com/phenomlab/swatch/blob/main/widget.html

    Copy all of the code from the link above into the widget you just created

    390c18cd-b144-493b-b0c4-c062c829bfe9-image.png

    Don’t forget to save

    8d0b364b-bf9f-4290-a9ee-9165d962c011-image.png

    The CSS

    IMPORTANT Use of this applet requires customised CSS which can be found in the link below. You MUST replace all of your existing CSS for this to work. There are NO exceptions!

    The “Global CSS” file is here

    https://github.com/phenomlab/swatch/blob/main/global.css

    You will need to select all of this file’s contents, and paste into /admin/appearance/customise#custom-css - completely overwriting any custom CSS you already have. Backup your current content in case you change your mind, so you can easily revert if you decide not to use this.

    Why do I need to use your CSS?

    You don’t, but because I make extensive use of theme variables, if you want to keep what you have now, you’re more than welcome to, but I won’t support it, and you’ll need to make hundreds of adjustments - up to you. My themes are nice though, so why not use them?

    The remaining additional CSS is relatively simple, but needs to work for both desktop and mobile. It can be found here

    https://github.com/phenomlab/swatch/blob/main/switcher.css

    Copy all of this CSS

    Now go to /admin/appearance/customise#custom-css and paste the CSS into the resulting window at the end of the existing CSS you created above. Again, make sure these are set to on

    aabb6fea-ded8-46d9-baaf-de51416e9803-image.png

    CustomCSS folder

    This part is without doubt the most important, and nothing will work without these.

    https://github.com/phenomlab/swatch/tree/main/customcss

    Copy the main directory from the link above and it’s files to your web server, into /nodebb/public (wherever your NodeBB installation resides). You should land up with a folder that when accessed contains all of the files.

    There are two components to the customcss folder. The most obvious is the CSS files, but inside this folder is a sub-folder called “editors”. This contains CSS files from highlight.js which is used for code syntax in NodeBB. You can get your own themes here

    https://highlightjs.org/static/demo/

    Inside the main CSS files, we “import” the editor CSS we want - for example

    11faa08c-9387-4710-82d1-338ddcb5eca9-image.png

    Make sure the permissions you set for these newly imported files match what you are using for NodeBB.

    If everything went to plan, then you should have a functional swatch applet / theme switcher. You may need to clear the cache etc if you are using Cloudflare.

    Any issues, let me know.

  • phenomlabundefined phenomlab referenced this topic on
  • Clean and understandable tutorial as usual.

    Already in place for some time since I’ve been working with it for several months 😉

    blink.gif

    Not unhappy to have found this idea of ​​color representation for each theme 😉

  • @DownPW Can’t beat a demo - thanks!

  • phenomlabundefined phenomlab referenced this topic on
  • After importing the css, there is a problem with the icons, are other icon packages being used, and how can I change the icons to restore the defaults?

    3300211b-2b82-49af-af30-e69bcd19624e-image.png

  • @veronikya yeah, that’s going to because I am using Font Awesome Pro.

    • Search the CSS for Font Awesome Pro and replace with Font Awesome Free.
    • Search for font-weight: 400; and replace with font weight: 900; (but only in the places where Font Awesome is defined as the font-family)

    I’ll update the code tomorrow. Apologies

    EDIT - CSS file has been updated

  • The theme seems to flicker when the client first opens or jumps to a page, I think it could be put directly into the skin customization of 2.3.2 and loaded on the server, I’ll give it a try!

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


  • 6 Votes
    4 Posts
    203 Views

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

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

  • 24 Votes
    29 Posts
    924 Views

    Not on my side it doesn’t and I’ve not changed anything. Can you send a screenshot?

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

  • 4 Votes
    8 Posts
    325 Views

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

    skins.gif

  • 61 Votes
    41 Posts
    4k 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…

  • 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