space/time-until
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 7 Wiki Activity

first commit
Some checks failed
Build App / build (push) Failing after 3m26s
Details

Browse Source
This commit is contained in:
Space-Banane
2026-03-10 18:30:58 +01:00
commit 56752ec677
20 changed files with 10244 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/CountdownRow.js Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import { Text, View } from 'react-native';
function pad(n) {
return String(n).padStart(2, '0');
}
export default function CountdownRow({ styles, cd, accent, subText, pinkMode, numStyle, sepStyle }) {
const outline = pinkMode
? {
borderColor: '#ff4fa3',
borderWidth: 1.5,
borderRadius: 10,
paddingHorizontal: 8,
}
: {};
return (
<View style={styles.countdownRow}>
{cd.hours > 0 && (
<>
<View style={styles.timeBlock}>
<Text style={[numStyle, { color: accent }, outline]}>{pad(cd.hours)}</Text>
<Text style={[styles.countdownUnit, { color: subText }]}>HRS</Text>
</View>
<Text style={[sepStyle, { color: accent }]}>:</Text>
</>
)}
<View style={styles.timeBlock}>
<Text style={[numStyle, { color: accent }, outline]}>{pad(cd.minutes)}</Text>
<Text style={[styles.countdownUnit, { color: subText }]}>MIN</Text>
</View>
<Text style={[sepStyle, { color: accent }]}>:</Text>
<View style={styles.timeBlock}>
<Text style={[numStyle, { color: accent }, outline]}>{pad(cd.seconds)}</Text>
<Text style={[styles.countdownUnit, { color: subText }]}>SEC</Text>
</View>
</View>
);
}

70
src/components/TopControls.js Normal file
View File

@@ -0,0 +1,70 @@
import React from 'react';
import { Platform, Text, TouchableOpacity, View } from 'react-native';
export default function TopControls({
styles,
accent,
pink,
darkMode,
pinkMode,
isFullscreen,
showBackToMenu,
showFocus,
onBackToMenu,
onToggleDark,
onTogglePink,
onToggleFullscreen,
onFocus,
}) {
return (
<View style={styles.topRow}>
{showBackToMenu && (
<TouchableOpacity
style={[styles.backMenuBtn, { borderColor: accent, backgroundColor: `${accent}1f` }]}
onPress={onBackToMenu}
>
<Text style={[styles.toggleText, { color: accent }]}>Back To Menu</Text>
</TouchableOpacity>
)}
<View style={styles.toggleRow}>
<TouchableOpacity
style={[styles.toggleBtn, { borderColor: accent, backgroundColor: `${accent}1f` }]}
onPress={onToggleDark}
>
<Text style={[styles.toggleText, { color: accent }]}>{darkMode ? 'Light' : 'Dark'}</Text>
</TouchableOpacity>
<TouchableOpacity
style={[
styles.toggleBtn,
{ borderColor: pink, backgroundColor: pinkMode ? `${pink}33` : 'transparent' },
]}
onPress={onTogglePink}
>
<Text style={[styles.toggleText, { color: pink }]}>Pink</Text>
</TouchableOpacity>
{Platform.OS === 'web' && (
<TouchableOpacity
style={[styles.toggleBtn, { borderColor: accent, backgroundColor: `${accent}14` }]}
onPress={onToggleFullscreen}
>
<Text style={[styles.toggleText, { color: accent }]}>
{isFullscreen ? 'Exit Full' : 'Fullscreen'}
</Text>
</TouchableOpacity>
)}
{showFocus && (
<TouchableOpacity
style={[styles.toggleBtn, { borderColor: accent, backgroundColor: `${accent}1f` }]}
onPress={onFocus}
>
<Text style={[styles.toggleText, { color: accent }]}>Focus</Text>
</TouchableOpacity>
)}
</View>
</View>
);
}

86
src/screens/FocusScreen.js Normal file
View File

@@ -0,0 +1,86 @@
import React from 'react';
import { StatusBar, Text, TouchableOpacity, View } from 'react-native';
import CountdownRow from '../components/CountdownRow';
export default function FocusScreen({
styles,
theme,
screen,
pinkMode,
tuIsOver,
tuCountdown,
targetTime,
timerDone,
timerHr,
timerMin,
timerSec,
onShowUI,
}) {
const pinkOutlineText = pinkMode
? {
borderColor: theme.pink,
borderWidth: 2,
borderRadius: 12,
paddingHorizontal: 20,
paddingVertical: 8,
}
: {};
let focusContent = null;
if (screen === 'timeuntil') {
focusContent = tuIsOver ? (
<Text style={[styles.overText, styles.focusOverText, { color: pinkMode ? theme.pink : theme.danger }, pinkOutlineText]}>
Time's Up!
</Text>
) : tuCountdown ? (
<View style={styles.focusCountdown}>
<Text style={[styles.focusLabel, { color: theme.subText }]}>
until {targetTime?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</Text>
<CountdownRow
styles={styles}
cd={tuCountdown}
accent={theme.accent}
subText={theme.subText}
pinkMode={pinkMode}
numStyle={styles.focusNum}
sepStyle={styles.focusSep}
/>
</View>
) : (
<Text style={[styles.placeholder, { color: theme.subText }]}>No timer set</Text>
);
}
if (screen === 'timer') {
focusContent = timerDone ? (
<Text style={[styles.overText, styles.focusOverText, { color: pinkMode ? theme.pink : theme.danger }, pinkOutlineText]}>
Done!
</Text>
) : (
<View style={styles.focusCountdown}>
<Text style={[styles.focusLabel, { color: theme.subText }]}>TIMER</Text>
<CountdownRow
styles={styles}
cd={{ hours: timerHr, minutes: timerMin, seconds: timerSec }}
accent={theme.accent}
subText={theme.subText}
pinkMode={pinkMode}
numStyle={styles.focusNum}
sepStyle={styles.focusSep}
/>
</View>
);
}
return (
<View style={[styles.root, styles.focusRoot, { backgroundColor: theme.bg }]}>
<StatusBar hidden />
{focusContent}
<TouchableOpacity style={[styles.focusExitBtn, { borderColor: theme.accent }]} onPress={onShowUI}>
<Text style={[styles.focusExitText, { color: theme.accent }]}>Show UI</Text>
</TouchableOpacity>
</View>
);
}

87
src/screens/HomeScreen.js Normal file
View File

@@ -0,0 +1,87 @@
import React from 'react';
import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
import TopControls from '../components/TopControls';
export default function HomeScreen({
styles,
theme,
now,
pinkMode,
darkMode,
isFullscreen,
onToggleDark,
onTogglePink,
onToggleFullscreen,
onSelectTimeUntil,
onSelectTimer,
}) {
return (
<View style={[styles.root, { backgroundColor: theme.bg }]}>
<ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
<Text
style={[
styles.title,
{ color: theme.accent },
pinkMode && {
borderColor: theme.accent,
borderWidth: 2,
borderRadius: 10,
paddingHorizontal: 16,
paddingVertical: 4,
},
]}
>
Time Until
</Text>
<TopControls
styles={styles}
accent={theme.accent}
pink={theme.pink}
darkMode={darkMode}
pinkMode={pinkMode}
isFullscreen={isFullscreen}
showBackToMenu={false}
showFocus={false}
onBackToMenu={() => {}}
onToggleDark={onToggleDark}
onTogglePink={onTogglePink}
onToggleFullscreen={onToggleFullscreen}
onFocus={() => {}}
/>
<Text style={[styles.modeSelectLabel, { color: theme.subText }]}>SELECT MODE</Text>
<TouchableOpacity
style={[styles.modeCard, { backgroundColor: theme.cardBg, borderColor: theme.accent }]}
onPress={onSelectTimeUntil}
activeOpacity={0.75}
>
<Text style={[styles.modeTitle, { color: theme.accent }]}>Mode 1: Time Until</Text>
<Text style={[styles.modeDesc, { color: theme.subText }]}>
Set a target clock time and count down to it
</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.modeCard, { backgroundColor: theme.cardBg, borderColor: theme.border }]}
onPress={onSelectTimer}
activeOpacity={0.75}
>
<Text style={[styles.modeTitle, { color: theme.accent }]}>Mode 2: Timer</Text>
<Text style={[styles.modeDesc, { color: theme.subText }]}>
Set duration in hours, minutes, and seconds
</Text>
</TouchableOpacity>
<Text style={[styles.clock, { color: theme.subText, marginTop: 32 }]}>
{now.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
})}
</Text>
</ScrollView>
</View>
);
}

173
src/screens/TimeUntilScreen.js Normal file
View File

@@ -0,0 +1,173 @@
import React from 'react';
import { ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
import CountdownRow from '../components/CountdownRow';
import TopControls from '../components/TopControls';
export default function TimeUntilScreen({
styles,
theme,
now,
darkMode,
pinkMode,
isFullscreen,
targetTime,
tuHour,
tuMinute,
tuIsOver,
tuCountdown,
onChangeHour,
onChangeMinute,
onSetTimer,
onResetTimer,
onBackToMenu,
onToggleDark,
onTogglePink,
onToggleFullscreen,
onFocus,
}) {
const isCountingDown = Boolean(tuCountdown) && !tuIsOver;
const pinkOutlineText = pinkMode
? {
borderColor: theme.pink,
borderWidth: 2,
borderRadius: 12,
paddingHorizontal: 20,
paddingVertical: 8,
}
: {};
return (
<View style={[styles.root, { backgroundColor: theme.bg }]}>
<ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
<Text
style={[
styles.title,
{ color: theme.accent },
pinkMode && {
borderColor: theme.accent,
borderWidth: 2,
borderRadius: 10,
paddingHorizontal: 16,
paddingVertical: 4,
},
]}
>
Time Until
</Text>
<TopControls
styles={styles}
accent={theme.accent}
pink={theme.pink}
darkMode={darkMode}
pinkMode={pinkMode}
isFullscreen={isFullscreen}
showBackToMenu
showFocus={targetTime !== null || tuIsOver}
onBackToMenu={onBackToMenu}
onToggleDark={onToggleDark}
onTogglePink={onTogglePink}
onToggleFullscreen={onToggleFullscreen}
onFocus={onFocus}
/>
<View style={[styles.card, { backgroundColor: theme.cardBg, borderColor: theme.border }]}>
{!isCountingDown && (
<>
<Text style={[styles.inputLabel, { color: theme.subText }]}>Set target time (24h)</Text>
<View style={styles.inputRow}>
<TextInput
style={[
styles.timeInput,
{ color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
]}
placeholder="HH"
placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
value={tuHour}
onChangeText={onChangeHour}
keyboardType="numeric"
maxLength={2}
/>
<Text style={[styles.colon, { color: theme.accent }]}>:</Text>
<TextInput
style={[
styles.timeInput,
{ color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
]}
placeholder="MM"
placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
value={tuMinute}
onChangeText={onChangeMinute}
keyboardType="numeric"
maxLength={2}
/>
</View>
<View style={styles.btnRow}>
<TouchableOpacity style={[styles.setBtn, { backgroundColor: theme.accent }]} onPress={onSetTimer}>
<Text style={styles.setBtnText}>Set Timer</Text>
</TouchableOpacity>
{targetTime && (
<TouchableOpacity
style={[styles.resetBtn, { borderColor: theme.accent }]}
onPress={onResetTimer}
>
<Text style={[styles.resetBtnText, { color: theme.accent }]}>Reset</Text>
</TouchableOpacity>
)}
</View>
</>
)}
{isCountingDown && targetTime && (
<View style={styles.btnRow}>
<TouchableOpacity
style={[styles.resetBtn, { borderColor: theme.accent }]}
onPress={onResetTimer}
>
<Text style={[styles.resetBtnText, { color: theme.accent }]}>Reset</Text>
</TouchableOpacity>
</View>
)}
{tuIsOver ? (
<View style={styles.overContainer}>
<Text style={[styles.overText, { color: pinkMode ? theme.pink : theme.danger }, pinkOutlineText]}>
Time's Up!
</Text>
<Text style={[styles.overSub, { color: theme.subText }]}>
{targetTime?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} has been reached
</Text>
</View>
) : tuCountdown ? (
<View style={styles.countdownContainer}>
<Text style={[styles.countdownLabel, { color: theme.subText }]}>
until {targetTime?.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</Text>
<CountdownRow
styles={styles}
cd={tuCountdown}
accent={theme.accent}
subText={theme.subText}
pinkMode={pinkMode}
numStyle={styles.countdownNum}
sepStyle={styles.sep}
/>
</View>
) : (
<Text style={[styles.placeholder, { color: theme.subText }]}>Enter a time above to start counting down</Text>
)}
</View>
<Text style={[styles.clock, { color: theme.subText }]}>
{now.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
})}
</Text>
</ScrollView>
</View>
);
}

195
src/screens/TimerScreen.js Normal file
View File

@@ -0,0 +1,195 @@
import React from 'react';
import { ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
import CountdownRow from '../components/CountdownRow';
import TopControls from '../components/TopControls';
export default function TimerScreen({
styles,
theme,
now,
darkMode,
pinkMode,
isFullscreen,
timerRunning,
timerDone,
timerRemaining,
timerHInput,
timerMInput,
timerSInput,
timerHr,
timerMin,
timerSec,
onChangeH,
onChangeM,
onChangeS,
onStart,
onPause,
onResume,
onReset,
onBackToMenu,
onToggleDark,
onTogglePink,
onToggleFullscreen,
onFocus,
}) {
const timerActive = timerRunning || timerRemaining > 0 || timerDone;
const isCountingDown = timerRemaining > 0;
const pinkOutlineText = pinkMode
? {
borderColor: theme.pink,
borderWidth: 2,
borderRadius: 12,
paddingHorizontal: 20,
paddingVertical: 8,
}
: {};
return (
<View style={[styles.root, { backgroundColor: theme.bg }]}>
<ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
<Text
style={[
styles.title,
{ color: theme.accent },
pinkMode && {
borderColor: theme.accent,
borderWidth: 2,
borderRadius: 10,
paddingHorizontal: 16,
paddingVertical: 4,
},
]}
>
Timer
</Text>
<TopControls
styles={styles}
accent={theme.accent}
pink={theme.pink}
darkMode={darkMode}
pinkMode={pinkMode}
isFullscreen={isFullscreen}
showBackToMenu
showFocus={timerActive}
onBackToMenu={onBackToMenu}
onToggleDark={onToggleDark}
onTogglePink={onTogglePink}
onToggleFullscreen={onToggleFullscreen}
onFocus={onFocus}
/>
<View style={[styles.card, { backgroundColor: theme.cardBg, borderColor: theme.border }]}>
{!isCountingDown && !timerDone ? (
<>
<Text style={[styles.inputLabel, { color: theme.subText }]}>Set duration</Text>
<View style={styles.inputRow}>
<View style={styles.timerInputGroup}>
<TextInput
style={[
styles.timeInput,
{ color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
]}
placeholder="00"
placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
value={timerHInput}
onChangeText={onChangeH}
keyboardType="numeric"
maxLength={2}
/>
<Text style={[styles.inputUnit, { color: theme.subText }]}>HRS</Text>
</View>
<Text style={[styles.colon, { color: theme.accent }]}>:</Text>
<View style={styles.timerInputGroup}>
<TextInput
style={[
styles.timeInput,
{ color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
]}
placeholder="00"
placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
value={timerMInput}
onChangeText={onChangeM}
keyboardType="numeric"
maxLength={2}
/>
<Text style={[styles.inputUnit, { color: theme.subText }]}>MIN</Text>
</View>
<Text style={[styles.colon, { color: theme.accent }]}>:</Text>
<View style={styles.timerInputGroup}>
<TextInput
style={[
styles.timeInput,
{ color: theme.text, borderColor: theme.accent, backgroundColor: theme.inputBg },
]}
placeholder="00"
placeholderTextColor={darkMode ? '#5a6886' : '#98a1ba'}
value={timerSInput}
onChangeText={onChangeS}
keyboardType="numeric"
maxLength={2}
/>
<Text style={[styles.inputUnit, { color: theme.subText }]}>SEC</Text>
</View>
</View>
<TouchableOpacity style={[styles.setBtn, { backgroundColor: theme.accent }]} onPress={onStart}>
<Text style={styles.setBtnText}>Start</Text>
</TouchableOpacity>
</>
) : timerDone ? (
<View style={styles.overContainer}>
<Text style={[styles.overText, { color: pinkMode ? theme.pink : theme.danger }, pinkOutlineText]}>
Done!
</Text>
<TouchableOpacity
style={[styles.setBtn, { backgroundColor: theme.accent, marginTop: 20 }]}
onPress={onReset}
>
<Text style={styles.setBtnText}>New Timer</Text>
</TouchableOpacity>
</View>
) : (
<View style={styles.countdownContainer}>
<View>
<CountdownRow
styles={styles}
cd={{ hours: timerHr, minutes: timerMin, seconds: timerSec }}
accent={theme.accent}
subText={theme.subText}
pinkMode={pinkMode}
numStyle={styles.countdownNum}
sepStyle={styles.sep}
/>
</View>
<View style={styles.btnRow}>
{timerRunning ? (
<TouchableOpacity style={[styles.resetBtn, { borderColor: theme.accent }]} onPress={onPause}>
<Text style={[styles.resetBtnText, { color: theme.accent }]}>Pause</Text>
</TouchableOpacity>
) : (
<TouchableOpacity style={[styles.setBtn, { backgroundColor: theme.accent }]} onPress={onResume}>
<Text style={styles.setBtnText}>Resume</Text>
</TouchableOpacity>
)}
<TouchableOpacity style={[styles.resetBtn, { borderColor: theme.danger }]} onPress={onReset}>
<Text style={[styles.resetBtnText, { color: theme.danger }]}>Reset</Text>
</TouchableOpacity>
</View>
</View>
)}
</View>
<Text style={[styles.clock, { color: theme.subText }]}>
{now.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
})}
</Text>
</ScrollView>
</View>
);
}

161
src/styles.js Normal file
View File

@@ -0,0 +1,161 @@
import { StyleSheet } from 'react-native';
export function createStyles() {
return StyleSheet.create({
root: { flex: 1 },
scroll: {
flexGrow: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 24,
paddingVertical: 48,
},
title: {
fontSize: 44,
fontWeight: '900',
marginBottom: 20,
letterSpacing: 1,
},
topRow: {
width: '100%',
maxWidth: 640,
alignItems: 'center',
gap: 10,
marginBottom: 20,
},
backMenuBtn: {
paddingHorizontal: 18,
paddingVertical: 10,
borderRadius: 14,
borderWidth: 1.5,
},
toggleRow: {
flexDirection: 'row',
flexWrap: 'wrap',
gap: 10,
justifyContent: 'center',
},
toggleBtn: {
paddingHorizontal: 16,
paddingVertical: 8,
borderRadius: 20,
borderWidth: 1.5,
},
toggleText: { fontSize: 14, fontWeight: '600' },
modeSelectLabel: {
fontSize: 12,
letterSpacing: 2,
textTransform: 'uppercase',
marginBottom: 20,
},
modeCard: {
width: '100%',
maxWidth: 440,
borderRadius: 22,
padding: 28,
borderWidth: 2,
alignItems: 'center',
marginBottom: 16,
shadowColor: '#000',
shadowOffset: { width: 0, height: 6 },
shadowOpacity: 0.18,
shadowRadius: 14,
elevation: 7,
},
modeTitle: {
fontSize: 26,
fontWeight: '800',
marginBottom: 8,
letterSpacing: 0.5,
},
modeDesc: {
fontSize: 14,
textAlign: 'center',
lineHeight: 22,
},
card: {
width: '100%',
maxWidth: 440,
borderRadius: 22,
padding: 28,
borderWidth: 1.5,
alignItems: 'center',
shadowColor: '#000',
shadowOffset: { width: 0, height: 6 },
shadowOpacity: 0.2,
shadowRadius: 16,
elevation: 8,
},
inputLabel: {
fontSize: 12,
letterSpacing: 1,
textTransform: 'uppercase',
marginBottom: 10,
},
inputRow: {
flexDirection: 'row',
alignItems: 'center',
gap: 10,
marginBottom: 16,
},
timerInputGroup: { alignItems: 'center', gap: 4 },
inputUnit: { fontSize: 11, fontWeight: '600', letterSpacing: 1.5 },
timeInput: {
width: 72,
height: 58,
borderRadius: 12,
borderWidth: 2,
textAlign: 'center',
fontSize: 28,
fontWeight: '800',
},
colon: { fontSize: 34, fontWeight: '900' },
btnRow: {
flexDirection: 'row',
gap: 12,
marginTop: 20,
alignItems: 'center',
},
setBtn: {
paddingHorizontal: 32,
paddingVertical: 14,
borderRadius: 14,
},
setBtnText: { color: '#fff', fontSize: 16, fontWeight: '700', letterSpacing: 0.5 },
resetBtn: {
paddingHorizontal: 20,
paddingVertical: 13,
borderRadius: 14,
borderWidth: 1.5,
},
resetBtnText: { fontSize: 15, fontWeight: '600' },
overContainer: { alignItems: 'center', paddingVertical: 12, gap: 10 },
overText: { fontSize: 52, fontWeight: '900', letterSpacing: 2 },
overSub: { fontSize: 15 },
countdownContainer: { alignItems: 'center', gap: 12 },
countdownLabel: { fontSize: 13, letterSpacing: 0.5, textTransform: 'uppercase' },
countdownRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 6, justifyContent: 'center' },
timeBlock: { alignItems: 'center', gap: 4 },
countdownNum: { fontSize: 58, fontWeight: '800', lineHeight: 66 },
countdownUnit: { fontSize: 11, fontWeight: '600', letterSpacing: 1.5 },
sep: { fontSize: 50, fontWeight: '800', marginTop: 4 },
placeholder: { fontSize: 15, textAlign: 'center', paddingVertical: 24, lineHeight: 24 },
clock: { marginTop: 24, fontSize: 13, letterSpacing: 1.5 },
focusRoot: { alignItems: 'center', justifyContent: 'center', paddingHorizontal: 10 },
focusCountdown: { alignItems: 'center', gap: 16, width: '100%' },
focusLabel: { fontSize: 16, letterSpacing: 0.5, textTransform: 'uppercase' },
focusNum: { fontSize: 72, fontWeight: '800', lineHeight: 80 },
focusSep: { fontSize: 56, fontWeight: '800', marginTop: 8 },
focusOverText: { fontSize: 72 },
focusExitBtn: {
position: 'absolute',
bottom: 40,
right: 32,
paddingHorizontal: 18,
paddingVertical: 10,
borderRadius: 20,
borderWidth: 1.5,
},
focusExitText: { fontSize: 14, fontWeight: '600' },
});
}

31
src/theme.js Normal file
View File

@@ -0,0 +1,31 @@
export function getTheme(darkMode, pinkMode) {
const dark = {
bg: '#0b1020',
cardBg: '#131a2a',
text: '#e6ecff',
subText: '#93a0bf',
accent: '#5fb0ff',
border: '#24304a',
inputBg: '#0f1727',
};
const light = {
bg: '#f7f8fc',
cardBg: '#ffffff',
text: '#1d2433',
subText: '#5f6b85',
accent: '#1f67ff',
border: '#d5def2',
inputBg: '#eef3ff',
};
const base = darkMode ? dark : light;
const accent = pinkMode ? '#ff4fa3' : base.accent;
return {
...base,
accent,
danger: '#ef4444',
pink: '#ff4fa3',
};
}