Custom Themed Native Code Block

The native code block in Webflow only offers a light and dark theme, but we can customize the colors set by either of those default themes using a little custom CSS (see page settings). The custom CSS is simply targeting the style="color: #xxxxx" attribute set on each syntax type in the code, and resetting the color to a different color using color variables.

Default code block

1// Target the preloader element
2const preloaderElement = document.getElementById('preloader');
3
4// Set the amount of time to wait in milliseconds
5// Test by changing to 1 * 60 * 1000 for 1 min
6const waitTime = 24 * 60 * 60 * 1000; // 24 hours
7
8// Check if the local storage item is present and valid
9if (!localStorage.getItem('preloaderShown') || Date.now() - localStorage.getItem('preloaderShown') >
10  waitTime) {
11  // Show the preloader element
12  preloaderElement.style.display = 'block';
13
14  // Store the current timestamp in local storage
15  localStorage.setItem('preloaderShown', Date.now());
16} else {
17  // Hide the preloader element
18  preloaderElement.style.display = 'none';
19}

Recolored code block (Custom CSS)

1// Target the preloader element
2const preloaderElement = document.getElementById('preloader');
3
4// Set the amount of time to wait in milliseconds
5// Test by changing to 1 * 60 * 1000 for 1 min
6const waitTime = 24 * 60 * 60 * 1000; // 24 hours
7
8// Check if the local storage item is present and valid
9if (!localStorage.getItem('preloaderShown') || Date.now() - localStorage.getItem('preloaderShown') >
10  waitTime) {
11  // Show the preloader element
12  preloaderElement.style.display = 'block';
13
14  // Store the current timestamp in local storage
15  localStorage.setItem('preloaderShown', Date.now());
16} else {
17  // Hide the preloader element
18  preloaderElement.style.display = 'none';
19}