Anthony/News-reader-pro
1
0
Fork 0
mirror of https://github.com/Tony0410/News-reader-pro.git synced 2026-05-24 21:31:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Introduce reader settings and dark mode support

Browse Source 
Adds a new `ReaderSettings` type to manage user preferences such as dark mode, font size, line height, font family, and auto-scroll behavior.

Implements dark mode styling for various UI components including the `VoiceSelector` and `QueueItem`, enhancing visual consistency.

Enhances the `ReaderView` component to respect the `autoScroll` setting and introduces basic text styling options based on the new settings.
This commit is contained in:
Anthony
2025-11-19 20:21:08 +08:00
parent 417d48ffdf
commit 8e902fd9c1
5 changed files with 418 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/VoiceSelector.tsx
View File

@@ -1,3 +1,4 @@
import React from 'react';
import { VoiceName } from '../types';
import { AVAILABLE_VOICES } from '../constants';
@@ -12,12 +13,12 @@ interface VoiceSelectorProps {
export const VoiceSelector: React.FC<VoiceSelectorProps> = ({ selectedVoice, onVoiceChange, disabled }) => {
return (
<div className="flex items-center space-x-2">
<Mic className="w-4 h-4 text-slate-500" />
<Mic className="w-4 h-4 text-slate-500 dark:text-slate-400" />
<select
value={selectedVoice}
onChange={(e) => onVoiceChange(e.target.value as VoiceName)}
disabled={disabled}
className="bg-white border border-slate-300 text-slate-700 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed"
className="bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-200 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-300"
>
{AVAILABLE_VOICES.map((v) => (
<option key={v.name} value={v.name}>
@@ -27,4 +28,4 @@ export const VoiceSelector: React.FC<VoiceSelectorProps> = ({ selectedVoice, onV
</select>
</div>
);
};
};