Dark Theme for Your Knack Apps

API & Customization Show & Tell
1

Here is a simple way to add a Dark Theme/Dark Mode to your Knack apps.

Here is what you’ll be creating:

dark-mode-demo

Step 1:
Create a Page and call it Dark Mode:

Screen Shot 2021-12-13 at 2.41.37 PM
Screen Shot 2021-12-13 at 2.41.37 PM1342×1260 62.7 KB

Step 2:

Add this code to your CSS:

/* Dark Mode */

html[theme='dark-mode'] {
  filter: invert(1) hue-rotate(180deg);
}

html[theme='dark-mode'] img {
  filter: invert(1) hue-rotate(180deg);
}

html {
  transition: color 300ms, background-color 300ms;
}

Step 3:
Add this code to your JavaScript:

/* Dark Mode */
$(document).on('knack-scene-render.any', function(event, scene) {
  const darkModeButton = $('a[data-kn-slug="#dark-mode"]') // Replace "dark-mode" with whatever your Page URL is from Step 1
  darkModeButton.removeAttr('href')

  darkModeButton.on('click', () => {
    let theme = $('html').attr('theme')
    if (theme == 'dark-mode') {
      $('html').attr('theme', '')
    } else {
      $('html').attr('theme', 'dark-mode')
    }
  })
})

Congratulations! Your app now has a Dark Mode. :crescent_moon:

To improve this further you’ll probably want to make Dark Mode-specific CSS adjustments but the steps described here will give you a great start.

If you want help adding dark mode to your app—or other Design & UX features—feel free to reach out.

Ian
Knack Pros

7 Likes
2

Love it, thanks for sharing! The view button (like the edit, or delete buttons) turn from white font to black font. How could I modify the CSS to keep the buttons spared from the font text change when switch back and forth on dark and light mode?

3

Happy it helped you @Christian. I’m planning to do a new Dark Mode post because the method described here is for simple cases only—it does not allow the ability to spare the font color when switching back and forth, at least not to my knowledge. :+1:

1 Like
4

This is awesome - I love dark mode. Any suggestions on how to update the code to work in knack-embeds?

5

Hi Adam,

:+1: Tested it on an embedded app just now.
Is your parent website overriding the CSS?
Or is your goal to apply dark mode to the embedded app only and exclude the parent website?

6

I’ve been researching my divi theme / wordpress and it looks like I need to add a new stylesheet and reference before it will allow the dark mode to work on my embedded app?

This is so cool I want to figure it out.