V18 project database, create dark and light theme with stylesheets


With the introduction of css stylesheets, I was thinking about creating a dark theme for my application
Of course the default would still be the light theme
So, my simple thinking was to create 2 different stylesheets for example dark.css and light.css
However, I have the feeling that switching stylesheets (on startup for example) is not possible?

Has anybody done something like this?

No i did not done work like this.

But i make a short test to live re-write
any main-css.
During a Form is loaded without doing something
the last changes (after load form) in main-css is not shown/used.
When i reload (new load) form than it shows always the styles of latest version of my css.
4D or 4Dprocess must not restarted to get newest css file, only maybe form reload/newLoad is needed. A hacky solution can be (can be better done) replace content in main-css with any content from for example main-dark-theme-css (or any other themeCSS or back to default with stored defaultThemeCSS).
Maybe there exist a better way to change mainTheme for all forms in DB in one step?

Yes, this is exactly my question too :grinning:
It makes sense if 4D enables / creates a command so at startup we can set the css file to be used

To can switch between cssThemes onTheFly (not only onStartup) is maybe a good feature request.

What did 4D plan in future i did not know, maybe 4D expands css features in next versions…

At the moment with v18R3 i can only find in docu any info about a json-form-property “css”
But i can not find how to GET or SET this json-form-property “css”…this only one is maybe for future?

4D-Code to rewrite main-css with content of any themeCSS in interpreter-mode for 4DProject.


$fileTheme:=Folder separator+"Project"+Folder separator+"Sources"
$fileTheme:=$fileTheme+Folder separator+"styleSheetsLightTheme.css"

$fileMain:=Folder separator+"Project"+Folder separator+"Sources"
$fileMain:=$fileMain+Folder separator+"styleSheets.css"

$vhDocRef:=Open document($fileTheme)  // Select the document of your choice
If (OK=1)  // If a document has been chosen
	CLOSE DOCUMENT($vhDocRef)  // We don't need to keep it open
	DOCUMENT TO BLOB(Document;$blobCSS)  // Load the document
	Case of 
		: (OK=0)
			BEEP  // Handle error
		: (BLOB size($blobCSS)=0)
			$vhDocRef:=Open document($fileMain)  // Select the document of your choice
			If (OK=1)  // If a document has been chosen
				CLOSE DOCUMENT($vhDocRef)  // We don't need to keep it open
				BLOB TO DOCUMENT(Document;$blobCSS)  // Load the document
				If (OK=0)
					BEEP  // Handle error
				End if 
			End if
	End case  
End if