You are viewing limited content. For full access, please sign in.

Question

Question

Dark Theme

asked on May 10, 2023

Does anyone have .css written for a dark theme for a form? Just wondering if there's already something written that could save some time. 

1 0

Replies

replied on May 10, 2023 Show version history

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.

2 0
You are not allowed to follow up in this post.

Sign in to reply to this post.