It's not 100% complete, but I have this that I was testing with in the Classic Designer (Version 11.0.2212.30987).
Add two Custom HTML Elements to the top of your form.
In the first one add this:
<button id="switchDarkMode" type="button">Switch to Dark Mode</button>
In the second one add this:
<button id="switchLightMode" type="button">Switch to Light Mode</button>
Add this Javascript to the form:
$(document).ready(function() {
//Retrieve saved mode setting from local storage and change as
//needed, or default to light mode.
var savedMode = localStorage.getItem('lfforms-darkmode');
if(savedMode == 'true') {
SetToDarkMode();
}
else {
SetToLightMode();
}
//Button and Function to switch to dark mode.
$('#switchDarkMode').click(SetToDarkMode);
function SetToDarkMode() {
$('#switchLightMode').closest('li').show();
$('#switchDarkMode').closest('li').hide();
$('.cf-formwrap').addClass('darkMode');
localStorage.setItem('lfforms-darkmode','true');
}
//Button and Function to switch to light mode.
$('#switchLightMode').click(SetToLightMode);
function SetToLightMode() {
$('#switchLightMode').closest('li').hide();
$('#switchDarkMode').closest('li').show();
$('.cf-formwrap').removeClass('darkMode');
localStorage.setItem('lfforms-darkmode','false');
}
});
Add this CSS to the form:
.darkMode,
.darkMode #cf-formtitle
{
color: #EEEEEE!important;
background-color: #111111!important;
border-color: #DDDDDD!important;
}
.darkMode .cf-label,
.darkMode .form-option-label,
.darkMode .cf-col-label,
.darkMode .cf-field
{
color: #EEEEEE!important;
border-color: #DDDDDD!important;
}
.darkMode .form-focused
{
background-color: #4A004A;
}
.darkMode button,
.darkMode input[type='submit']
{
border-radius: 5px;
}
.darkMode .cf-table-add-row,
.darkMode .cf-collection-append
{
color: #AAAAFF!important;
}
.darkMode button,
.darkMode input,
.darkMode select,
.darkMode textarea
{
background-color: #666666!important;
border-color: #DDDDDD!important;
color: #DDDDDD!important;
}
.darkMode input[readonly], .darkMode input[backend-readonly],
.darkMode select[readonly], .darkMode select[backend-readonly],
.darkMode textarea[readonly], .darkMode textarea[backend-readonly]
{
background-color: #333333!important;
border-color: #888888!important;
color: #888888!important;
}
Now you have buttons on the top of your form that switch between the regular theme set on the Themes page, and a rudimentary dark theme.