Experiment with dark themes based on popular apps.

Last update: Dec 10, 2021

Image of Fast Dark Theme

Fast Dark Theme

This project is a Flutter web experiment. It allows you to prototype dark mode colors based on popular apps: WhatsApp, Twitter and Shazam. You can select the Hue value you want, and the project will select everything else.

Fast Dark Theme

I used a standard color picker to capture primary, surface and background color for these apps and converted them to HSLuv in my Color Studio app. This project doesn't have a 100% fidelity with them, but is close enough - Shazam's background, for instance, has a luminescence of 4. That was rounded to 5.

The idea is to help anyone build a coherent theme by modifying successful ones. The logic behind those themes is the most interesting part.

  • Hue: always changes from Primary to Background/Surface, from 7 (Twitter) to 38 (Shazam).
  • Saturation: can change from Primary to Background and can change from Background to Surface. Twitter and WhatsApp keeps Background and Surface the same. Shazam keeps Primary and Background the same, but changes Surface.
  • Luminescence: Surface and Background always get a difference of 5.

Reporting Issues

Issues and Pull Requests are welcome. You can report here.

License

Copyright 2020 Bernardo Ferrari

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GitHub

https://github.com/bernaferrari/fastdarktheme
You might also like...

Here’s a Tinder Gold redesign concept for the popular dating app made with Flutter.

Here’s a Tinder Gold redesign concept for the popular dating app made with Flutter.

Tinder Gold redesign concept for the popular dating app made with Flutter, Hosted on Codemagic. Don't forget to star ⭐ the repo it motivates me to sha

Apr 3, 2022

Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

GetWidget is a 100% free Flutter open-source UI Kit library built with Flutter SDK to make Flutter development easier and more joyful than ever. GetWi

May 21, 2022

Flutter widget library containing buttons for authenticating with popular social networks: Apple, Google, Facebook, Twitter and Microsoft.

Flutter widget library containing buttons for authenticating with popular social networks: Apple, Google, Facebook, Twitter and Microsoft.

Flutter Auth Buttons This library is now in maintenance mode I'm no longer actively using Flutter and don't have the time to keep this library maintai

Mar 23, 2022

Open source cross-platform client for popular imageboards: 4chan.org and 2ch.hk

Open source cross-platform client for popular imageboards: 4chan.org and 2ch.hk

iChan (iOS) and Zchan (Android) Open source cross-platform client for popular im

May 15, 2022

GetX - one of the most popular state management solution in flutter

GetX - one of the most popular state management solution in flutter

GteX Tutorial - Udemy GetX is one of the most popular state management solution in flutter. In addition to state management, GetX provides easy way to

May 17, 2022

🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.

🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.

CarPlay with Flutter 🚗 Flutter Apps now on Apple CarPlay! flutter_carplay aims to make it safe to use iPhone apps made with Flutter in the car by int

May 18, 2022

Projeto do curso Criação de Apps Android e iOS com Flutter 2021-Crie 14 Apps. Professor: Daniel Ciolfi

agenda_contatos Projeto do curso de Flutter Getting Started This project is a starting point for a Flutter application. A few resources to get you sta

Nov 27, 2021

Projeto do curso Criação de Apps Android e iOS com Flutter 2021-Crie 14 Apps. Professor: Daniel Ciolfi

busca_gifs A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

Nov 25, 2021

[Example APPS] Basic Flutter apps, for flutter devs.

[Example APPS] Basic Flutter apps, for flutter devs.

Show some ❤️ and star the repo to support the project This repository containing links of all the example apps demonstrating features/functionality/in

May 20, 2022
Comments
  • 1. [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 6% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /android/app/src/main/res/Archive/mipmap-xxxhdpi/ic_launcher_foreground.png | 6.84kb | 3.13kb | 54.17% | | /android/app/src/main/res/Archive/mipmap-xxhdpi/ic_launcher_foreground.png | 5.06kb | 2.43kb | 52.00% | | /android/app/src/main/res/Archive/mipmap-xhdpi/ic_launcher_foreground.png | 3.37kb | 1.63kb | 51.78% | | /android/app/src/main/res/Archive/mipmap-hdpi/ic_launcher_foreground.png | 2.69kb | 1.35kb | 49.65% | | /android/app/src/main/res/Archive/mipmap-mdpi/ic_launcher_foreground.png | 1.72kb | 0.96kb | 44.05% | | /android/app/src/main/res/Archive/mipmap-xhdpi/ic_launcher_background.png | 12.75kb | 7.88kb | 38.16% | | /android/app/src/main/res/Archive/mipmap-hdpi/ic_launcher_background.png | 7.10kb | 4.45kb | 37.29% | | /android/app/src/main/res/Archive/mipmap-xxhdpi/ic_launcher_background.png | 31.83kb | 21.20kb | 33.42% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 8.84kb | 6.37kb | 27.96% | | /android/app/src/main/res/Archive/mipmap-xxxhdpi/ic_launcher.png | 11.25kb | 8.20kb | 27.08% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 10.10kb | 7.42kb | 26.61% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 6.75kb | 4.96kb | 26.50% | | /android/app/src/main/res/Archive/mipmap-xxhdpi/ic_launcher.png | 6.75kb | 4.96kb | 26.50% | | /android/app/src/main/res/Archive/mipmap-mdpi/ic_launcher_background.png | 3.02kb | 2.24kb | 25.81% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 7.38kb | 5.52kb | 25.27% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 4.74kb | 3.83kb | 19.25% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 4.74kb | 3.83kb | 19.25% | | /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png | 23.80kb | 19.64kb | 17.50% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 4.37kb | 3.62kb | 17.10% | | /android/app/src/main/res/Archive/mipmap-xxxhdpi/ic_launcher_background.png | 64.66kb | 53.67kb | 16.99% | | /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png | 2.50kb | 2.08kb | 16.63% | | /android/app/src/main/res/Archive/mipmap-xhdpi/ic_launcher.png | 3.39kb | 2.84kb | 16.28% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 3.64kb | 3.08kb | 15.26% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 2.98kb | 2.54kb | 14.83% | | /android/app/src/main/ic_launcher-playstore.png | 133.67kb | 116.46kb | 12.88% | | /android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png | 8.76kb | 7.83kb | 10.61% | | /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png | 1.79kb | 1.61kb | 10.14% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 601.90kb | 542.78kb | 9.82% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 2.57kb | 2.34kb | 8.74% | | /assets/icon_bg.png | 3,504.77kb | 3,332.93kb | 4.90% | | /assets/icon.png | 3,282.18kb | 3,125.25kb | 4.78% | | /android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png | 4.54kb | 4.35kb | 4.32% | | /android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png | 1.15kb | 1.12kb | 2.47% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 2.36kb | 2.31kb | 2.11% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 2.16kb | 2.15kb | 0.05% | | /android/app/src/main/res/Archive/mipmap-hdpi/ic_launcher.png | 2.16kb | 2.15kb | 0.05% | | | | | | | Total : | 7,788.29kb | 7,319.13kb | 6.02% |


    📝docs | :octocat: repo | 🙋issues | 🏅swag | 🏪marketplace

    Reviewed by imgbot[bot] at 2020-03-16 20:48
  • 2. [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 6% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /android/app/src/main/res/Archive/mipmap-xxxhdpi/ic_launcher_foreground.png | 6.84kb | 3.13kb | 54.17% | | /android/app/src/main/res/Archive/mipmap-xxhdpi/ic_launcher_foreground.png | 5.06kb | 2.43kb | 52.00% | | /android/app/src/main/res/Archive/mipmap-xhdpi/ic_launcher_foreground.png | 3.37kb | 1.63kb | 51.78% | | /android/app/src/main/res/Archive/mipmap-hdpi/ic_launcher_foreground.png | 2.69kb | 1.35kb | 49.65% | | /android/app/src/main/res/Archive/mipmap-mdpi/ic_launcher_foreground.png | 1.72kb | 0.96kb | 44.05% | | /android/app/src/main/res/Archive/mipmap-xhdpi/ic_launcher_background.png | 12.75kb | 7.88kb | 38.16% | | /android/app/src/main/res/Archive/mipmap-hdpi/ic_launcher_background.png | 7.10kb | 4.45kb | 37.29% | | /android/app/src/main/res/Archive/mipmap-xxhdpi/ic_launcher_background.png | 31.83kb | 21.20kb | 33.42% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 8.84kb | 6.37kb | 27.96% | | /android/app/src/main/res/Archive/mipmap-xxxhdpi/ic_launcher.png | 11.25kb | 8.20kb | 27.08% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 10.10kb | 7.42kb | 26.61% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 6.75kb | 4.96kb | 26.50% | | /android/app/src/main/res/Archive/mipmap-xxhdpi/ic_launcher.png | 6.75kb | 4.96kb | 26.50% | | /android/app/src/main/res/Archive/mipmap-mdpi/ic_launcher_background.png | 3.02kb | 2.24kb | 25.81% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 7.38kb | 5.52kb | 25.27% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 4.74kb | 3.83kb | 19.25% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 4.74kb | 3.83kb | 19.25% | | /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_background.png | 23.80kb | 19.64kb | 17.50% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 4.37kb | 3.62kb | 17.10% | | /android/app/src/main/res/Archive/mipmap-xxxhdpi/ic_launcher_background.png | 64.66kb | 53.67kb | 16.99% | | /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png | 2.50kb | 2.08kb | 16.63% | | /android/app/src/main/res/Archive/mipmap-xhdpi/ic_launcher.png | 3.39kb | 2.84kb | 16.28% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 3.64kb | 3.08kb | 15.26% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 2.98kb | 2.54kb | 14.83% | | /android/app/src/main/ic_launcher-playstore.png | 133.67kb | 116.46kb | 12.88% | | /android/app/src/main/res/mipmap-xhdpi/ic_launcher_background.png | 8.76kb | 7.83kb | 10.61% | | /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png | 1.79kb | 1.61kb | 10.14% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 601.90kb | 542.78kb | 9.82% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 2.57kb | 2.34kb | 8.74% | | /assets/icon_bg.png | 3,504.77kb | 3,332.93kb | 4.90% | | /assets/icon.png | 3,282.18kb | 3,125.25kb | 4.78% | | /android/app/src/main/res/mipmap-hdpi/ic_launcher_background.png | 4.54kb | 4.35kb | 4.32% | | /android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png | 1.15kb | 1.12kb | 2.47% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 2.36kb | 2.31kb | 2.11% | | /ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected] | 2.16kb | 2.15kb | 0.05% | | /android/app/src/main/res/Archive/mipmap-hdpi/ic_launcher.png | 2.16kb | 2.15kb | 0.05% | | | | | | | Total : | 7,788.29kb | 7,319.13kb | 6.02% |


    📝docs | :octocat: repo | 🙋issues | 🏅swag | 🏪marketplace

    Reviewed by imgbot[bot] at 2020-03-16 20:44

Related

Flutter chat-app UI with multiple themes & light + Dark mode.
Flutter chat-app UI with multiple themes & light + Dark mode.

Chat-App UI Only a PART of code available, for complete code ping here Features of the app - Light Mode + Dark Mode 4 different color themes - pink/te

Apr 20, 2022
Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG
Implements GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME HIG

GTK ❤️ Flutter Unofficial implementation of GTK Widgets, themes and titlebar buttons in Flutter. Based on the GNOME Human Interface Guidelines. Featur

May 13, 2022
A Flutter package to make and use beautiful color scheme based themes.
A Flutter package to make and use beautiful color scheme based themes.

FlexColorScheme Use FlexColorScheme to make beautiful color scheme based Flutter themes, with optional primary color surface blends. The themes are ba

May 17, 2022
An experiment in building a better XMPP client. using Flutter
An experiment in building a better XMPP client. using Flutter

moxxy An experimental XMPP client that tries to be as easy, modern and beautiful

Apr 22, 2022
What it be - A flutter app to experiment with locally executed mobile AI.

what_it_be A flutter app to experiment with locally executed mobile AI. Getting Started This project is a starting point for a Flutter application. A

Jan 4, 2022
An experiment in building a better XMPP client. This time using Flutter.
An experiment in building a better XMPP client. This time using Flutter.

Moxxy An experimental XMPP client that tries to be as easy, modern and beautiful as possible. The code is also available on codeberg. Screenshots Deve

May 26, 2022
The Flutter plugin that help you can choose dates and years with rounded calendars and customizable themes.
The Flutter plugin that help you can choose dates and years with rounded calendars and customizable themes.

Flutter Rounded Date Picker The Flutter plugin that help you can choose dates and years with rounded calendars and customizable themes. Installing Add

Apr 26, 2022
Extended theme - Extended themes for Flutter

Extended Theme This package will allow you to extend theming in Flutter so you c

Apr 21, 2022
Search and view popular Youtube videos with Youtube API in Flutter App
Search and view popular Youtube videos with Youtube API in Flutter App

getx_bottom_nav_sample The sample of AnimatedBottomNavBar with GetX 주요 Package 설명 1.url_launcher url_launcher pub.dev flutter 에서 인앱, 외부 브라우저로 연길 시켜 주는

Dec 25, 2021
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

GetWidget is a 100% free Flutter open-source UI Kit library built with Flutter SDK to make Flutter development easier and more joyful than ever. GetWi

May 24, 2022