Themes



Introduction

Nylo includes themes for Light mode and Dark mode.

Both themes come pre-configured and ready for use. The theme will also update automatically change if the device enters 'light/dark mode', on IOS you can manually set a device to 'light/dark mode' by going into settings.


Light & Dark themes

  • The light theme is named lib/resources/themes/light_theme.dart
  • The dark theme is named lib/resources/themes/dark_theme.dart

Inside these files, you'll find the ThemeData and ThemeStyle pre-defined. Changes to the font and app colors can be managed in the next section.


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 BaseStyles {
  // general
  Color get background => const Color(0xFFFFFFFF);
  Color get primaryContent => const Color(0xFF000000);
  Color get primaryAccent => const Color(0xFF87c694);

  // app bar
  Color get appBarBackground => Colors.blue;
  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 => Colors.blue;
  Color get bottomTabBarIconUnselected => Colors.black54;

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


Using colors in widgets

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

// get light background colour
NyColors.light.background

// get dark background colour
NyColors.light.background

// e.g. of using the "NyColors" class
Text(
  "Hello World",
  style: TextStyle(
      color:  NyColors.light.primaryContent // light - primary content
  ),
),

Text(
  "Hello World",
  style: TextStyle(
      color:  NyColors.dark.primaryContent // dark - primary content
  ),
),

// or 

Text(
  "Hello World",
  style: TextStyle(
      color:  NyColors.of(context).primaryContent // light/dark - primary content
  ),
),


Base styles

Base styles are an easy way 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/base_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/base_styles.dart

abstract class BaseStyles {
  // 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 ablity to switch themes on the fly.

E.g. If you need to switch 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: "default_dark_theme");

  }, child: Text("Dark Theme")
),

// or

TextButton(onPressed: () {

    // set theme to use the "light theme" 
    NyTheme.set(context, id: "default_light_theme");

  }, child: Text("Light Theme")
),


Defining Themes

Themes are defined inside your lib/bootstrap/app.dart file.

...
@override
  Widget build(BuildContext context) {
    return ThemeProvider(
      themes: [
        AppTheme(
            id: ThemeConfig.lightThemeId(), // id - default_light_theme
            data: this.lightTheme ?? ThemeData.fallback(),
            description: 'Light theme'),
        AppTheme(
            id: ThemeConfig.darkThemeId(), // id - default_dark_theme
            data: this.darkTheme ?? ThemeData.fallback(),
            description: 'Dark theme'),
      ],
...

You can add additional themes in the themes array like in the above example.

An AppTheme requires the following:

import 'package:nylo_framework/nylo_framework.dart';
...

AppTheme(
  id: 'id_for_the_theme', // id - default_magic_theme
  data: MagicTheme(), // add your new theme inside lib/resources/themes/ like the light/dark theme.
  description: 'Magical theme' // short description of your theme
),


Fonts

Updating your primary font throughout the app is very easy in Nylo, open the lib/config/app_theme.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