Create a dark theme without using ThemeData

Question

I've created a dart file called theme.dart wherein I put there all my colors and also my font sizes and text styles.

my theme.dart looks like this :

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

//COLORS
const colorPrimary = Color(0xFF913f91);
const colorPrimaryLight = Color(0xFFed74ed);
const colorSecondary = Color(0xFF1fb4ac);
const colorSecondaryLight = Color(0xFF3ee6dc);
const colorTertiary = Color(0xFFff8519);
const colorTertiaryLight = Color(0xFFf7a963);
const colorPositive = Color(0xFF00d96f);
const colorNegative = Color(0xFFFF4464);
const colorNegativeDark = Color(0xFFff8095);
const colorDisabled = Color(0xFFC1C1C1);
const colorOffWhite = Color(0xFFf2f2f2);
const colorOffBlack = Color(0xFF222222);
const colorText = Color(0xFF222222);
const colorAqua = Color(0xFF19c4fc);
const colorAquaDark = Color(0xFF09a7db);
const colorDarkBlue = Color(0xFF00649e);
const colorBlue = Color(0xFF1fadff);
const colorYellow = Color(0xFFfff021);
const colorYellowLight = Color(0xFFfff354);
const gradientTop = Color(0xFFFFD560);
const gradientBottom = Color(0xFFFF8519);
const colorShadowDark = Color(0xFF090909);


//FONT SIZE
const fontSizeRegular = 18.0;
const fontSizeSmall = 12.0;
const fontSizeMedium = 15.0;
const fontSizeSmallest = 10.0;
const fontSizeLarge = 22.0;
const fontExtraLarge = 30.0;

//TEXT STYLES
textHeaderStyle(Color _color, FontStyle _fontStyle, FontWeight _fontWeight) {
  return TextStyle(
      fontSize: ScreenUtil().setSp(fontSizeLarge),
      color: _color,
      fontStyle: _fontStyle,
      fontWeight: _fontWeight);
}

for example, I have a switchlet's say in the "settings" menu to toggle between dark and light mode.

what would be the best approach?

If I add a condition on the colors like:

const colorPrimary = mode == "light" ? Color(0xFF913f91) : Color(0xFFed74ed);

wherein "mode" is a global variable and I add a setState() every time I toggle the switch in the "settings" menu, will it work?

I'll gladly try all of your suggestions.

Thanks for those who can help!

Answer 1

The simplier solution I can think of; you can use a bool to choice theme something mode as you call and if it is true you can set your bright theme colors, if false dark theme colors and the key part you need to store it with shared preferences to apply whole app and make it permanent, I mean user setting can be set again even user close to app then restart it.

So you can use the bool in your theme dart:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

    //COLORS
    colorPrimary = mode ? Color(0xFFed74ed) : Color(0xFF913f91);
    colorSecondary = mode ? Color(0xFF3ee6dc) : Color(0xFF1fb4ac);
    colorTertiary = mode ? Color(0xFFf7a963): Color(0xFFff8519);
    ...

Then you don't need to make a global variable just you said you can add a setState() every time you toggle the switch in the "settings" menu..