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

Color Change on Scroll

Change Page Color on Scroll

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 dark mode

Persistent darkmode

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

Native Light/Dark Mode Appearance

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

Assets from codesandbox.io

Persistent Dark Mode Switch

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

Dark Mode Toggle Button

MM—014: Dark-Mode Toggle Button

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

Enjoy! Clone it up! 

Feedback Welcome!

Elearn Dashboard UI ( Light Mode )

Elearn Dashboard UI (Lightmode)

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 UI Kit Template

filebox-template

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

BudgetApp Pro

Budget App Interactions Example

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 | WeBlocks Academy

Mode Switcher

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 Template

Lightfolio Portfolio Template

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

architectural-bureau

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

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 Navigation

Light/Dark Mode Toggle In Navigation

Louis is an UI Kit used by designers and agencies looking for a bold presence. Perfect for creators in digital and analog environments with light & dark modes and portfolio CMS template. Made by Fouroom.
⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃
https://webflow.com/templates/html/louis-portfolio-website-template
⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃⁃
➊ Website @ www.fouroom.co
➋ Templates @ https://webflow.com/templates/designers/fouroom
➌ Twitter @ www.twitter.com/foouroomdotco
➍ Instagram @ www.instagram.com/fouroom.co
➎ Dribbble @ www.dribbble.com/fouroom

Louis Showcase

Louis Portfolio Template

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 Website Templates

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

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

Persistent dark mode via cookie.

Remembers toggle also across pages. If never been triggered looks for the default computer colour scheme (dark / light). If not there, defaults to light mode.

Currently adds a class (.light/.dark) to the body.
You can also listen to change events directly in Webflow code editor via the 2 functions you find in the homepage body.


persistent-dark-mode

Persistent Dark Mode

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

Discover lightmode websites built by the Webflow community

Discover lightmode websites built by the Webflow community