Discover the best lightmode websites created by professional designers. Get inspired and start planning your perfect lightmode web design today!

Timothy Ricks

Change Page Color on Scroll

Kazuhiro Oz Hashimoto

Persistent dark mode for your site, Webflow ready.
You will need to upgrade your site plan to use custom codes in Webflow.
I'd be happy if you LIKE the article or template.👍
Or follow my twitter (@0xOzh)

https://medium.com/@okazu/how-i-added-persistent-dark-mode-in-webflow-23c34815b5a2

Persistent darkmode

Cédric Moore

Hey Webflowers!

In today's cloneable I show you how you can adapt your website to the color appearance of the native device OS settings. If the settings are on light mode, the website will appear in default white as designed in Webflow, and if dark mode is triggered, the site will turn black. ⚡️

✅ 100% CSS 
✅  Custom Code
🆓 Cloneable

To see this effect in action just change your OS color appearance.

Feel free to clone this and use it for your next project! ✨
Follow me for more Webflow freebies in the future 💙

Native Light/Dark Mode Appearance

Watch tutorial at https://www.patreon.com/posts/66950007

Assets from codesandbox.io

Persistent Dark Mode Switch

Kevin Haag

A fully native animated dark-mode toggle button. 

✅ Native Interactions
🚫 Custom Code

--

Follow me on Twitter: https://twitter.com/kevinhaag
Subscribe on Youtube: https://youtube.com/kevinhaagsucks

MM—014: Dark-Mode Toggle Button

Brightscout

Filebox SaaS Landing Page UI Kit is a highly polished SaaS landing page UI kit. It's easily customizable from the Styleguide so you can quickly update the colors and typography as needed. We've also created 25+ customizable components and icons to make sure your project feels custom and polished.

You can check out design files at 
https://creativemarket.com/brightscout/5931562-Filebox-SaaS-Landing-Page-Kit
or 
https://ui8.net/brightscout/products/filebox-saas-landing-page-kit

Enjoy!

filebox-template

Kevin Rizzotto

This is the Light mode of the Elearn Dashboard that I made earlier! 

Enjoy! Clone it up! 

Feedback Welcome!

Elearn Dashboard UI (Lightmode)

Watch the tutorial for the project at https://www.youtube.com/watch?v=RvYpljqbdK8

Budget App Interactions Example

Bryn Taylor

Lightfolio is a light-themed, minimal portfolio template. Ideal for product designers, UI designers, UX designers and other creatives. Lightfolio puts the focus on what matters most — your work.

→ https://webflow.com/templates/html/lightfolio-portfolio-website-template

Lightfolio Portfolio Template

Adrian Raath

A light/dark mode toggle made with Webflow interactions and a Lottie animation. Great as a base for a project that needs light/dark mode functionality!

Light/Dark Mode Toggle In Navigation

WeBlocks

Light/Dark Mode Switcher

Youtube Tutorial
https://www.youtube.com/watch?v=33eI479Ax9s

WeBlocs
https://www.weblocs.io/

WeBlocs Cloneable
https://www.dropbox.com/s/mduds1661xyqt8l/download%20%2862%29?dl=1

Woldie Template:
https://webflow.com/templates/html/woldie-agency-website-template

Mode Switcher

Jeronimo Piquero Saiz

LINE architectural bureau is a luxury, elegant and trendy Figma template designed in two colour styles: dark & light.

The dark & light mode switch will store the user mode choice. Therefore, the method persists when reaccessing the page or switching to another page. 

I hope you enjoy

architectural-bureau

Greg Faulkner

The Webflow Show mockup generator allows you to easily insert your URL and view it on a simple but beautiful iframe mockup and you can even position them precisely where you want them.

If there's enough appetite I'll make it cloneable!

Mockup Generator

Jim Ebbelaar

Experience the invigorating energy of light mode, or embrace the calming allure of dark mode. Create a seamless and dynamic interface, where colors, background colors, border colors, and font weights can be effortlessly transformed by simply toggling between two modes. Apply custom attributes and CSS variables to dynamically change elements on the page. 

Illuminate Toggle - Dark/Light mode

EL Passion

Are you organizing an event and need to establish its web presence?
No you can easily create your IT conference website and match your brand and vision with our Webflow template! 

Our conference Webflow template is designed to make it easy for you to showcase your IT conference or event with a customizable and user-friendly design that can be tailored to meet your unique needs. 

With a range of customizable features, you can easily create an engaging and informative website that reflects the theme and brand of your event. Whether you're promoting a one-day conference or a multi-day event, our template offers the perfect platform to connect with your audience and keep them informed about all the exciting things happening at your event. 

The template provides:
→ Dark and Light mode
→ CMS-driven conference agenda
→ CMS-driven speaker list
→ Easily customizable base styleguide

Need a website like this? Contact us at projects@elpassion.com for the template or a fully custom website!

Conference Event Website with CMS-based agenda | Dark&Light

Devin Fountain

Yushvaev Family Office is a venture capital fund dedicated to investing into innovative companies for a sustainable and equitable future.

Designed and built by me, Devin Fountain.

Yushvaev Family Office

Rebecca Lowe

FolioSpec is an elegant and minimal CMS portfolio template for any creative looking to showcase their work. Wow your audience with light & dark modes, an interactive mouse, sleek animations & interactions.

**This template can be purchased for $49 USD through the Webflow Marketplace: https://webflow.com/templates/html/foliospec-portfolio-website-template

foliospec-showcase

Roberto Ghizzoni

Website for a Digital Agency based in Baku

Discover lightmode websites built by the Webflow community

Discover lightmode websites built by the Webflow community