elCaribe app - customization and branding
This commit is contained in:
59
news-app/lib/ui/styles/appTheme.dart
Normal file
59
news-app/lib/ui/styles/appTheme.dart
Normal file
@@ -0,0 +1,59 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
|
||||
import 'colors.dart';
|
||||
|
||||
enum AppTheme { Light, Dark }
|
||||
|
||||
final appThemeData = {
|
||||
AppTheme.Light: ThemeData(
|
||||
useMaterial3: false,
|
||||
fontFamily: 'Roboto',
|
||||
brightness: Brightness.light,
|
||||
primaryColor: primaryColor,
|
||||
canvasColor: backgroundColor,
|
||||
textTheme: const TextTheme().apply(bodyColor: darkSecondaryColor, displayColor: darkSecondaryColor),
|
||||
appBarTheme: AppBarTheme(
|
||||
elevation: 0.0,
|
||||
backgroundColor: backgroundColor,
|
||||
systemOverlayStyle: SystemUiOverlayStyle(statusBarBrightness: Brightness.light, statusBarIconBrightness: Brightness.dark, statusBarColor: backgroundColor.withOpacity(0.8))),
|
||||
iconTheme: const IconThemeData(color: darkSecondaryColor),
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: primaryColor,
|
||||
brightness: Brightness.light,
|
||||
surface: secondaryColor,
|
||||
secondary: secondaryColor,
|
||||
onPrimary: darkBackgroundColor,
|
||||
secondaryContainer: darkSecondaryColor,
|
||||
outline: borderColor,
|
||||
primaryContainer: darkSecondaryColor),
|
||||
dialogBackgroundColor: backgroundColor //for datePicker
|
||||
),
|
||||
AppTheme.Dark: ThemeData(
|
||||
useMaterial3: false,
|
||||
fontFamily: 'Roboto',
|
||||
brightness: Brightness.dark,
|
||||
primaryColor: primaryColor,
|
||||
canvasColor: darkSecondaryColor,
|
||||
appBarTheme: AppBarTheme(
|
||||
elevation: 0.0,
|
||||
backgroundColor: darkBackgroundColor,
|
||||
systemOverlayStyle: SystemUiOverlayStyle(
|
||||
statusBarBrightness: Brightness.dark,
|
||||
statusBarIconBrightness: Brightness.light,
|
||||
statusBarColor: darkSecondaryColor.withOpacity(0.8),
|
||||
)),
|
||||
textTheme: const TextTheme().apply(bodyColor: secondaryColor, displayColor: secondaryColor),
|
||||
iconTheme: const IconThemeData(color: secondaryColor),
|
||||
colorScheme: ColorScheme.fromSeed(
|
||||
seedColor: primaryColor,
|
||||
onPrimary: secondaryColor,
|
||||
surface: darkBackgroundColor,
|
||||
brightness: Brightness.dark,
|
||||
secondary: darkSecondaryColor,
|
||||
secondaryContainer: primaryColor,
|
||||
outline: backgroundColor,
|
||||
primaryContainer: secondaryColor //for datePicker
|
||||
),
|
||||
dialogBackgroundColor: darkBackgroundColor),
|
||||
};
|
||||
18
news-app/lib/ui/styles/colors.dart
Normal file
18
news-app/lib/ui/styles/colors.dart
Normal file
@@ -0,0 +1,18 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
Color primaryColor = const Color(0xff008DA8);
|
||||
const Color secondaryColor = Color(0xffffffff);
|
||||
const Color backgroundColor = Color(0xffF1F6F9);
|
||||
const Color borderColor = Color(0xff6B6B6B);
|
||||
const Color warningColor = Colors.amberAccent;
|
||||
const Color iconColor = Color(0xffBE151E);
|
||||
|
||||
const Color darkSecondaryColor = Color(0xff1B2D51);
|
||||
const Color darkBackgroundColor = Color(0xff1F345E);
|
||||
const Color darkIconColor = Color(0xffFF787F);
|
||||
|
||||
const Color dividerColor = Color(0x1F000000);
|
||||
|
||||
const Color authorRequestColor = darkSecondaryColor;
|
||||
const Color authorReviewColor = Color(0xff017A80);
|
||||
const Color authorApprovedColor = Color(0xff060F72);
|
||||
Reference in New Issue
Block a user