My fork is here:
In the WebUI, there is a built-in simulator. It will just run and you won’t be connected to a board, but you can do lot’s of things. Just opening that index.scss file and making a change, and within a second or so, the web page will auto update.
-
Install current nodejs LTS (currently using v20.8.0)
-
Clone that repository. Switch to the “3.0-FluidNCDev” branch.
-
Open the folder in VSCode.
-
Open a terminal, and run
npm install -
You should see a “NPM Scripts” area. Click play on “dev-cnc-FluidNC”
This should start the server, and automatically open up a web browser -
In VSCode, open \src\targets\CNC\FluidNC\style\index.scss
Any changes applied there, should auto-apply to the running browser.
so, the easiest way to create a theme (I’ve found)…
Is to find _variables.scss, edit the colors there first for primary/secondary/etc.
Then run the compile and get the index.html.gz, unzip, and extract the full built CSS from there.
I then copy that css into the index.scss of the FluidNC target for testing with the simulator. That makes it so live reloads work, etc while tuning colors.
When done and happy, I then copy all that CSS out from there into the “theme-” file to be used in the interface
Doing it that way made it much easier for me to get all of the purple color out of the controls, etc