only-bible-app

git clone https://pyrossh.dev/repos/only-bible-app.git

The only bible app you will ever need. No ads. No in-app purchases. No distractions.

c2abd506 — pyrossh

add dark theme

Files changed (12) hide show

lib/components/books_list.dart +1 -1
lib/components/chapters_list.dart +1 -1
lib/components/header.dart +11 -5
lib/components/menu.dart +3 -4
lib/components/shell.dart +1 -1
lib/components/side_menu_page.dart +1 -1
lib/components/sidebar.dart +6 -6
lib/components/tile.dart +0 -10
lib/components/verse_view.dart +4 -5
lib/main.dart +96 -2
lib/models/theme.dart +0 -89
lib/state.dart +12 -4

lib/components/books_list.dart CHANGED Viewed

@@ -22,7 +22,7 @@ class BooksList extends StatelessWidget {
       children: [
         Container(
           margin: const EdgeInsets.only(bottom: 20),
-          child: Text(title, style: theme.value.titleText),
+          child: Text(title, style: Theme.of(context).textTheme.headlineMedium),
         ),
         Wrap(
           children: List.of(

lib/components/chapters_list.dart CHANGED Viewed

@@ -20,7 +20,7 @@ class ChaptersList extends StatelessWidget {
       children: [
         Container(
           margin: const EdgeInsets.only(bottom: 20),
-          child: Text(title, style: theme.value.titleText),
+          child: Text(title, style: Theme.of(context).textTheme.headlineMedium),
         ),
         Wrap(
           children: List.generate(length, (index) {

lib/components/header.dart CHANGED Viewed

@@ -24,8 +24,13 @@ class Header extends StatelessWidget {
         top: isWide(context) ? 10 : 0,
         bottom: isWide(context) ? 10 : 0,
       ),
-      decoration: const BoxDecoration(
+      decoration: BoxDecoration(
+        border: Border(
+          bottom: BorderSide(
+            width: 1.5,
-        border: Border(bottom: BorderSide(width: 1.5)),
+            color: Theme.of(context).dividerColor,
+          ),
+        ),
       ),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -34,16 +39,17 @@ class Header extends StatelessWidget {
           TextButton.icon(
             style: TextButton.styleFrom(
               padding: EdgeInsets.zero,
-              foregroundColor: const Color(0xFF9A1111),
+              backgroundColor: Theme.of(context).colorScheme.background,
+              elevation: 0,
             ),
             label: Icon(
               Icons.expand_more,
               size: 28,
-              color: theme.value.headerText.color,
+              color: Theme.of(context).textTheme.headlineMedium!.color,
             ),
             icon: Text(
               "${selectedBible.value[book].name} ${chapter + 1}",
-              style: theme.value.headerText,
+              style: Theme.of(context).textTheme.headlineMedium,
             ),
             onPressed: () {
               Navigator.of(context).push(SideMenuPage());

lib/components/menu.dart CHANGED Viewed

@@ -27,24 +27,23 @@ class Menu extends StatelessWidget {
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 IconButton(
-                  icon: Icon(modeIcon, color: Colors.black, size: 28),
+                  icon: Icon(modeIcon, size: 28),
                   onPressed: toggleMode,
                 ),
                 Container(margin: const EdgeInsets.only(top: spacing)),
                 IconButton(
-                  icon: Icon(Icons.format_bold, color: boldColor, size: 28),
+                  icon: Icon(Icons.format_bold, size: 28),
                   onPressed: toggleBold,
                 ),
                 Container(margin: const EdgeInsets.only(top: spacing)),
                 const IconButton(
-                  icon: Icon(Icons.add_circle, color: Colors.black, size: 28),
+                  icon: Icon(Icons.add_circle, size: 28),
                   onPressed: increaseFont,
                 ),
                 Container(margin: const EdgeInsets.only(top: spacing)),
                 const IconButton(
                   icon: Icon(
                     Icons.remove_circle,
-                    color: Colors.black,
                     size: 28,
                   ),
                   onPressed: decreaseFont,

lib/components/shell.dart CHANGED Viewed

@@ -13,7 +13,7 @@ class Shell extends ShellRoute {
   @override
   ShellRouteBuilder? get builder => (context, state, child) {
         return Scaffold(
-          backgroundColor: Colors.white,
+          backgroundColor: Theme.of(context).colorScheme.background,
           body: SafeArea(
             child: isWide(context)
                 ? Row(

lib/components/side_menu_page.dart CHANGED Viewed

@@ -33,7 +33,7 @@ class SideMenuPage extends ModalRoute<void> {
     return Material(
       type: MaterialType.transparency,
       child: Container(
-        color: Colors.white,
+        color: Theme.of(context).colorScheme.background,
         margin: EdgeInsets.only(left: 0, right: isWide(context) ? 650 : 0),
         child: const BookSelector(),
       ),

lib/components/sidebar.dart CHANGED Viewed

@@ -8,7 +8,7 @@ class Sidebar extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final height = MediaQuery.of(context).size.height;
-    return Container(
+    return ColoredBox(
       color: const Color(0xFF4C2323),
       child: Stack(
         children: [
@@ -34,13 +34,13 @@ class Sidebar extends StatelessWidget {
                 crossAxisAlignment: CrossAxisAlignment.end,
                 children: [
                   Flexible(
-                    child: Text("ONLY", style: theme.value.logoText),
+                    child: Text("ONLY", style: Theme.of(context).textTheme.headlineLarge),
                   ),
                   Flexible(
-                    child: Text("BIBLE", style: theme.value.logoText),
+                    child: Text("BIBLE", style: Theme.of(context).textTheme.headlineLarge),
                   ),
                   Flexible(
-                    child: Text("APP", style: theme.value.logoText),
+                    child: Text("APP", style: Theme.of(context).textTheme.headlineLarge),
                   ),
                 ],
               ),
@@ -99,7 +99,7 @@ class Bookmark extends StatelessWidget {
             width: 30.0,
             height: 80.0,
             decoration: BoxDecoration(
-              color: theme.value.secondaryColor,
+              color: Theme.of(context).secondaryHeaderColor,
               borderRadius: const BorderRadius.only(
                 topLeft: Radius.circular(4),
                 topRight: Radius.circular(4),
@@ -108,7 +108,7 @@ class Bookmark extends StatelessWidget {
           ),
           CustomPaint(
             painter: TrianglePainter(
-              color: theme.value.secondaryColor,
+              color: Theme.of(context).secondaryHeaderColor,
             ),
           ),
         ],

lib/components/tile.dart CHANGED Viewed

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
 import 'package:only_bible_app/state.dart';
 class Tile extends StatelessWidget {
@@ -15,15 +14,6 @@ class Tile extends StatelessWidget {
       height: isWide(context) ? 60 : 40,
       margin: const EdgeInsets.only(right: 16, bottom: 16),
       child: TextButton(
-        style: TextButton.styleFrom(
-          padding: EdgeInsets.zero,
-          shape: const RoundedRectangleBorder(),
-          elevation: 1,
-          // backgroundColor: const Color(0xFFF6F6F6),
-          backgroundColor: const Color(0xFFEAE9E9),
-          foregroundColor: const Color(0xFF9A1111),
-          textStyle: theme.value.tileText,
-        ),
         onPressed: onPressed,
         child: Text(name),
       ),

lib/components/verse_view.dart CHANGED Viewed

@@ -12,9 +12,8 @@ class VerseText extends StatelessWidget {
   Widget build(BuildContext context) {
     final selected = selectedVerses.reactiveValue(context).contains(index);
     final delta = fontSizeDelta.reactiveValue(context);
-    final bodySize = theme.value.bodyText.fontSize! + delta;
+    final bodySize = Theme.of(context).textTheme.bodyMedium!.fontSize! + delta;
-    final weight =
-        fontBold.reactiveValue(context) ? FontWeight.w600 : FontWeight.w500;
+    final weight = fontBold.reactiveValue(context) ? FontWeight.w600 : FontWeight.w500;
     onTap() {
       onVerseSelected(index);
     }
@@ -25,7 +24,7 @@ class VerseText extends StatelessWidget {
         onTap: onTap,
         child: DecoratedBox(
           decoration: BoxDecoration(
-            color: selected ? theme.value.highlightColor : Colors.white,
+            color: selected ? Theme.of(context).highlightColor : Theme.of(context).colorScheme.background,
           ),
           child: Row(
             crossAxisAlignment: CrossAxisAlignment.start,
@@ -34,7 +33,7 @@ class VerseText extends StatelessWidget {
                 margin: const EdgeInsets.only(right: 4),
                 child: Transform.translate(
                   offset: const Offset(0, 2),
-                  child: Text("${index + 1}", style: theme.value.labelText),
+                  child: Text("${index + 1}", style: Theme.of(context).textTheme.labelMedium),
                 ),
               ),
               Flexible(

lib/main.dart CHANGED Viewed

@@ -17,13 +17,107 @@ void main() async {
     MaterialApp.router(
       debugShowCheckedModeBanner: false,
       builder: OneContext().builder,
+      themeMode: ThemeMode.system,
       theme: ThemeData(
         visualDensity: VisualDensity.adaptivePlatformDensity,
+        primaryColor: const Color(0xFF4C2323),
+        secondaryHeaderColor: const Color(0xFFFFB341),
+        highlightColor: const Color(0xAAF8D0DC),
+        dividerColor: Colors.black,
+        shadowColor: Colors.black,
+        colorScheme: const ColorScheme.light(
+          background: Colors.white,
+        ),
+        textButtonTheme: TextButtonThemeData(
+          style: TextButton.styleFrom(
+            padding: EdgeInsets.zero,
+            shape: const RoundedRectangleBorder(),
+            elevation: 1,
+            // backgroundColor: const Color(0xFFF6F6F6),
+            backgroundColor: const Color(0xFFEAE9E9),
+            foregroundColor: const Color(0xFF9A1111),
+            textStyle: const TextStyle(
+              fontSize: 18,
+              fontWeight: FontWeight.w500,
+              color: Color(0xFF9A1111),
+              letterSpacing: 0.5,
+            ),
+          ),
+        ),
+        textTheme: const TextTheme(
+          bodyMedium: TextStyle(
+            color: Color(0xFF010101),
+          ),
+          headlineLarge: TextStyle(
+            fontSize: 38,
+            fontWeight: FontWeight.w700,
+            color: Color(0xFFFFB341),
+          ),
+          headlineMedium: TextStyle(
+            color: Color(0xFF010101),
+            fontSize: 20,
+            fontWeight: FontWeight.w500,
+            letterSpacing: 0.5,
+          ),
+          labelMedium: TextStyle(
+            fontSize: 12,
+            fontWeight: FontWeight.w800,
+            color: Color(0xFF9A1111),
+            letterSpacing: 0.5,
+          ),
+        ),
+      ),
+      darkTheme: ThemeData(
+        visualDensity: VisualDensity.adaptivePlatformDensity,
+        primaryColor: const Color(0xFF4C2323),
+        secondaryHeaderColor: const Color(0xFFFFB341),
+        highlightColor: const Color(0xAAF8D0DC),
+        dividerColor: Colors.white,
+        shadowColor: Colors.white,
+        colorScheme: const ColorScheme.dark(
+          background: Color(0xFF1F1F22),
+        ),
+        textButtonTheme: TextButtonThemeData(
+          style: TextButton.styleFrom(
+            padding: EdgeInsets.zero,
+            shape: const RoundedRectangleBorder(),
+            elevation: 1,
+            backgroundColor: const Color(0xFF323232),
+            foregroundColor: const Color(0xFFBBBBBB),
+            textStyle: const TextStyle(
+              fontSize: 18,
+              fontWeight: FontWeight.w500,
+              color: Color(0xFF9A1111),
+              letterSpacing: 0.5,
+            ),
+          ),
+        ),
+        textTheme: const TextTheme(
+          bodyMedium: TextStyle(
+            color: Color(0xFFBCBEC4),
+          ),
+          headlineLarge: TextStyle(
+            fontSize: 38,
+            fontWeight: FontWeight.w700,
+            color: Color(0xFFFFB341),
+          ),
+          headlineMedium: TextStyle(
+            color: Color(0xFFBCBEC4),
+            fontSize: 20,
+            fontWeight: FontWeight.w500,
+            letterSpacing: 0.5,
+          ),
+          labelMedium: TextStyle(
+            color: Color(0xFFBBBBBB),
+            fontSize: 12,
+            fontWeight: FontWeight.w800,
+            letterSpacing: 0.5,
+          ),
+        ),
       ),
       routerConfig: GoRouter(
         debugLogDiagnostics: true,
-        initialLocation:
-            "/${selectedBible.value[bookIndex.value].name}/${chapterIndex.value}",
+        initialLocation: "/${selectedBible.value[bookIndex.value].name}/${chapterIndex.value}",
         routes: [
           Shell(
             routes: [

lib/models/theme.dart DELETED Viewed

@@ -1,89 +0,0 @@
-import "package:flutter/material.dart";
-import "package:flutter/services.dart";
-const lightPrimary = Color(0xFF4C2323);
-const lightPrimaryLighter = Color(0xFF3C1B1C);
-const lightSecondary = Color(0xFFFFB341);
-const lightTertiary = Color(0xFF4C2323);
-const lightHeadline = Color(0xFF010101);
-const lightLabel = Color(0xFF9A1111);
-const lightBody = Color(0xFF010101);
-const lightHighlightColor = Color(0xAAF8D0DC);
-const lightStatusBar = SystemUiOverlayStyle(
-  systemNavigationBarColor: Colors.white,
-  systemNavigationBarIconBrightness: Brightness.dark,
-  statusBarColor: Colors.white,
-  statusBarIconBrightness: Brightness.dark,
-);
-const darkStatusBar = SystemUiOverlayStyle(
-  systemNavigationBarColor: Colors.black,
-  systemNavigationBarIconBrightness: Brightness.light,
-  statusBarColor: Colors.black,
-  statusBarIconBrightness: Brightness.light,
-);
-const lightTheme = AppTheme(
-  secondaryColor: lightSecondary,
-  highlightColor: lightHighlightColor,
-  labelText: TextStyle(
-    // fontFamily: "SanFrancisco",
-    fontSize: 12,
-    fontWeight: FontWeight.w800,
-    color: lightLabel,
-    letterSpacing: 0.5,
-  ),
-  logoText: TextStyle(
-    fontSize: 38,
-    fontWeight: FontWeight.w700,
-    color: lightSecondary,
-  ),
-  bodyText: TextStyle(
-    color: lightBody,
-    fontSize: 16,
-    // fontFamily: "SanFranciscoPro",
-    fontWeight: FontWeight.w400,
-    // letterSpacing: 0.5,
-  ),
-  headerText: TextStyle(
-    // color: lightLabel,
-    color: lightBody,
-    fontSize: 20,
-    fontWeight: FontWeight.w500,
-    letterSpacing: 0.5,
-  ),
-  titleText: TextStyle(
-    color: lightBody,
-    fontWeight: FontWeight.w600,
-    fontSize: 20,
-  ),
-  tileText: TextStyle(
-    fontSize: 18,
-    fontWeight: FontWeight.w500,
-    color: lightLabel,
-    letterSpacing: 0.5,
-  ),
-);
-class AppTheme {
-  const AppTheme({
-    required this.labelText,
-    required this.logoText,
-    required this.bodyText,
-    required this.headerText,
-    required this.titleText,
-    required this.tileText,
-    required this.secondaryColor,
-    required this.highlightColor,
-  });
-  final TextStyle labelText;
-  final TextStyle logoText;
-  final TextStyle bodyText;
-  final TextStyle headerText;
-  final TextStyle titleText;
-  final TextStyle tileText;
-  final Color secondaryColor;
-  final Color highlightColor;
-}

lib/state.dart CHANGED Viewed

@@ -7,7 +7,6 @@ import 'package:flutter_reactive_value/flutter_reactive_value.dart';
 import 'package:just_audio/just_audio.dart';
 import 'package:only_bible_app/utils/dialog.dart';
 import 'package:only_bible_app/models/book.dart';
-import 'package:only_bible_app/models/theme.dart';
 final darkMode = PersistentValueNotifier<bool>(
   sharedPreferencesKey: 'darkMode',
@@ -37,7 +36,6 @@ final chapterIndex = PersistentValueNotifier<int>(
 final selectedBible = ValueNotifier<List<Book>>([]);
 final selectedVerses = ValueNotifier([]);
 final isPlaying = ValueNotifier(false);
-final theme = ValueNotifier<AppTheme>(lightTheme);
 final fontSizeDelta = ValueNotifier(0);
 toggleMode() {
@@ -59,9 +57,19 @@ decreaseFont() {
 updateStatusBar() {
   if (darkMode.value) {
-    SystemChrome.setSystemUIOverlayStyle(darkStatusBar);
+    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
+      systemNavigationBarColor: Colors.black,
+      systemNavigationBarIconBrightness: Brightness.light,
+      statusBarColor: Colors.black,
+      statusBarIconBrightness: Brightness.light,
+    ));
   } else {
-    SystemChrome.setSystemUIOverlayStyle(lightStatusBar);
+    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
+      systemNavigationBarColor: Colors.white,
+      systemNavigationBarIconBrightness: Brightness.dark,
+      statusBarColor: Colors.white,
+      statusBarIconBrightness: Brightness.dark,
+    ));
   }
 }

~repos /only-bible-app

git clone https://pyrossh.dev/repos/only-bible-app.git

The only bible app you will ever need. No ads. No in-app purchases. No distractions.