# Uibuilder markweb too dark

**URL:** <https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [1 June 2026 13:18 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168 "2026-06-01T13:18:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 June 2026 13:18 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/1 "2026-06-01T13:18:57Z")

</div>

I haven't used uibuilder significantly, but the markweb feature appeals to me.

As suggested in the markweb node help text I configured it to show the demo pages and the result is:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/28c1de20bb103783fee4bc627a4b4bd0a995aad0.png)

I am not running any unusual theme as far as I know.  
uibuilder v7.7.0  
NR 5.0.0 Beta 6

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 June 2026 13:20 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/2 "2026-06-01T13:20:16Z")

</div>

Ooh, that doesn't look right!

Can you check the browser console and the network page to see if both stylesheet files have loaded?

It should look like this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f8502fa45e38de8aa92660dc1317a594179d070c.png)

There are 2 stylesheets. The default uibuilder brand and one specific for markweb:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a7c5a2e85a2d6ee0514aaa57a47f0a23434d3d6d.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 June 2026 14:01 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/3 "2026-06-01T14:01:15Z")

</div>

Yes, they have both loaded. They are 304 rather than 200.

I don't see anything obviously wrong in the developer tools.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 June 2026 15:04 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/4 "2026-06-01T15:04:20Z")

</div>

Wait, what browser are you using?

I bet you are using Safari? I forgot to re-test on Safari because my wife has stolen my only Mac. I've just tried on iOS Safari and I'm getting the same result. Annoyingly, there is no longer a Safari for Windows so it isn't possible for me to test fully.

Do you have ~~Brave or Vivaldi or another Chromium based browser~~ to test on? Or Firefox? (Brave is the same, at least on iOS, so I expect the others will be as well).

Now I need to try and work out why this looks so wrong on Safari - the 21st C IE! ☹

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 June 2026 15:19 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/5 "2026-06-01T15:19:17Z")

</div>

> [@TotallyInformation](#):
>
> I bet you are using Safari?

Nope, sorry, Edge and Brave.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 June 2026 15:31 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/6 "2026-06-01T15:31:35Z")

</div>

On Apple hardware though?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 June 2026 15:40 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/7 "2026-06-01T15:40:44Z")

</div>

No, Lenovo Thinkpad running Ubuntu 24.04.

I will try it on another PC to eliminate browser config.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 June 2026 15:43 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/8 "2026-06-01T15:43:23Z")

</div>

It is the same viewed on Android, so it must be my NR setup.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 June 2026 15:48 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/9 "2026-06-01T15:48:26Z")

</div>

> [@Colin](#):
>
> so it must be my NR setup.

Wait, just thought of something else - I think I've done something without thinking. My browsers tend to be set to dark mode. I think you are in light mode. If you switch to dark, I think it will correct itself.

If so, that's an easy fix thankfully.

* * *

Yes, just tested:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/b/ab678bc32cf78870848da33e7fb6cbee9378ccfe.png)

It's a light mode issue. Easily fixed. Watch out for v7.7.1 😃

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 June 2026 16:09 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/10 "2026-06-01T16:09:38Z")

</div>

Yes, it is ok in dark mode.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 June 2026 16:13 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/11 "2026-06-01T16:13:58Z")

</div>

I've just published v7.7.1 so all should be well now if you update.

If you already have a config folder, please either delete `page-template.html` and restart node-red so it gets re-created from the updated template, or simply adjust the HTML tag line of it to be:

```html
<html lang="en" class="dark"><head>

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 June 2026 16:27 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/12 "2026-06-01T16:27:38Z")

</div>

Great, all good now, thanks.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 June 2026 16:33 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/13 "2026-06-01T16:33:23Z")

</div>

In the demo site all I see is the home page, but if I look in the folder `.node-red/node_modules/node-red-contrib-uibuilder/templates/markweb-demo/` there seems to be a lot more. Should those pages appear in the Navigation panel?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 June 2026 18:20 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/14 "2026-06-01T18:20:43Z")

</div>

> [@Colin](#):
>
> Should those pages appear in the Navigation panel?

Yes, there are many pages in the demo as it includes lots of Markdown formatting and content examples.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/7/b7f027417a06b7f84c8fa64bede83a2b8181c8bc.png)

Try adding the following path to the URL to see if the pages are there (so it would be the nav menu not working) or not there at all (something more fundamental awry).

Also check the node-red logs. You should see something like these entries:

```auto
[info] 🌐🕸️[markweb:buildIndex:/mwdemo] Indexed "/home/home/nrmain/data/node_modules/node-red-contrib-uibuilder/templates/markweb-demo" in 370ms. 20 files, 117kb

```

And a bit later:

```auto
[info] 🌐🕸️[markweb:setupFileWatcher:/mwdemo] File watcher started for: "/home/home/nrmain/data/node_modules/node-red-contrib-uibuilder/templates/markweb-demo"

```

Obviously, your url name and FS paths may be different.

The first one is the important one, it should say that 20 files have been indexed.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [1 June 2026 20:15 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/15 "2026-06-01T20:15:18Z")

</div>

This is what I see in the log

```auto
1 Jun 17:21:10 - [info] 🌐🕸️[markweb] New URL "/markweb", source fldr "/home/colinl/.node-red/node_modules/node-red-contrib-uibuilder/templates/markweb-demo", config fldr "/home/colinl/.node-red/node_modules/node-red-contrib-uibuilder/templates/.markweb-defaults"
1 Jun 17:21:10 - [info] 🌐🕸️[markweb:buildIndex:/markweb] Indexed "/home/colinl/.node-red/node_modules/node-red-contrib-uibuilder/templates/markweb-demo" in 10ms. 0 files, 0kb
1 Jun 17:21:10 - [info] Started flows
...
1 Jun 17:21:10 - [info] +-----------------------------------------------------
1 Jun 17:21:10 - [info] | 🌐 uibuilder v7.7.1 initialised
1 Jun 17:21:10 - [info] | root folder: /home/colinl/.node-red/uibuilder
1 Jun 17:21:10 - [info] | Telemetry: On, uuid: 6d9be8ed-c90c-4974-acd6-5bdc15888c66
1 Jun 17:21:10 - [info] | Using Node-RED's webserver at:
1 Jun 17:21:10 - [info] | http://0.0.0.0:1880/
1 Jun 17:21:10 - [info] | Instances: 0 uibuilder, 1 markweb
1 Jun 17:21:10 - [info] | Installed packages:
1 Jun 17:21:10 - [info] | No packages installed
1 Jun 17:21:10 - [info] +-----------------------------------------------------
1 Jun 17:21:10 - [info] 🌐🕸️[markweb:setupFileWatcher:/markweb] File watcher started for: "/home/colinl/.node-red/node_modules/node-red-contrib-uibuilder/templates/markweb-demo"

```

If I edit index.md then I see

```auto
1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "add" for ".goutputstream-4NPYP3"
1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "change" for ".goutputstream-4NPYP3"
1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "change" for "index.md"
1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "unlink" for ".goutputstream-4NPYP3"
1 Jun 21:06:00 - [info] 🌐🕸️[markweb:watcher:/markweb] File/folder changes detected, rebuilding search index
1 Jun 21:06:00 - [info] 🌐🕸️[markweb:buildIndex:/markweb] Indexed "/home/colinl/.node-red/node_modules/node-red-contrib-uibuilder/templates/markweb-demo" in 6ms. 0 files, 0kb

```

> [@TotallyInformation](#):
>
> Try adding the following path to the URL

You didn't actually provide the url, but I tried markweb/design and it shows that page correctly.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 June 2026 21:12 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/16 "2026-06-01T21:12:04Z")

</div>

> [@Colin](#):
>
> `10ms. 0 files, 0kb`

Oh dear, that's not right.

> [@Colin](#):
>
> ```auto
> 1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "add" for ".goutputstream-4NPYP3"
> 1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "change" for ".goutputstream-4NPYP3"
> 1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "change" for "index.md"
> 1 Jun 21:05:59 - [info] 🌐🕸️[markweb:watcher:/markweb] File event detected: "unlink" for ".goutputstream-4NPYP3"
> 
> ```

Wait, what is that? Are you using some kind of odd filing system? What is `.goutputstream-4NPYP3`? Something to do with Ubuntu/Gnome?

Even so, this should work. The watcher uses Chokidar which is, of course, very widely used.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [2 June 2026 06:07 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/17 "2026-06-02T06:07:40Z")

</div>

> [@TotallyInformation](#):
>
> What is `.goutputstream-4NPYP3`?

I have no idea, it is a conventional Ubuntu gnome install. Not on a mapped drive or anything like that.

Where is the indexing code? I will try and debug it.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [2 June 2026 07:51 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/18 "2026-06-02T07:51:03Z")

</div>

It is the ignore options being passed to fgsync. If I change customNode.js line 1107 from

```auto
        const regularFiles = fgSync(`${indexFolder}/**/*.md`, { ignore: ['**/_*/ **', '** /_*', ' **/.*/**', '**/.*'], })

```

to

```auto
        const regularFiles = fgSync(`${indexFolder}/**/*.md`, { ignore: [], })

```

then it finds the files.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [2 June 2026 10:28 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/19 "2026-06-02T10:28:07Z")

</div>

That's weird though. Since it works on all of my installs, including both Windows and Linux. The point of the ignore's is to filter out anything starting with `_` or `.`.

Would you mind changing that again to be:

```javascript
const regularFiles = fgSync(`${indexFolder}/**/*.md`, { ignore: [`${indexFolder}/**/_*/ **`, `${indexFolder}/** /_*`, `${indexFolder}/ **/.*/** `, `${indexFolder}/**/.*`], })

```

To see if that is also a fix?

If not, I will have to do the filtering in the actual indexing process.

Oh, and thanks for doing the detailed debugging. 😃

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 June 2026 13:40 UTC](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168/20 "2026-06-05T13:40:21Z")

</div>

Hi again Colin.

Just to let you know that I've got another bug-fix version waiting to go.

It has a number of fixes and I've added the potential fix for your issue as well. I can release this as it doesn't seem to have a negative impact on my test systems. However, I've not been able to reproduce your problem so not sure if it is totally correct.

If you don't have time to test, I can release the new version which you can try.

[Next page](https://discourse.nodered.org/t/uibuilder-markweb-too-dark/101168.md?page=2)