Canvas — Insert the filepath in the body so you can stylize each one differently

README.md

First, you need to have UserPlugin installed & configured. Aka, with a folder where you will put the JS file.

Mine has this :

The plugin file are standard JS file, so you must use an editor to write/open it.

canvas-interaction.js

module.exports = {}
module.exports.onload = async (plugin) => {
      plugin.registerEvent(
        plugin.app.workspace.on('file-open', (file) => { //run on file-open
            if (file.extension === "canvas") { //if canvas
                document.querySelector('body').classList.add(`canvas-file`) //add this class because I think it can be usefull to style all canva only
                document.querySelector('body').setAttribute('data-canvas-file', file.path.replace('.canvas', '')) //Add the filepath with removing the extension
            } else {
                document.querySelector('body').classList.remove(`canvas-file`) //remove it for other file 
                document.querySelector('body').removeAttribute('data-canvas-file') //same
            }
          //the plugin will add and remove the class each time you open a file, so when you switch between a markdown & canvas file, it will be added / removed accordingly.
    }));
}

FollowMe.md

Put the previous file in your configured folder and active it. Felicitation! Each canvas will get the following class & attribute : .canvas-file[data-canvas-file*="filepath"].

You can now stylize it using these state. For example, to change the canvas-color for a file named ProjectOne :

body.canvas-file[data-canvas-file*="ProjectOne"] {
    --canvas-color-1: 138,97,189 ; /* Mapple Street*/
    --canvas-color-2: 110,151,23; /*Oak Street*/
    --canvas-color-3: var(--color-yellow-rgb); 
    --canvas-color-4: 154,80,40;  /* Pine Street*/
    --canvas-color-5: 199,82,61; /*Timber*/
    --canvas-color-6: 89,151,217; /* Birch Street*/
}

File ProjectOne :

File different :