predefined theme come from readium css

src/renderer/components/reader/ReaderApp.tsx

@@ -92,7 +92,7 @@ const computeReadiumCssJsonMessage = (): IEventPayload_R2_EVENT_READIUMCSS => {
         colCount: settings.colCount === "1" ? colCountEnum.one :
             (settings.colCount === "2" ? colCountEnum.two : colCountEnum.auto),
 
-        darken: settings.dark,
+        darken: settings.darken,
 
         font: settings.font,
 
@@ -129,6 +129,7 @@ const computeReadiumCssJsonMessage = (): IEventPayload_R2_EVENT_READIUMCSS => {
         wordSpacing: settings.wordSpacing,
     };
     const jsonMsg: IEventPayload_R2_EVENT_READIUMCSS = { setCSS: cssJson };
+    console.log(cssJson);
     return jsonMsg;
 };
 setReadiumCssJsonGetter(computeReadiumCssJsonMessage);
@@ -243,6 +244,7 @@ export default class ReaderApp extends React.Component<undefined, ReaderAppState
         this.handleMenuButtonClick = this.handleMenuButtonClick.bind(this);
         this.handleSettingsClick = this.handleSettingsClick.bind(this);
         this.handleFullscreenClick = this.handleFullscreenClick.bind(this);
+        this.setSettings = this.setSettings.bind(this);
     }
 
     public async componentDidMount() {
@@ -350,6 +352,7 @@ export default class ReaderApp extends React.Component<undefined, ReaderAppState
                             handleLinkClick={this.handleLinkClick.bind(this)}
                             handleSettingChange={this.handleSettingsValueChange.bind(this)}
                             handleIndexChange={this.handleIndexValueChange.bind(this)}
+                            setSettings={this.setSettings}
                         />
                         <div className={styles.content_root}>
                             <div className={styles.reader}>
@@ -487,10 +490,14 @@ export default class ReaderApp extends React.Component<undefined, ReaderAppState
     }
 
     private handleSettingsValueChange(event: any, name: string, givenValue?: any) {
+        if ((givenValue === null || givenValue === undefined) && !event) {
+            return;
+        }
+
         const settingsValues = this.state.settingsValues;
         let value = givenValue;
 
-        if (!value) {
+        if (givenValue === null || givenValue === undefined) {
             value = event.target.value.toString();
         }
 
@@ -501,6 +508,7 @@ export default class ReaderApp extends React.Component<undefined, ReaderAppState
         }
 
         settingsValues[name] =  value;
+        console.log(settingsValues);
 
         this.setState({settingsValues});
 
@@ -522,6 +530,15 @@ export default class ReaderApp extends React.Component<undefined, ReaderAppState
         this.handleSettingsSave();
     }
 
+    private setSettings(settingsValues: ReadiumCSS) {
+        if (!settingsValues) {
+            return;
+        }
+
+        this.setState({ settingsValues });
+        this.handleSettingsSave();
+    }
+
     private getEpubReadingSystem: () => INameVersion = () => {
         return { name: "Readium2 Electron/NodeJS desktop app", version: _APP_VERSION };
     }

src/renderer/components/reader/ReaderOptions.tsx

@@ -39,12 +39,19 @@ interface Props {
     handleLinkClick: (event: any, url: string) => void;
     handleSettingChange: (event: any, name: string, value?: any) => void;
     handleIndexChange: (event: any, name: string, value?: any) => void;
+    setSettings: (settings: any) => void;
 }
 
 interface State {
     sectionOpenList: boolean[];
 }
 
+enum themeType {
+    Sepia,
+    Darken,
+    Night,
+}
+
 export default class ReaderOptions extends React.Component<Props, State> {
     private sectionRefList: any = [];
 
@@ -65,6 +72,8 @@ export default class ReaderOptions extends React.Component<Props, State> {
             React.createRef(),
             React.createRef(),
         ];
+
+        this.handleChooseTheme = this.handleChooseTheme.bind(this);
     }
 
     public render(): React.ReactElement<{}> {
@@ -86,16 +95,31 @@ export default class ReaderOptions extends React.Component<Props, State> {
                             <div ref={this.sectionRefList[0]} className={styles.line_tab_content}>
                                 <div className={styles.subheading}>{__("reader.settings.theme.predefined")}</div>
                                 <div className={styles.theme_choices}>
-                                    <input type="radio" id="theme1" name="theme" value="theme1" />
-                                    <label>Thème 1</label>
+                                    <input
+                                        type="radio"
+                                        name="theme"
+                                        onChange={() => this.handleChooseTheme(themeType.Sepia)}
+                                        {...(this.props.settings.sepia && {checked: true})}
+                                    />
+                                    <label>Sepia</label>
                                 </div>
                                 <div className={styles.theme_choices}>
-                                    <input type="radio" id="theme2" name="theme" value="theme2" />
-                                    <label>Thème 2</label>
+                                    <input
+                                        type="radio"
+                                        name="theme"
+                                        onChange={() => this.handleChooseTheme(themeType.Darken)}
+                                        {...(this.props.settings.darken && {checked: true})}
+                                    />
+                                    <label>Dark</label>
                                 </div>
                                 <div className={styles.theme_choices}>
-                                    <input type="radio" id="theme3" name="theme" value="theme3" />
-                                    <label>Thème 3</label>
+                                    <input
+                                        type="radio"
+                                        name="theme"
+                                        onChange={() => this.handleChooseTheme(themeType.Night)}
+                                        {...(this.props.settings.night && {checked: true})}
+                                    />
+                                    <label>Night</label>
                                 </div>
                             </div>
                         </div>
@@ -394,6 +418,31 @@ export default class ReaderOptions extends React.Component<Props, State> {
         this.setState({ sectionOpenList });
     }
 
+    private handleChooseTheme(theme: themeType) {
+        const values = this.props.settings;
+        let sepia = false;
+        let night = false;
+        let darken = false;
+
+        switch (theme) {
+            case themeType.Darken:
+                darken = true;
+                break;
+            case themeType.Night:
+                night = true;
+                break;
+            case themeType.Sepia:
+                sepia = true;
+                break;
+        }
+
+        values.darken = darken;
+        values.sepia = sepia;
+        values.night = night;
+
+        this.props.setSettings(values);
+    }
+
     // round the value to the hundredth
     private roundRemValue(value: string) {
         if (!value) {
@@ -424,7 +473,6 @@ export default class ReaderOptions extends React.Component<Props, State> {
         if (property === value) {
             classname = styles.active;
         }
-        console.log(property, value, classname);
         return classNames(classname, additionalClassName);
     }
 }