diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart index 1d76083485..4de1c7d376 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart @@ -27,7 +27,7 @@ class Toggle extends StatelessWidget { height: style.height, width: style.width, decoration: BoxDecoration( - color: style.backgroundColor, + color: value ? style.activeBackgroundColor : style.inactiveBackgroundColor, borderRadius: BorderRadius.circular(style.height / 2), ), ), diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart index f20344ccf8..683abfab5f 100644 --- a/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart +++ b/frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart @@ -7,29 +7,32 @@ class ToggleStyle { final double width; final double thumbRadius; - - final Color backgroundColor; final Color thumbColor; + final Color activeBackgroundColor; + final Color inactiveBackgroundColor; ToggleStyle({ required this.height, required this.width, required this.thumbRadius, - required this.backgroundColor, required this.thumbColor, + required this.activeBackgroundColor, + required this.inactiveBackgroundColor, }); ToggleStyle.big(AppTheme theme) : height = 16, width = 27, thumbRadius = 14, - backgroundColor = theme.main1, + activeBackgroundColor = theme.main1, + inactiveBackgroundColor = theme.shader5, thumbColor = theme.surface; ToggleStyle.small(AppTheme theme) : height = 10, width = 16, thumbRadius = 8, - backgroundColor = theme.main1, + activeBackgroundColor = theme.main1, + inactiveBackgroundColor = theme.shader5, thumbColor = theme.surface; }