react-native-inapp-inspector 1.0.4 → 1.0.6

package/dist/esm/styles/index.js

@@ -1,15 +1,14 @@
 import { StyleSheet, Platform, StatusBar } from 'react-native';
-import { AppColors } from './AppColors';
-// Utils
+import AppColors, { updateAppColorsTheme, getThemeColors } from './AppColors';
 import { AppFonts } from './AppFonts';
-const styles = StyleSheet.create({
+export const getRawStyles = (colors) => ({
     header: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingVertical: 12,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
         zIndex: 10,
-        minHeight: 56,
+        minHeight: 48,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.08,
@@ -26,33 +25,40 @@ const styles = StyleSheet.create({
     },
     headerTitle: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.primaryLight,
+        color: colors.primaryLight,
         fontSize: 18,
         letterSpacing: 0.3,
     },
     headerButtonGroup: {
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: 'rgba(255, 255, 255, 0.15)',
-        borderRadius: 8,
+        backgroundColor: 'rgba(255, 255, 255, 0.1)',
+        borderRadius: 10,
         padding: 3,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.08)',
     },
     headerGroupButton: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: 12,
+        paddingHorizontal: 8,
         paddingVertical: 6,
-        borderRadius: 6,
+        borderRadius: 8,
         gap: 4,
     },
     headerGroupButtonActive: {
-        backgroundColor: 'rgba(255, 255, 255, 0.25)',
+        backgroundColor: 'rgba(255, 255, 255, 0.22)',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.12,
+        shadowRadius: 2,
+        elevation: 2,
     },
     headerGroupButtonText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: 'rgba(255, 255, 255, 0.6)',
-        letterSpacing: 0.2,
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10.5,
+        color: 'rgba(255, 255, 255, 0.65)',
+        letterSpacing: 0.1,
     },
     headerDetailCenter: {
         alignItems: 'center',
@@ -77,13 +83,13 @@ const styles = StyleSheet.create({
     },
     headerMethodText: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.primaryLight,
+        color: colors.primaryLight,
         fontSize: 10,
         letterSpacing: 0.5,
     },
     headerDetailTitle: {
         fontFamily: AppFonts.interMedium,
-        color: AppColors.primaryLight,
+        color: colors.primaryLight,
         fontSize: 15,
         flexShrink: 1,
         letterSpacing: 0.2,
@@ -106,7 +112,7 @@ const styles = StyleSheet.create({
     },
     headerSubTitle: {
         fontFamily: AppFonts.interMedium,
-        color: AppColors.primaryLight,
+        color: colors.primaryLight,
         fontSize: 11,
         opacity: 0.95,
         letterSpacing: 0.2,
@@ -134,9 +140,19 @@ const styles = StyleSheet.create({
         letterSpacing: 0.2,
     },
     iconBtnMinimal: { padding: 6 },
-    listContent: { paddingBottom: 20 },
+    closeButtonCircle: {
+        width: 32,
+        height: 32,
+        borderRadius: 16,
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.08)',
+    },
+    listContent: { paddingBottom: 12 },
     detailScroll: { flex: 1 },
-    detailContent: { paddingHorizontal: 8, paddingTop: 10, paddingBottom: 40 },
+    detailContent: { paddingHorizontal: 6, paddingTop: 8, paddingBottom: 20 },
     fabWrapper: {
         position: 'absolute',
         bottom: 180,
@@ -145,7 +161,7 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         zIndex: 99999,
         elevation: 15,
-        shadowColor: AppColors.purple,
+        shadowColor: colors.purple,
         shadowOffset: { width: 0, height: 8 },
         shadowOpacity: 0.4,
         shadowRadius: 12,
@@ -155,7 +171,7 @@ const styles = StyleSheet.create({
         width: 60,
         height: 60,
         borderRadius: 30,
-        backgroundColor: `${AppColors.purple}25`,
+        backgroundColor: `${colors.purple}25`,
     },
     fab: {
         width: 56,
@@ -163,7 +179,8 @@ const styles = StyleSheet.create({
         borderRadius: 28,
         alignItems: 'center',
         justifyContent: 'center',
-        shadowColor: AppColors.shadowColorString,
+        backgroundColor: colors.purple,
+        shadowColor: colors.shadowColorString,
         shadowOffset: { width: 0, height: 6 },
         shadowOpacity: 0.35,
         shadowRadius: 10,
@@ -171,7 +188,7 @@ const styles = StyleSheet.create({
     },
     fabText: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.primaryLight,
+        color: colors.primaryLight,
         fontSize: 14,
     },
     fabBadge: {
@@ -185,58 +202,33 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         paddingHorizontal: 6,
         borderWidth: 2.5,
-        borderColor: AppColors.primaryLight,
-        shadowColor: AppColors.shadowColorString,
+        borderColor: colors.primaryLight,
+        shadowColor: colors.shadowColorString,
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.2,
         shadowRadius: 3,
         elevation: 3,
     },
-    fabBadgeNormal: { backgroundColor: AppColors.purple },
-    fabBadgeError: { backgroundColor: AppColors.errorColor },
+    fabBadgeNormal: { backgroundColor: colors.purple },
+    fabBadgeError: { backgroundColor: colors.errorColor },
     fabBadgeText: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.primaryLight,
+        color: colors.primaryLight,
         fontSize: 11,
     },
-    dashboardCard: {
-        marginHorizontal: 16,
-        marginBottom: 16,
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 16,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        shadowColor: '#000000',
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.09,
-        shadowRadius: 12,
-        elevation: 6,
-        overflow: 'hidden',
-    },
-    dashboardStatsRow: {
-        flexDirection: 'row',
-        paddingVertical: 14,
-        paddingHorizontal: 8,
-    },
     statBox: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
     },
-    dashboardStatDivider: {
-        width: 1,
-        backgroundColor: AppColors.dividerColor,
-        height: '80%',
-        alignSelf: 'center',
-    },
     statValue: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.primaryBlack,
+        color: colors.primaryBlack,
         fontSize: 14,
     },
     statLabel: {
         fontFamily: AppFonts.interMedium,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         fontSize: 10,
         marginTop: 4,
         textTransform: 'uppercase',
@@ -252,8 +244,8 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        paddingHorizontal: 16,
-        marginBottom: 14,
+        paddingHorizontal: 12,
+        marginBottom: 10,
         gap: 10,
         marginTop: 4,
     },
@@ -265,18 +257,18 @@ const styles = StyleSheet.create({
     toolbarDivider: {
         width: 1,
         height: 20,
-        backgroundColor: AppColors.dividerColor,
+        backgroundColor: colors.dividerColor,
         marginHorizontal: 2,
     },
     toolbarBtn: {
-        width: 40,
-        height: 40,
-        borderRadius: 20,
+        width: 34,
+        height: 34,
+        borderRadius: 17,
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: AppColors.primaryLight,
+        backgroundColor: colors.primaryLight,
         borderWidth: 1.5,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.04,
@@ -284,8 +276,8 @@ const styles = StyleSheet.create({
         elevation: 1,
     },
     toolbarBtnActive: {
-        borderColor: AppColors.purple,
-        backgroundColor: AppColors.purpleShade50,
+        borderColor: colors.purple,
+        backgroundColor: colors.purpleShade50,
         shadowOpacity: 0.08,
         shadowRadius: 3,
         elevation: 2,
@@ -294,46 +286,46 @@ const styles = StyleSheet.create({
         position: 'absolute',
         top: -4,
         right: -4,
-        backgroundColor: AppColors.errorColor,
+        backgroundColor: colors.errorColor,
         borderRadius: 10,
         minWidth: 18,
         height: 18,
         alignItems: 'center',
         justifyContent: 'center',
         borderWidth: 1.5,
-        borderColor: AppColors.primaryLight,
+        borderColor: colors.primaryLight,
     },
     trashBadgeText: {
-        color: AppColors.primaryLight,
+        color: colors.primaryLight,
         fontFamily: AppFonts.interBold,
         fontSize: 9,
     },
     filtersContainer: {
-        paddingHorizontal: 16,
-        paddingBottom: 16,
+        paddingHorizontal: 12,
+        paddingBottom: 10,
     },
     filtersHeading: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.grayTextStrong,
-        fontSize: 12,
+        color: colors.grayTextStrong,
+        fontSize: 11,
         textTransform: 'uppercase',
         letterSpacing: 0.6,
-        marginBottom: 8,
+        marginBottom: 6,
     },
     statusRowContent: {
         alignItems: 'center',
-        paddingVertical: 4,
+        paddingVertical: 2,
     },
-    statusFilterWrap: { marginRight: 8 },
+    statusFilterWrap: { marginRight: 6 },
     statusFilterChip: {
-        paddingHorizontal: 16,
-        height: 38,
+        paddingHorizontal: 10,
+        height: 30,
         justifyContent: 'center',
         alignItems: 'center',
         borderRadius: 24,
         borderWidth: 1.5,
-        borderColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.primaryLight,
+        borderColor: colors.grayBorderSecondary,
+        backgroundColor: colors.primaryLight,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.03,
@@ -341,17 +333,17 @@ const styles = StyleSheet.create({
         elevation: 1,
     },
     statusFilterActive: {
-        borderColor: AppColors.purple,
-        backgroundColor: AppColors.purpleShade50,
+        borderColor: colors.purple,
+        backgroundColor: colors.purpleShade50,
     },
     statusFilterText: {
         fontFamily: AppFonts.interMedium,
-        color: AppColors.grayText,
-        fontSize: 13,
+        color: colors.grayText,
+        fontSize: 11.5,
     },
     resultCount: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         fontSize: 12,
         marginHorizontal: 16,
         marginBottom: 8,
@@ -362,12 +354,12 @@ const styles = StyleSheet.create({
         flex: 1,
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: AppColors.primaryLight,
+        backgroundColor: colors.primaryLight,
         borderRadius: 24,
-        paddingHorizontal: 14,
-        paddingVertical: 6,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
         borderWidth: 1.5,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.04,
@@ -377,25 +369,25 @@ const styles = StyleSheet.create({
     searchInput: {
         flex: 1,
         fontFamily: AppFonts.interRegular,
-        color: AppColors.primaryBlack,
-        paddingVertical: Platform.OS === 'ios' ? 8 : 4,
-        marginLeft: 8,
+        color: colors.primaryBlack,
+        paddingVertical: Platform.OS === 'ios' ? 5 : 2,
+        marginLeft: 6,
         fontSize: 14,
     },
     clearBtn: { padding: 4 },
     clearBtnText: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         fontSize: 14,
     },
     menuDropdown: {
         position: 'absolute',
         top: Platform.OS === 'android' ? (StatusBar.currentHeight || 24) + 60 : 90,
         width: 170,
-        backgroundColor: AppColors.primaryLight,
+        backgroundColor: colors.primaryLight,
         borderRadius: 14,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
         zIndex: 999,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 8 },
@@ -407,13 +399,13 @@ const styles = StyleSheet.create({
     dropdownItem: {
         padding: 13,
         borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
+        borderBottomColor: colors.dividerColor,
     },
     domainHeaderSeparator: {
         marginTop: 12,
         paddingTop: 16,
         borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
+        borderTopColor: colors.dividerColor,
     },
     domainHeaderRow: {
         flexDirection: 'row',
@@ -448,7 +440,7 @@ const styles = StyleSheet.create({
     domainTimestamp: {
         fontFamily: AppFonts.interRegular,
         fontSize: 10,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
     },
     domainMethodCount: {
         fontFamily: AppFonts.interBold,
@@ -460,9 +452,9 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
         overflow: 'hidden',
-        backgroundColor: AppColors.grayBackground,
+        backgroundColor: colors.grayBackground,
     },
     groupBtnItem: {
         flexDirection: 'row',
@@ -473,7 +465,7 @@ const styles = StyleSheet.create({
     },
     groupBtnBorderRight: {
         borderRightWidth: 1,
-        borderRightColor: AppColors.grayBorderSecondary,
+        borderRightColor: colors.grayBorderSecondary,
     },
     domainStatText: {
         fontFamily: AppFonts.interBold,
@@ -525,10 +517,10 @@ const styles = StyleSheet.create({
         shadowRadius: 6,
         elevation: 3,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.primaryLight,
+        borderColor: colors.grayBorderSecondary,
+        backgroundColor: colors.primaryLight,
     },
-    cardBody: { paddingHorizontal: 12, paddingTop: 12, paddingBottom: 10 },
+    cardBody: { paddingHorizontal: 10, paddingTop: 8, paddingBottom: 8 },
     cardTopRow: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -539,19 +531,19 @@ const styles = StyleSheet.create({
         height: 13,
         borderRadius: 4,
         borderWidth: 1.5,
-        borderColor: AppColors.grayTextWeak,
+        borderColor: colors.grayTextWeak,
         alignItems: 'center',
         justifyContent: 'center',
         backgroundColor: '#fff',
         marginRight: 8,
     },
     smallCheckboxChecked: {
-        backgroundColor: AppColors.purple,
-        borderColor: AppColors.purple,
+        backgroundColor: colors.purple,
+        borderColor: colors.purple,
     },
     serialNumber: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         fontSize: 10,
         marginRight: 6,
         minWidth: 20,
@@ -588,7 +580,7 @@ const styles = StyleSheet.create({
     },
     cardDateText: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         fontSize: 10,
         letterSpacing: 0.2,
     },
@@ -600,19 +592,19 @@ const styles = StyleSheet.create({
     },
     urlPathText: {
         fontFamily: AppFonts.interMedium,
-        color: AppColors.primaryBlack,
+        color: colors.primaryBlack,
         fontSize: 13,
         flexShrink: 1,
     },
     urlDomainText: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayText,
+        color: colors.grayText,
         fontSize: 11,
         flex: 1,
     },
     requestTypeText: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayText,
+        color: colors.grayText,
         fontSize: 10,
     },
     methodBadge: {
@@ -633,7 +625,7 @@ const styles = StyleSheet.create({
     },
     timelineTrack: {
         height: 3,
-        backgroundColor: AppColors.graySurface,
+        backgroundColor: colors.graySurface,
         marginTop: 4,
         borderRadius: 1.5,
         overflow: 'hidden',
@@ -645,7 +637,7 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
     },
-    emptyIcon: { fontSize: 32, color: AppColors.grayTextWeak },
+    emptyIcon: { fontSize: 32, color: colors.grayTextWeak },
     emptyContainer: {
         flex: 1,
         alignItems: 'center',
@@ -657,7 +649,7 @@ const styles = StyleSheet.create({
         width: 72,
         height: 72,
         borderRadius: 36,
-        backgroundColor: AppColors.purpleShade50,
+        backgroundColor: colors.purpleShade50,
         alignItems: 'center',
         justifyContent: 'center',
         marginBottom: 20,
@@ -669,14 +661,14 @@ const styles = StyleSheet.create({
     },
     emptyTitle: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.grayTextStrong,
+        color: colors.grayTextStrong,
         fontSize: 18,
         marginBottom: 8,
         letterSpacing: 0.3,
     },
     emptySub: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         fontSize: 14,
         textAlign: 'center',
         lineHeight: 20,
@@ -686,9 +678,9 @@ const styles = StyleSheet.create({
         marginTop: 28,
         paddingHorizontal: 24,
         paddingVertical: 12,
-        backgroundColor: AppColors.purple,
+        backgroundColor: colors.purple,
         borderRadius: 24,
-        shadowColor: AppColors.purple,
+        shadowColor: colors.purple,
         shadowOffset: { width: 0, height: 4 },
         shadowOpacity: 0.35,
         shadowRadius: 8,
@@ -706,8 +698,8 @@ const styles = StyleSheet.create({
         paddingHorizontal: 10,
         marginBottom: 12,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.primaryLight,
+        borderColor: colors.grayBorderSecondary,
+        backgroundColor: colors.primaryLight,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.05,
@@ -727,11 +719,11 @@ const styles = StyleSheet.create({
         letterSpacing: 0.5,
     },
     detailUrlContainer: {
-        backgroundColor: AppColors.grayBackground,
+        backgroundColor: colors.grayBackground,
         borderRadius: 10,
         padding: 13,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.04,
@@ -740,16 +732,16 @@ const styles = StyleSheet.create({
     },
     detailUrl: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.purple,
+        color: colors.purple,
         fontSize: 13,
         lineHeight: 20,
         textDecorationLine: 'underline',
         letterSpacing: 0.2,
     },
     metaContainer: {
-        backgroundColor: AppColors.primaryLight,
+        backgroundColor: colors.primaryLight,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
         borderRadius: 14,
         marginBottom: 12,
         overflow: 'hidden',
@@ -766,19 +758,19 @@ const styles = StyleSheet.create({
         paddingHorizontal: 12,
         paddingVertical: 10,
         borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-        backgroundColor: AppColors.primaryLight,
+        borderBottomColor: colors.dividerColor,
+        backgroundColor: colors.primaryLight,
     },
     metaTitle: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.grayTextStrong,
+        color: colors.grayTextStrong,
         fontSize: 12,
         letterSpacing: 0.6,
         textTransform: 'uppercase',
     },
     metaChevron: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         fontSize: 11,
     },
     metaBody: { paddingHorizontal: 12, paddingBottom: 8, paddingTop: 4 },
@@ -788,16 +780,16 @@ const styles = StyleSheet.create({
         justifyContent: 'space-between',
         paddingVertical: 8,
     },
-    metaDivider: { height: 1, backgroundColor: AppColors.dividerColor },
+    metaDivider: { height: 1, backgroundColor: colors.dividerColor },
     metaLabelRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
     metaLabel: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayText,
+        color: colors.grayText,
         fontSize: 13,
     },
     metaValue: {
         fontFamily: AppFonts.interMedium,
-        color: AppColors.primaryBlack,
+        color: colors.primaryBlack,
         fontSize: 13,
     },
     metaValueRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
@@ -813,7 +805,7 @@ const styles = StyleSheet.create({
     },
     seperator: {
         height: 1,
-        backgroundColor: AppColors.dividerColor,
+        backgroundColor: colors.dividerColor,
         marginVertical: 10,
     },
     detailSearchRow: {
@@ -826,22 +818,22 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        backgroundColor: AppColors.primaryLight,
+        backgroundColor: colors.primaryLight,
         borderRadius: 12,
         paddingLeft: 16,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
     },
     detailSearchInput: {
         flex: 1,
         fontFamily: AppFonts.interRegular,
-        color: AppColors.primaryBlack,
+        color: colors.primaryBlack,
         height: 40,
     },
     sectionContainer: {
-        backgroundColor: AppColors.primaryLight,
+        backgroundColor: colors.primaryLight,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
         borderRadius: 12,
         marginBottom: 10,
         overflow: 'hidden',
@@ -851,7 +843,7 @@ const styles = StyleSheet.create({
         paddingVertical: 12,
         paddingHorizontal: 8,
         borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
+        borderBottomColor: colors.dividerColor,
     },
     sectionHeaderRow: {
         flexDirection: 'row',
@@ -867,16 +859,16 @@ const styles = StyleSheet.create({
     },
     sectionTitle: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.grayTextStrong,
+        color: colors.grayTextStrong,
         fontSize: 14,
         flexShrink: 1,
     },
     sectionHeaderActions: { flexDirection: 'row', alignItems: 'center', gap: 6 },
     htCard: {
-        backgroundColor: AppColors.primaryLight,
+        backgroundColor: colors.primaryLight,
         borderRadius: 12,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
         borderLeftWidth: 3,
         marginBottom: 10,
         overflow: 'hidden',
@@ -888,8 +880,8 @@ const styles = StyleSheet.create({
         paddingVertical: 10,
         gap: 8,
         borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-        backgroundColor: AppColors.primaryLight,
+        borderBottomColor: colors.dividerColor,
+        backgroundColor: colors.primaryLight,
     },
     htIconWrap: {
         width: 28,
@@ -900,7 +892,7 @@ const styles = StyleSheet.create({
     },
     htTitle: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.grayTextStrong,
+        color: colors.grayTextStrong,
         fontSize: 13,
         flexShrink: 1,
     },
@@ -920,8 +912,8 @@ const styles = StyleSheet.create({
         height: 30,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.primaryLight,
+        borderColor: colors.grayBorderSecondary,
+        backgroundColor: colors.primaryLight,
         alignItems: 'center',
         justifyContent: 'center',
     },
@@ -929,13 +921,13 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         paddingHorizontal: 8,
         paddingVertical: 6,
-        backgroundColor: AppColors.graySurface,
+        backgroundColor: colors.graySurface,
         borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
+        borderBottomColor: colors.dividerColor,
     },
     htColHead: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         fontSize: 10,
         letterSpacing: 0.8,
         textTransform: 'uppercase',
@@ -948,7 +940,7 @@ const styles = StyleSheet.create({
     },
     htRowBorder: {
         borderBottomWidth: StyleSheet.hairlineWidth,
-        borderBottomColor: AppColors.dividerColor,
+        borderBottomColor: colors.dividerColor,
     },
     htKeyCell: {
         width: '30%',
@@ -957,13 +949,13 @@ const styles = StyleSheet.create({
     },
     htKey: {
         fontFamily: AppFonts.interMedium,
-        color: AppColors.purple,
+        color: colors.purple,
         fontSize: 11,
         lineHeight: 16,
     },
     htCellDivider: {
         width: StyleSheet.hairlineWidth,
-        backgroundColor: AppColors.dividerColor,
+        backgroundColor: colors.dividerColor,
         alignSelf: 'stretch',
         marginVertical: 4,
     },
@@ -974,7 +966,7 @@ const styles = StyleSheet.create({
     },
     htValue: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.primaryBlack,
+        color: colors.primaryBlack,
         fontSize: 11,
         lineHeight: 17,
     },
@@ -983,7 +975,7 @@ const styles = StyleSheet.create({
     },
     htExpandText: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.purple,
+        color: colors.purple,
         fontSize: 10,
         letterSpacing: 0.3,
     },
@@ -1000,7 +992,7 @@ const styles = StyleSheet.create({
     },
     htEmptyText: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         fontSize: 12,
     },
     iconSquareBtn: {
@@ -1008,18 +1000,18 @@ const styles = StyleSheet.create({
         height: 30,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        backgroundColor: AppColors.grayBackground,
+        borderColor: colors.grayBorderSecondary,
+        backgroundColor: colors.grayBackground,
         alignItems: 'center',
         justifyContent: 'center',
     },
     iconSquareBtnSuccess: {
-        borderColor: AppColors.greenColor,
-        backgroundColor: AppColors.greenStatus,
+        borderColor: colors.greenColor,
+        backgroundColor: colors.greenStatus,
     },
     iconSquareBtnActive: {
-        borderColor: AppColors.skyBlue,
-        backgroundColor: AppColors.purpleShade50,
+        borderColor: colors.skyBlue,
+        backgroundColor: colors.purpleShade50,
     },
     codeBlockScroll: { width: '100%', backgroundColor: 'transparent' },
     codeBlock: {
@@ -1029,35 +1021,35 @@ const styles = StyleSheet.create({
         minWidth: '100%',
     },
     codeSyntax: {
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
     },
     codeKey: {
-        color: AppColors.purple,
+        color: colors.purple,
         fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
     },
     codeText: {
-        color: AppColors.greenBaggageText,
+        color: colors.greenBaggageText,
         fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
     },
     codeTextNil: {
-        color: AppColors.errorColor,
+        color: colors.errorColor,
         fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
     },
     treeRow: { flexDirection: 'row', alignItems: 'center', paddingVertical: 6 },
     treeChevron: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         marginRight: 8,
     },
     treeKeyMargin: { marginRight: 6 },
     highlight: {
-        backgroundColor: AppColors.paleYellow,
-        color: AppColors.primaryBlack,
+        backgroundColor: colors.paleYellow,
+        color: colors.primaryBlack,
     },
     arrayBadge: {
-        backgroundColor: AppColors.purpleShade50,
-        borderColor: AppColors.purple,
+        backgroundColor: colors.purpleShade50,
+        borderColor: colors.purple,
         borderWidth: 1,
         borderRadius: 6,
         paddingHorizontal: 6,
@@ -1065,12 +1057,12 @@ const styles = StyleSheet.create({
     },
     arrayBadgeText: {
         fontFamily: AppFonts.interMedium,
-        color: AppColors.purple,
+        color: colors.purple,
         fontSize: 11,
     },
     objectBadge: {
-        backgroundColor: AppColors.grayBackground,
-        borderColor: AppColors.grayTextWeak,
+        backgroundColor: colors.grayBackground,
+        borderColor: colors.grayTextWeak,
         borderWidth: 1,
         borderRadius: 6,
         paddingHorizontal: 6,
@@ -1078,22 +1070,22 @@ const styles = StyleSheet.create({
     },
     objectBadgeText: {
         fontFamily: AppFonts.interMedium,
-        color: AppColors.grayTextWeak,
+        color: colors.grayTextWeak,
         fontSize: 11,
     },
     diffBlock: { paddingTop: 12, paddingHorizontal: 12, paddingBottom: 16, gap: 4 },
     diffAdded: {
-        color: AppColors.greenColor,
+        color: colors.greenColor,
         fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
         fontSize: 12,
     },
     diffRemoved: {
-        color: AppColors.errorColor,
+        color: colors.errorColor,
         fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
         fontSize: 12,
     },
     diffChanged: {
-        color: AppColors.lightOrange,
+        color: colors.lightOrange,
         fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
         fontSize: 12,
     },
@@ -1101,11 +1093,11 @@ const styles = StyleSheet.create({
     filePreviewCard: {
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: AppColors.grayBackground,
+        backgroundColor: colors.grayBackground,
         borderRadius: 10,
         padding: 10,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
         gap: 12,
         maxWidth: 300,
     },
@@ -1113,25 +1105,25 @@ const styles = StyleSheet.create({
         width: 44,
         height: 44,
         borderRadius: 6,
-        backgroundColor: AppColors.grayBorderSecondary,
+        backgroundColor: colors.grayBorderSecondary,
     },
     filePreviewDoc: {
         width: 44,
         height: 44,
         borderRadius: 6,
-        backgroundColor: AppColors.graySurface,
+        backgroundColor: colors.graySurface,
         alignItems: 'center',
         justifyContent: 'center',
     },
     filePreviewName: {
         fontFamily: AppFonts.interMedium,
-        color: AppColors.primaryBlack,
+        color: colors.primaryBlack,
         fontSize: 13,
         marginBottom: 2,
     },
     filePreviewType: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayText,
+        color: colors.grayText,
         fontSize: 11,
     },
     imagePreviewWrapper: {
@@ -1140,9 +1132,9 @@ const styles = StyleSheet.create({
         borderRadius: 12,
         overflow: 'hidden',
         marginBottom: 16,
-        backgroundColor: AppColors.grayBackground,
+        backgroundColor: colors.grayBackground,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
     },
     imagePreview: {
         width: '100%',
@@ -1165,9 +1157,9 @@ const styles = StyleSheet.create({
         elevation: 3,
     },
     sourcePageCard: {
-        backgroundColor: AppColors.primaryLight,
+        backgroundColor: colors.primaryLight,
         borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
         borderRadius: 12,
         marginBottom: 10,
         overflow: 'hidden',
@@ -1179,8 +1171,8 @@ const styles = StyleSheet.create({
         paddingHorizontal: 12,
         paddingVertical: 10,
         borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-        backgroundColor: AppColors.primaryLight,
+        borderBottomColor: colors.dividerColor,
+        backgroundColor: colors.primaryLight,
     },
     sourcePageTop: {
         flexDirection: 'row',
@@ -1197,26 +1189,26 @@ const styles = StyleSheet.create({
         width: 36,
         height: 36,
         borderRadius: 10,
-        backgroundColor: AppColors.purpleShade50,
+        backgroundColor: colors.purpleShade50,
         borderWidth: 1,
-        borderColor: `${AppColors.purple}30`,
+        borderColor: `${colors.purple}30`,
         alignItems: 'center',
         justifyContent: 'center',
     },
     sourcePageLabel: {
         fontFamily: AppFonts.interRegular,
-        color: AppColors.grayText,
+        color: colors.grayText,
         fontSize: 11,
         marginBottom: 2,
     },
     sourcePageValue: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.purple,
+        color: colors.purple,
         fontSize: 14,
     },
     sourceParamsBox: {
         borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
+        borderTopColor: colors.dividerColor,
     },
     paramsAccordionHeader: {
         flexDirection: 'row',
@@ -1225,7 +1217,7 @@ const styles = StyleSheet.create({
         paddingHorizontal: 12,
         paddingVertical: 10,
         borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
+        borderBottomColor: colors.dividerColor,
         backgroundColor: '#fafafa',
     },
     paramsAccordionLeft: {
@@ -1240,7 +1232,7 @@ const styles = StyleSheet.create({
     },
     sourceParamsLabel: {
         fontFamily: AppFonts.interBold,
-        color: AppColors.grayTextStrong,
+        color: colors.grayTextStrong,
         fontSize: 12,
         letterSpacing: 0.4,
         textTransform: 'uppercase',
@@ -1259,11 +1251,11 @@ const styles = StyleSheet.create({
     },
     paramRowBorder: {
         borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
+        borderBottomColor: colors.dividerColor,
     },
     paramKey: {
         fontFamily: AppFonts.Sfprotext,
-        color: AppColors.purple,
+        color: colors.purple,
         fontSize: 12,
         flex: 1,
     },
@@ -1276,7 +1268,7 @@ const styles = StyleSheet.create({
     },
     paramValue: {
         fontFamily: AppFonts.Sfprotext,
-        color: AppColors.greenBaggageText,
+        color: colors.greenBaggageText,
         fontSize: 12,
         textAlign: 'right',
         flexShrink: 1,
@@ -1298,7 +1290,7 @@ const styles = StyleSheet.create({
     // ─── Tab Bar ───────────────────────────────────────────────────────────────
     tabBar: {
         flexDirection: 'row',
-        backgroundColor: AppColors.grayBackground,
+        backgroundColor: colors.grayBackground,
         paddingHorizontal: 12,
         paddingTop: 10,
         paddingBottom: 4,
@@ -1313,8 +1305,8 @@ const styles = StyleSheet.create({
         backgroundColor: '#EDEDF4',
     },
     tabItemActive: {
-        backgroundColor: AppColors.purple,
-        shadowColor: AppColors.purple,
+        backgroundColor: colors.purple,
+        shadowColor: colors.purple,
         shadowOpacity: 0.3,
         shadowRadius: 6,
         shadowOffset: { width: 0, height: 2 },
@@ -1323,7 +1315,7 @@ const styles = StyleSheet.create({
     tabText: {
         fontFamily: AppFonts.interBold,
         fontSize: 13,
-        color: AppColors.grayText,
+        color: colors.grayText,
     },
     tabTextActive: {
         color: '#FFFFFF',
@@ -1338,18 +1330,229 @@ const styles = StyleSheet.create({
         backgroundColor: '#F7F7FA',
         borderTopWidth: 1,
         borderBottomWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
+        borderColor: colors.grayBorderSecondary,
         marginTop: 8,
     },
     screenSectionTitle: {
         fontFamily: AppFonts.interBold,
         fontSize: 13,
-        color: AppColors.primaryBlack,
+        color: colors.primaryBlack,
     },
     screenSectionCount: {
         fontFamily: AppFonts.interMedium,
         fontSize: 12,
-        color: AppColors.grayText,
+        color: colors.grayText,
+    },
+    modalBackdrop: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.45)',
+        justifyContent: 'flex-end',
+    },
+    modalBackdropPressable: {
+        ...StyleSheet.absoluteFill,
+    },
+    modalContentCard: {
+        height: '90%',
+        backgroundColor: colors.grayBackground,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        overflow: 'hidden',
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: -4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 10,
+        elevation: 24,
+    },
+    tabBarContainer: {
+        backgroundColor: colors.primaryLight,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.dividerColor,
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+    },
+    contentTabButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 8,
+        marginRight: 10,
+        backgroundColor: colors.grayBackground,
+        borderWidth: 1,
+        borderColor: colors.dividerColor,
+    },
+    contentTabButtonActive: {
+        backgroundColor: colors.purple,
+        borderColor: colors.purple,
+        shadowColor: colors.purple,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.12,
+        shadowRadius: 3,
+        elevation: 3,
+    },
+    contentTabButtonText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11.5,
+        color: colors.grayText,
+    },
+    contentTabButtonTextActive: {
+        color: '#FFFFFF',
+        fontWeight: 'bold',
+    },
+    insightsContainer: {
+        flex: 1,
+        backgroundColor: colors.grayBackground,
+    },
+    insightsContent: {
+        padding: 10,
+        paddingBottom: 24,
+    },
+    dashboardContainer: {
+        gap: 10,
+    },
+    dashboardModuleCard: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: '#EFEFEF',
+        padding: 12,
+        shadowColor: '#000000',
+        shadowOpacity: 0.03,
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+    },
+    dashboardModuleHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: '#F3F4F6',
+        paddingBottom: 8,
+    },
+    dashboardModuleTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13,
+        color: colors.primaryBlack,
+    },
+    dashboardModuleGoText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: colors.purple,
+    },
+    dashboardModuleGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        gap: 8,
+    },
+    dashboardGridItem: {
+        flex: 1,
+        minWidth: '22%',
+        backgroundColor: '#F8FAFC',
+        borderRadius: 8,
+        paddingVertical: 8,
+        paddingHorizontal: 4,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    dashboardGridVal: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13,
+        color: colors.primaryBlack,
+    },
+    dashboardGridLbl: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10,
+        color: colors.grayTextWeak,
+        marginTop: 2,
+    },
+    analyticsCardRow: {},
+    analyticsTopEventsCard: {
+        marginHorizontal: 16,
+        marginBottom: 12,
+        backgroundColor: colors.primaryLight,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: colors.grayBorderSecondary,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        shadowColor: '#000',
+        shadowOpacity: 0.04,
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+    },
+    analyticsTopEventsHeaderRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 12,
+    },
+    analyticsTopEventsTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10,
+        color: colors.grayTextWeak,
+        letterSpacing: 0.8,
+        textTransform: 'uppercase',
+    },
+    analyticsTopEventsSubtitle: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 9,
+        color: colors.grayTextWeak,
+        letterSpacing: 0.4,
+    },
+    analyticsTopEventRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 8,
+        gap: 8,
+    },
+    analyticsTopEventName: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 12,
+        color: colors.primaryBlack,
+        flex: 1,
+    },
+    analyticsTopEventBarWrap: {
+        flex: 0.8,
+        height: 3,
+        backgroundColor: colors.grayBackground,
+        borderRadius: 2,
+        overflow: 'hidden',
+    },
+    analyticsTopEventBar: {
+        height: '100%',
+        borderRadius: 2,
+    },
+    analyticsTopEventCount: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
+        color: colors.grayText,
+        width: 24,
+        textAlign: 'right',
+    },
+    analyticsIconCircle: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
 });
+const styles = {};
+const rebuildStyles = (isDark) => {
+    const colors = isDark ? getThemeColors(true) : AppColors;
+    const newStyles = getRawStyles(colors);
+    // Clear old keys and copy new ones
+    Object.keys(styles).forEach(key => delete styles[key]);
+    Object.assign(styles, newStyles);
+};
+// Initial build
+rebuildStyles(false);
+export const toggleGlobalTheme = (isDark) => {
+    updateAppColorsTheme(isDark);
+    rebuildStyles(isDark);
+};
 export default styles;