akai-tools/readest
2
0
Fork 0
forked from akai/readest
Code Pull Requests Activity

feat(eink): support color E-ink mode to display more colors, closes #3037 (#3074)

Browse Source
This commit is contained in:
Huang Xin
2026-01-25 17:44:41 +01:00
committed by GitHub
parent 563d3478ba
commit 2100071991
35 changed files with 240 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/app/reader/components/annotator/Annotator.tsx
+3 -3
View File
@@ -304,7 +304,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
const onDrawAnnotation = (event: Event) => {
const viewSettings = getViewSettings(bookKey)!;
const isEink = viewSettings.isEink;
const isBwEink = viewSettings.isEink && !viewSettings.isColorEink;
const detail = (event as CustomEvent).detail;
const { draw, annotation, doc, range } = detail;
const { style, color } = annotation as BookNote;
@@ -318,7 +318,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
const { writingMode } = defaultView.getComputedStyle(el);
draw(Overlayer.bubble, { writingMode });
} else if (style === 'highlight') {
draw(Overlayer.highlight, { color: isEink ? einkBgColor : hexColor });
draw(Overlayer.highlight, { color: isBwEink ? einkBgColor : hexColor });
} else if (['underline', 'squiggly'].includes(style as string)) {
const { defaultView } = doc;
const node = range.startContainer;
@@ -334,7 +334,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
: (lineHeightValue - fontSizeValue) / 2 - strokeWidth + horizontalCompensation;
draw(Overlayer[style as keyof typeof Overlayer], {
writingMode,
color: isEink ? einkFgColor : hexColor,
color: isBwEink ? einkFgColor : hexColor,
padding,
});
}
apps/readest-app/src/app/reader/components/annotator/HighlightOptions.tsx
+8 -6
View File
@@ -46,6 +46,8 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
const { isDarkMode } = useThemeStore();
const globalReadSettings = settings.globalReadSettings;
const isEink = settings.globalViewSettings.isEink;
const isColorEink = settings.globalViewSettings.isColorEink;
const isBwEink = isEink && !isColorEink;
const einkBgColor = isDarkMode ? '#000000' : '#ffffff';
const einkFgColor = isDarkMode ? '#ffffff' : '#000000';
const customColors = globalReadSettings.customHighlightColors;
@@ -117,10 +119,10 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
height: size16,
...(style === 'highlight' &&
selectedStyle === 'highlight' && {
backgroundColor: isEink
backgroundColor: isBwEink
? einkFgColor
: getColorHex(customColors, selectedColor),
color: isEink ? einkBgColor : '#d1d5db',
color: isBwEink ? einkBgColor : '#d1d5db',
paddingTop: '2px',
}),
...(style === 'highlight' &&
@@ -129,12 +131,12 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
paddingTop: '2px',
}),
...((style === 'underline' || style === 'squiggly') && {
color: isEink ? einkFgColor : '#d1d5db',
color: isBwEink ? einkFgColor : '#d1d5db',
textDecoration: 'underline',
textDecorationThickness: '2px',
textDecorationColor:
selectedStyle === style
? isEink
? isBwEink
? einkFgColor
: getColorHex(customColors, selectedColor)
: '#d1d5db',
@@ -162,7 +164,7 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
>
{defaultColors
.concat(userColors)
.filter((c) => (isEink ? selectedColor === c : true))
.filter((c) => (isBwEink ? selectedColor === c : true))
.map((color) => (
<div key={color} className='flex items-center justify-center'>
<button
@@ -179,7 +181,7 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
{selectedColor === color && (
<FaCheckCircle
size={size16}
style={{ fill: isEink ? einkFgColor : customColors[color] || color }}
style={{ fill: isBwEink ? einkFgColor : customColors[color] || color }}
/>
)}
</button>