Subscribe now to stay up-to-date

Product updates & features

Flatfile feature update: Dark mode with Flatfile themes

If one thing holds true across almost all software, it's that you can spend six months or more on an awesome, helpful feature for a product, and someone will inevitably say, "That's great and all, but when will dark mode be available?" With our new custom themes for Flatfile's data onboarding platform, dark mode as well as better custom theming to match your application is only a few lines of code away.

For the sake of showing you how simple it is to get a solid theme together using this feature, we'll use the global and buttons styling for this. You can, however, get a lot more specific than this by styling many different stages and pieces of the importer independently of one another. For all the additional styling options, check out our documentation here. We will also be skipping a lot of the Flatfile setup for this, but if you need to start from the beginning, here's our getting started documentation.

For getting a dark mode, you'll either need to pass in what the user's style preference is or detect it. Since we’re working in a simple demo environment, we'll use some JavaScript to detect their preference set in the prefers-color-scheme CSS media query.

What you'll see in the code is that the framework is in place for us to give styling to a lightMode and also a darkMode option for styling. In this case, we won't use the lightMode one and you'll be able to see that an empty object or something that doesn't have ALL the keys will simply default to our original styling.

This is set up as a function that we will return the object that the theme setting is expecting to get. So when we put this into our code snippet, it will look like the below code.

This is now set up to detect the user's preference for light or dark mode and then will return an object that represents the theme. First, let's pause to clarify that while the setTheme gets used here, we can pass the object directly to the theme in settings. We’re using a function since we’re trying to do this dynamically, but if you’re only looking to implement your branding, you can use the theme object.

As previously mentioned, we’re going to use the global and buttons settings. We don't want to repeat code in the buttons so I’m going to set up some button styles to then apply across several of the buttons using the spread operator.

Now that the button styles are set up in their own variables, we'll go ahead and add the global and buttons keys to our darkTheme variable that we set up before.

With the above styling and variables in place, we should now see a dark theme applied to most of the elements within the Flatfile importer. Again, you can control more things like the manual input table and individual pieces separate from what we've done here, but this is a quick and simple way to apply some styling to the importer using our Flatfile's data onboarding platform themes. For more information on this, you can check out our documentation here. You can also test out what we did above in this Codesandbox environment.

Video walkthrough

Want to learn more about the Flatfile Data Exchange Platform?

See how it works