search

Folio-kr / folio

https://folio-kr.web.app/
GNU General Public License v3.0
0 stars 0 forks source link

Folio Themes & Styles #7

Open KKimj opened 3 years ago

KKimj commented 3 years ago

Light mode

ThemeData FolioLightTheme = ThemeData.light().copyWith(
  primaryColor: Color(0xFF264653),
  accentColor: Color(0xFF2a9d8f),
  appBarTheme: AppBarTheme(color: Color(0xFF264653)),
  textTheme: TextTheme(
    headline6: TextStyle(color: Colors.black),
    subtitle1: TextStyle(color: Colors.black),
    subtitle2: TextStyle(color: Colors.black),
  ),
  textButtonTheme: TextButtonThemeData(),
  outlinedButtonTheme: OutlinedButtonThemeData(),
  elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
    primary: Colors.white,
    onPrimary: Colors.blue,
    onSurface: Colors.white,
  )),
);

Dark mode

ThemeData FolioDarkTheme = ThemeData.dark().copyWith(
  primaryColor: Color(0xFF264653),
  accentColor: Color(0xFF2a9d8f),
  appBarTheme: AppBarTheme(color: Color(0xFF264653)),
  textTheme: TextTheme(
    headline6: TextStyle(color: Colors.white),
    subtitle1: TextStyle(color: Colors.white),
    subtitle2: TextStyle(color: Colors.white),
  ),
  textButtonTheme: TextButtonThemeData(),
  outlinedButtonTheme: OutlinedButtonThemeData(),
  elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.white,
    onSurface: Colors.white,
  )),
);
KKimj commented 3 years ago

https://material.io/design/typography/the-type-system.html

image

KKimj commented 3 years ago 
import 'package:flutter/material.dart';
import 'package:folio_flutter/styles.dart';

ThemeData FolioLightTheme = ThemeData.light().copyWith(
  // 0xFFE4E4E4
  primaryColor: Color(0xFFE4E4E4),
  accentColor: Color(0xFF1085D8),
  appBarTheme: AppBarTheme(color: Color(0xFFE4E4E4)),
  textTheme: TextTheme(
    headline1: TextStyles.h1,
    headline2: TextStyles.h2,
    headline3: TextStyles.h3,
    headline4: TextStyles.h4,
    headline5: TextStyles.h5,
    headline6: TextStyles.h6,
    subtitle1: TextStyles.subtitle1,
    subtitle2: TextStyles.subtitle2,
    bodyText1: TextStyles.body1,
    bodyText2: TextStyles.body2,
    button: TextStyles.button,
    caption: TextStyles.caption,
  ),
  textButtonTheme: TextButtonThemeData(),
  outlinedButtonTheme: OutlinedButtonThemeData(),
  elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
    primary: Colors.white,
    onPrimary: Colors.blue,
    onSurface: Colors.white,
  )),
);

ThemeData FolioDarkTheme = ThemeData.dark().copyWith(
  primaryColor: Color(0xFFE4E4E4),
  accentColor: Color(0xFF1085D8),
  appBarTheme: AppBarTheme(color: Color(0xFFE4E4E4)),
  textTheme: TextTheme(
    headline1: TextStyles.h1,
    headline2: TextStyles.h2,
    headline3: TextStyles.h3,
    headline4: TextStyles.h4,
    headline5: TextStyles.h5,
    headline6: TextStyles.h6,
    subtitle1: TextStyles.subtitle1,
    subtitle2: TextStyles.subtitle2,
    bodyText1: TextStyles.body1,
    bodyText2: TextStyles.body2,
    button: TextStyles.button,
    caption: TextStyles.caption,
  ).apply(bodyColor: Colors.white, displayColor: Colors.white),
  textButtonTheme: TextButtonThemeData(),
  outlinedButtonTheme: OutlinedButtonThemeData(),
  elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.white,
    onSurface: Colors.white,
  )),
);
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/// Fonts - A list of Font Families, this is uses by the TextStyles class to create concrete styles.
class Fonts {
  static const String NanumSquareRound = 'NanumSquareRound';
}

/// Font Sizes
/// You can use these directly if you need, but usually there should be a predefined style in TextStyles.
class FontSizes {
  /// Provides the ability to nudge the app-wide font scale in either direction
  static double get scale => 1;
  static double get s10 => 10 * scale;
  static double get s11 => 11 * scale;
  static double get s12 => 12 * scale;
  static double get s14 => 14 * scale;
  static double get s16 => 16 * scale;
  static double get s20 => 20 * scale;
  static double get s24 => 24 * scale;
  static double get s34 => 34 * scale;
  static double get s48 => 48 * scale;
  static double get s60 => 60 * scale;
  static double get s96 => 96 * scale;
}

/// TextStyles - All the core text styles for the app should be declared here.
/// Don't try and create every variant in existence here, just the high level ones.
/// More specific variants can be created on the fly using `style.copyWith()`
/// `newStyle = TextStyles.body1.copyWith(lineHeight: 2, color: Colors.red)`
class TextStyles {
  /// Declare a base style for each Family
  static const TextStyle NanumSquareRound = TextStyle(
      fontFamily: Fonts.NanumSquareRound,
      fontWeight: FontWeight.w400,
      height: 1);

  static TextStyle get h1 => NanumSquareRound.copyWith(
      fontWeight: FontWeight.w300,
      fontSize: FontSizes.s96,
      letterSpacing: -1.5,
      height: 1.17);
  static TextStyle get h2 =>
      h1.copyWith(fontSize: FontSizes.s60, letterSpacing: -.5, height: 1.16);
  static TextStyle get h3 =>
      h1.copyWith(fontSize: FontSizes.s48, letterSpacing: 0, height: 1.29);
  static TextStyle get h4 =>
      h1.copyWith(fontSize: FontSizes.s34, letterSpacing: 0, height: 1.29);
  static TextStyle get h5 =>
      h1.copyWith(fontSize: FontSizes.s24, letterSpacing: 0, height: 1.29);
  static TextStyle get h6 =>
      h1.copyWith(fontSize: FontSizes.s20, letterSpacing: 0, height: 1.29);
  static TextStyle get subtitle1 => NanumSquareRound.copyWith(
      fontWeight: FontWeight.w400, fontSize: FontSizes.s16, height: 1.31);
  static TextStyle get subtitle2 => subtitle1.copyWith(
      fontWeight: FontWeight.w500, fontSize: FontSizes.s14, height: 1.36);
  static TextStyle get body1 => NanumSquareRound.copyWith(
      fontWeight: FontWeight.normal, fontSize: FontSizes.s16, height: 1.71);
  static TextStyle get body2 =>
      body1.copyWith(fontSize: FontSizes.s14, height: 1.5, letterSpacing: .2);
  static TextStyle get body3 => body1.copyWith(
      fontSize: FontSizes.s14, height: 1.5, fontWeight: FontWeight.bold);

  static TextStyle get button => NanumSquareRound.copyWith(
      fontSize: FontSizes.s14,
      letterSpacing: 1.25,
      height: 1.5,
      fontWeight: FontWeight.bold);
  static TextStyle get caption => NanumSquareRound.copyWith(
      fontWeight: FontWeight.w400,
      letterSpacing: .4,
      fontSize: FontSizes.s12,
      height: 1.36);
}