Flutter plugin to help experiment with different Color Schemes without pain.

Overview

Image of Random Color Scheme

Random Color Scheme

Making a coherent Material Design theme is hard. This is a Flutter plugin that generates a random color pallet based on Material Design while respecting WCAG guidelines.

The idea is for you to (temporarily) replace your ColorScheme() with a randomColorSchemeLight() or randomColorSchemeDark(). On each run, hot refresh or hot restart, the app is going to look different. The theme is printed in terminal, so you can easily copy and paste back into your project with the colors that you want to stay.

The interactive sample allows you to see how it works and the reasoning behind:

Random Color Scheme

Usage

In the pubspec.yaml of your flutter project, add the following dependency:

pub package

dependencies:
  random_color_scheme: ^VERSION

In your project, just replace the ColorScheme.dark(...) with randomColorSchemeDark(). If you want a light theme, there is a randomColorSchemeLight().

import 'package:random_colorscheme/random_color_scheme.dart';

Theme(
  data: ThemeData(
    colorScheme: randomColorSchemeDark(),
  ),
  child: MyApp(),
)

How it works

This started in my Color Studio project. I started looking at the Material Design Guidelines on color for both light and dark theme. After extracting some colors (like the Primary, Secondary and Owl Study), I decided to see how similar were they, in what range are they and how they behave together. Then, I used HSLuv with a random number generator and rules detected from my observation. The final adjustments were made when tweaking the sample. HSLuv is great because only the Lightness attribute affects WCAG calculated contrast, so all themes are guaranteed to pass a minimum accessibility threshold.

Function listing

  • randomColorSchemeDark(seed: null | int): ColorScheme
  • randomColorSchemeLight(seed: null | int): ColorScheme
  • randomColorScheme(seed: null | int, isDark: bool): ColorScheme

Seed: an integer which guarantees the random function is always going to have the same output (i.e., the same ColorScheme). It is optional.

Reporting Issues

If you have any suggestions or feedback, 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.
You might also like...

A CLI tool to help generate dart classes from json returned from API

Json 2 Dart Command line utility Important note There is already a package called json2dart so this package will be called json2dartc ! This project w

Oct 5, 2022

A CLI tool to help batch renaming files.

batch_rename A CLI tool to enable batch renaming of files. Installation Clone the repo and add bin/batch_rename.exe to PATH: gh repo clone POWRFULCOW8

Nov 3, 2021

Library for help you make userbot or bot telegram and support tdlib telegram database and only support nodejs dart and google-apps-script

To-Do telegram client dart ✅️ support multi token ( bot / userbot ) ✅️ support bot and userbot ✅️ support telegram-bot-api local server ✅️ support tel

Jan 7, 2023

library to help you create database on local memory, support json local database inspired by lowdb

Licensed Licensed under the MIT License http://opensource.org/licenses/MIT. SPDX-License-Identifier: MIT Copyright (c) 2021 Azkadev http://github.c

Oct 17, 2022

A dart package to help you parse and evaluate infix mathematical expressions into their prefix and postfix notations.

A dart package to help you parse and evaluate infix mathematical expressions into their prefix and postfix notations.

Jan 28, 2022

Morphological analysis of Japanese sentences. This Flutter plugin helps you to analyze Japanese sentences.

ringo ringo is japanese word separator. Usage final ringo = await Ringo.init(); final tokenized = ringo.tokenize('吾輩はRingoである'); print('tokenized: $to

Oct 31, 2022

A flutter plugin that implements google's standalone ml kit

A flutter plugin that implements google's standalone ml kit

A flutter plugin that implements google's standalone ml kit

Dec 30, 2022

A flutter plugin for execute dart code in background.

flutter_background_service A flutter plugin for execute dart code in background. Android No additional setting required. To change notification icon,

Dec 27, 2022

A Flutter plugin that exposes Monet (Material You, Material 3) system colors on Android 12.

A Flutter plugin that exposes Monet (Material You, Material 3) system colors on Android 12.

Monet Colors A Flutter plugin that exposes Monet (Material You, Material 3) system colors on Android 12. Returns null on unsupported platforms and lea

Aug 26, 2022
Comments
  • Retrieving colorScheme

    Retrieving colorScheme

    Hello!

    Thanks for this plugin.

    It would be cool if there was a feature where the seed number was printed when hot reloading / starting the app, or perhaps some way to get the colors used.

    When trying different themes there seems to be no way to then start using the one you found and like.

    Thanks again.

    opened by carekb684 4
  • Add secondaryVariant generation

    Add secondaryVariant generation

    Hi!

    Thank you for an awesome package!

    Could you please add secondaryVariant generation as well?

    Maybe it should have the same logic as primaryVariant generation, primaryLightness - 10.0?

    https://github.com/bernaferrari/RandomColorScheme/blob/39c64c5e4c8329921d0cb4d0186dc6d98c09f064/lib/random_color_scheme.dart#L213-L217

    Should I make a pull request?

    opened by timekone 1
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 18% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /assets/sample_preview.png | 429.40kb | 251.18kb | 41.50% | | /assets/try_here.png | 6.04kb | 3.74kb | 38.16% | | /example/web/icons/Icon-192.png | 5.67kb | 4.21kb | 25.63% | | /example/web/icons/Icon-512.png | 14.22kb | 10.87kb | 23.56% | | /assets/github_large_preview.png | 584.25kb | 540.06kb | 7.56% | | /assets/readme.png | 425.24kb | 396.21kb | 6.83% | | /example/android/app/src/main/ic_launcher-playstore.png | 14.65kb | 13.72kb | 6.35% | | | | | | | Total : | 1,479.47kb | 1,219.98kb | 17.54% |


    Black Lives Matter | 💰 donate | 🎓 learn | ✍🏾 sign

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

    opened by imgbot[bot] 0
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 18% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /assets/sample_preview.png | 429.40kb | 251.18kb | 41.50% | | /assets/try_here.png | 6.04kb | 3.74kb | 38.16% | | /example/web/icons/Icon-192.png | 5.67kb | 4.21kb | 25.63% | | /example/web/icons/Icon-512.png | 14.22kb | 10.87kb | 23.56% | | /assets/github_large_preview.png | 584.25kb | 540.06kb | 7.56% | | /assets/readme.png | 425.24kb | 396.21kb | 6.83% | | /example/android/app/src/main/ic_launcher-playstore.png | 14.65kb | 13.72kb | 6.35% | | | | | | | Total : | 1,479.47kb | 1,219.98kb | 17.54% |


    Black Lives Matter | 💰 donate | 🎓 learn | ✍🏾 sign

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

    opened by imgbot[bot] 0
Owner
Bernardo Ferrari
Android native and Flutter developer. Computer Scientist.
Bernardo Ferrari
A mobile map based application to help people everywhere around the world get help

Wonder This is a mobile application made by flutter. The application is called "Wonder" because it will help people everywhere around the world to get

Sara Nersisian 1 Dec 2, 2021
🚀The Flutter dart code generator from zeplin. ex) Container, Text, Color, TextStyle, ... - Save your time.

Flutter Gen Zeplin Extension ?? The Flutter dart code generator from zeplin. ex) Container, Text, Color, TextStyle, ... - Save your time. ⬇ 1.1k Getti

NAVER 49 Oct 12, 2022
Random color generator for Flutter

Random color generator Pub link: https://pub.dartlang.org/packages/random_color This library will generate random colors that are visually pleasing an

Luka Knezic 56 Jun 13, 2022
Manually add the extra hitTest area of a widget without changing its size or layout.

extra_hittest_area Language: README.md | 中文简体 Manually add the extra hitTest area of a widget without changing its size or layout. Parent widgets The

FlutterCandies 13 Dec 6, 2022
Material color utilities

Material color utilities Algorithms and utilities that power the Material Design 3 (M3) color system, including choosing theme colors from images and

null 878 Jan 8, 2023
An application built using flutter that works as destiny checker, whether our mind wish is as we desire or not with 8 different option.

magic_8_ball_utter A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you s

dev_allauddin 3 Feb 3, 2022
An auto mapper for Dart. It allows mapping objects of different classes automatically and manually using JSON serialization.

AutoMapper for Dart An auto mapper for Dart. It allows mapping objects of different classes automatically and manually using JSON serialization. Examp

Leynier Gutiérrez González 7 Aug 24, 2022
A flutter package with classes to help testing applications using the canvas

Canvas test helpers MockCanvas is a utility class for writing tests for canvas operations. It supports the same API as the regular Canvas class from d

Blue Fire 12 Jan 31, 2022
Flutter package to help you lazily load and display pages of items as the user scrolls down your screen.

Flutter package to help you lazily load and display pages of items as the user scrolls down your screen.

Edson Bueno 425 Dec 13, 2022
A simple package to help does handler with countries in Flutter

It's a simple package to help does handler with countries in [Dart] language and [Flutter] Framework. Usage Countries class Can access all countries s

Leonardo Rosa 1 Feb 20, 2022