Notice: You're viewing an old version of the Nylo documentation.
Consider upgrading your project to Nylo 5.20.0.



You can manage your application's UI styles using themes. Themes allow us to change i.e the font size of text, how buttons appear and the general appearance of our application.

If you are new to themes, the examples on the Flutter website will help you get started here.

Out of the box, Nylo includes pre-configured themes for Light mode and Dark mode.

The theme will also update if the device enters 'light/dark' mode.

Light & Dark themes

  • Light theme - lib/resources/themes/light_theme.dart
  • Dark theme - lib/resources/themes/dark_theme.dart

Inside these files, you'll find the ThemeData and ThemeStyle pre-defined.

Creating a theme

If you want to have multiple themes for your app, we have an easy way for you to do this. If you're new to themes, follow along.

First, run the below command from the terminal

flutter pub run nylo_framework:main make:theme bright_theme

Note: replace bright_theme with the name of your new theme.

This creates a new theme in your /resources/themes/ directory and also a theme colors file in /resources/themes/styles/.

You can modify the colors for your new theme in the /resources/themes/styles/bright_theme_colors.dart file.

When you are ready to use the new theme, go to config/theme.dart.

Next, add the colors below the Theme Colors section like the below example.

// Light Colors
ColorStyles lightColors = LightThemeColors();

// Dark Colors
ColorStyles darkColors = DarkThemeColors();

// My New Bright Colors 
ColorStyles brightColors = BrightThemeColors();

Next, add your new theme in the ThemeConfig class like the below example.

// Preset Themes
class ThemeConfig {

  // LIGHT
  static BaseThemeConfig<ColorStyles> light() => BaseThemeConfig<ColorStyles>(
    id: "default_light_theme",
    description: "Light theme",
    theme: lightTheme(lightColors),
    colors: lightColors,

  // My new theme
  static BaseThemeConfig<ColorStyles> bright() => BaseThemeConfig<ColorStyles>(
   id: "default_bright_theme", // id when switching theme in the app
   description: "Bright theme",
   theme: brightTheme(brightColors),
   colors: brightColors,

Lastly, add the new theme in the appThemes config. Here's an example.

final appThemes = [

  ThemeConfig.bright(), // If first, it will be the default theme



That's it. Try running the app to see the changes.

Theme Colors

To manage the theme colors in your project check out the lib/resources/themes/styles directory. This directory contains the style colors for the light_theme_colors.dart and dark_theme_colors.dart.

In this file, you should have something similar to the below.

// e.g Light Theme colors
class LightThemeColors implements ColorStyles {
  // general
  Color get background => const Color(0xFFFFFFFF);
  Color get primaryContent => const Color(0xFF000000);
  Color get primaryAccent => const Color(0xFF87c694);

  Color get surfaceBackground => Colors.white;
  Color get surfaceContent =>;

  // app bar
  Color get appBarBackground =>;
  Color get appBarPrimaryContent => Colors.white;

  // buttons
  Color get buttonBackground => Colors.blueAccent;
  Color get buttonPrimaryContent => Colors.white;

  // bottom tab bar
  Color get bottomTabBarBackground => Colors.white;

  // bottom tab bar - icons
  Color get bottomTabBarIconSelected =>;
  Color get bottomTabBarIconUnselected => Colors.black54;

  // bottom tab bar - label
  Color get bottomTabBarLabelUnselected => Colors.black45;
  Color get bottomTabBarLabelSelected =>;

Using colors in widgets

import 'package:flutter_app/config/theme.dart';

// gets the light/dark background colour depending on the theme

// e.g. of using the "ThemeColor" class
  "Hello World",
  style: TextStyle(
      color:  ThemeColor.get(context).primaryContent // Color - primary content

// or 

  "Hello World",
  style: TextStyle(
      color:  ThemeConfig.light().colors.primaryContent // Light theme colors - primary content

Base styles

Base styles allow you to customize various widget colours from one area in your code.

Nylo ships with pre-configured base styles for your project located lib/resources/themes/styles/color_styles.dart.

These styles provide an interface for your theme colors in light_theme_colors.dart and dart_theme_colors.dart.

File lib/resources/themes/styles/color_styles.dart

abstract class ColorStyles {
  // general
  Color get background;
  Color get primaryContent;
  Color get primaryAccent;

  // app bar
  Color get appBarBackground;
  Color get appBarPrimaryContent;

  // buttons
  Color get buttonBackground;
  Color get buttonPrimaryContent;

  // bottom tab bar
  Color get bottomTabBarBackground;

  // bottom tab bar - icons
  Color get bottomTabBarIconSelected;
  Color get bottomTabBarIconUnselected;

  // bottom tab bar - label
  Color get bottomTabBarLabelUnselected;
  Color get bottomTabBarLabelSelected;

You can add additional styles here and then implement the colours in your theme.

Switching theme

Nylo supports the ability to switch themes on the fly.

E.g. If you need to switch the theme if a user taps a button to activate the "dark theme".

You can support that by doing the below:

import 'package:nylo_framework/theme/helper/ny_theme.dart';

TextButton(onPressed: () {

    // set theme to use the "dark theme" 
    NyTheme.set(context, id: "dark_theme");
    setState(() { });
  }, child: Text("Dark Theme")

// or

TextButton(onPressed: () {

    // set theme to use the "light theme" 
    NyTheme.set(context, id: "light_theme");
    setState(() { });
  }, child: Text("Light Theme")

Defining Themes

Themes are defined inside your config/app_theme.dart file.

// App Themes
final appThemes = [




Updating your primary font throughout the app is easy in Nylo. Open the lib/config/font.dart file and update the below.

final TextStyle appThemeFont = GoogleFonts.lato();

We include the GoogleFonts library in the repository so you can start using all the fonts with little effort. To update the font to something else you can do the following:

// OLD
// final TextStyle appThemeFont = GoogleFonts.lato();

// NEW
final TextStyle appThemeFont = GoogleFonts.montserrat();

Check out the fonts on the official GoogleFonts library to understand more

Need to use a custom font? Check out this guide -

Once you've added your font, change the variable like the below example.

final TextStyle appThemeFont = TextStyle(fontFamily: "ZenTokyoZoo"); // ZenTokyoZoo used as an example for the custom font


The config/design.dart file is used for managing the design elements for your app.

logo variable is used to display your apps Logo.

You can modify resources/widgets/logo_widget.dart to customize how you want to display your Logo.

loader variable is used to display a loader. Nylo will use this variable in some helper methods as the default loader widget.

You can modify resources/widgets/loader_widget.dart to customize how you want to display your Loader.