NavBar Theme Switch

I inserted the Theme Switch button in a navbar menu
Is it possible to change the text (Light … Dark) with a favorite language?

A bit controversial, but it may be an idea to ditch the Wappler widget and replace it with the following extension.

Once installed, go to the file called theme-changer.js and in lines 50, 61 and 72, change the values to the preferred language.

1 Like

hi Ben
I installed the extension and add with terminal
But at this point I don’t really understand how to do it, because I can’t find Theme Changer

npm i @benpley/wappler-theme-changer added 1 package, and audited 2 packages in 4s found 0 vulnerabilities npm notice
npm notice New major version of npm available! 8.5.1 -> 10.5.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.0
npm notice Run npm install -g npm@10.5.0 to update!
npm notice

This error?
`OCI runtime exec failed: exec failed: unable to start container process: exec: “npm”: executable file not found in $PATH: unknown``

Have a look at

1 Like

Thank You Ben
But I have an unexpected problem, which is carrying out System Check
Tries to install Php Composer again, but stops with an error that I can’t resolve

The Php Composer problem seems to be solved with these suggestions. It would therefore seem that it was a problem with big sur

Here’s an updated version of the Theme Switcher component, which now support custom Dark, Light and Auto texts:

dmxBootstrap5Theme.zip (4.6 KB)

To add custom texts add

text-dark="Text here" text-light="Text here" text-auto="Text here"

to the component with your custom texts there like this:

<div class="nav-item" is="dmx-bs5-theme-switch" id="bs5themeswitch1" icons="fa" text-dark="Dark text" text-light="Light text" text-auto="Auto text"></div>

This will be available in the UI as well in the next update.

2 Likes

Hi Ben
System Check is now in place, the @Benpley/Wappler-Theme-Chander extension has been installed, (with Wappler 6 Beta)
But the Theme Changer icon does not appear in components
I therefore tried to uninstall the extension, but I highlight it error

you don’t need a third party extension for this, please use the files i just provided in my last post :slight_smile:

1 Like

Wow thank you Teodor

Hi Teodor
I replaced the folder with your 2 files in the project
I replaced the code line
In Wappler Preview works and the texts are correct
But if you publish on the local the Swich works but with the default texts in English

In addition, would it be possible to addition a text of your choice always visible next to the switch (Example Display Mode)?

Thank you

Well make sure all the files are uploaded and then clear the browser cache.

In fact it was the cache. I should have thought about it
It is possible to add a small text before the Switch icon
This is because unfortunately not everyone knows that icon that icon

These options were added in Wappler 6.4.0 UI

1 Like