Add Toggle to use theme BG in options menu

src/ui/components/menu/Options.tsx

@@ -33,6 +33,7 @@ interface IState {
   bg_url_or_path: string
   themes: string[]
   theme: string
+  use_theme_background: boolean
   encryption: boolean
   patch_rsa: boolean
   use_internal_proxy: boolean
@@ -64,6 +65,7 @@ export default class Options extends React.Component<IProps, IState> {
       bg_url_or_path: '',
       themes: ['default'],
       theme: '',
+      use_theme_background: false,
       encryption: false,
       patch_rsa: false,
       use_internal_proxy: false,
@@ -119,6 +121,7 @@ export default class Options extends React.Component<IProps, IState> {
       bg_url_or_path: config.custom_background || '',
       themes: (await getThemeList()).map((t) => t.name),
       theme: config.theme || 'default',
+      use_theme_background: config.use_theme_background || false,
       encryption: encEnabled || false,
       patch_rsa: config.patch_rsa || false,
       use_internal_proxy: config.use_internal_proxy || false,
@@ -538,6 +541,19 @@ export default class Options extends React.Component<IProps, IState> {
           </div>
         </div>
 
+        <div className="OptionSection" id="menuOptionsContainerUseThemeBG">
+          <div className="OptionLabel" id="menuOptionsLabelUseThemeBG">
+            <Tr text="options.use_theme_background" />
+          </div>
+          <div className="OptionValue" id="menuOptionsUseThemeBG">
+            <Checkbox
+              onChange={() => this.toggleOption('use_theme_background')}
+              checked={this.state?.use_theme_background}
+              id="useThemeBG"
+            />
+          </div>
+        </div>
+
         <Divider />
 
         <div className="OptionSection" id="menuOptionsContainerJavaPath">

src/utils/configuration.ts

@@ -16,6 +16,7 @@ let defaultConfig: Configuration
     last_port: '443',
     language: 'en',
     custom_background: '',
+    use_theme_background: false,
     cert_generated: false,
     theme: 'default',
     https_enabled: false,
@@ -45,6 +46,7 @@ export interface Configuration {
   last_port: string
   language: string
   custom_background: string
+  use_theme_background: boolean
   cert_generated: boolean
   theme: string
   https_enabled: boolean

src/utils/themes.ts

@@ -115,8 +115,8 @@ export async function loadTheme(theme: ThemeList, document: Document) {
 
   // Set custom background
   if (theme.customBackgroundURL) {
-    // If the custom bg is already set don't overwrite
-    if (config.custom_background === '') {
+    // If the custom bg is already set don't overwrite unless user wants to force the new background
+    if (config.custom_background === '' || config.use_theme_background) {
       config.custom_background = theme.customBackgroundURL
     }
   }
@@ -133,8 +133,8 @@ export async function loadTheme(theme: ThemeList, document: Document) {
     })
 
     // Set the background
-    // If the custom bg is already set don't overwrite
-    if (config.custom_background === '') {
+    // If the custom bg is already set don't overwrite unless user wants to force the new background
+    if (config.custom_background === '' || config.use_theme_background) {
       config.custom_background = bgPath + imageName
     }
   }