Editing theme works

caprover · Oct 16, 2024 · 43f1436 · 43f1436
1 parent db1fa02
commit 43f1436
Showing 1 changed file with 77 additions and 4 deletions.
diff --git a/src/containers/settings/ThemeSettings.tsx b/src/containers/settings/ThemeSettings.tsx
@@ -168,15 +168,30 @@ const ThemeSettings = () => {
                         marginBottom: 5,
                     }}
                 >
-                    {localize('themes.ant_design_theme', 'Ant Design theme')}
-
-                    <span style={{ marginInlineStart: 5 }}>
+                    {localize(
+                        'themes.theme_custom_help',
+                        'You can customize CapRover theme by providing custom theme and inject elements (font, CSS, JS, etc) into the <head> section.'
+                    )}{' '}
+                    <span>
                         {' '}
                         <NewTabLink url="https://caprover.com/docs/theme-customization.html">
+                            {' '}
+                            {localize(
+                                'themes.see_here',
+                                'See here for details.'
+                            )}{' '}
                             <InfoCircleOutlined />
                         </NewTabLink>
                     </span>
                 </div>
+                <div
+                    style={{
+                        marginTop: 32,
+                        marginBottom: 5,
+                    }}
+                >
+                    Ant Design theme
+                </div>
                 <Input.TextArea
                     spellCheck={false}
                     style={{
@@ -185,14 +200,72 @@ const ThemeSettings = () => {
                         fontSize: 12,
                     }}
                     className="code-input"
-                    rows={15}
+                    rows={12}
                     value={!editModalTheme ? '' : editModalTheme.theme.content}
                     onChange={(e) => {
                         const cp = Utils.copyObject(editModalTheme!!)
                         cp.theme.content = e.target.value
                         setEditModalTheme(cp)
                     }}
                 />
+                <div
+                    style={{
+                        marginTop: 32,
+                        marginBottom: 5,
+                    }}
+                >
+                    {localize(
+                        'themes.head_embed',
+                        'Embed elements into <head>'
+                    )}
+                </div>
+                <Input.TextArea
+                    spellCheck={false}
+                    style={{
+                        overflowX: 'auto',
+                        whiteSpace: 'nowrap',
+                        fontSize: 12,
+                    }}
+                    placeholder={`<link href="https://fonts.googleapis.com/css" rel="stylesheet"/>`}
+                    className="code-input"
+                    rows={4}
+                    value={
+                        !editModalTheme ? '' : editModalTheme.theme.headEmbed
+                    }
+                    onChange={(e) => {
+                        const cp = Utils.copyObject(editModalTheme!!)
+                        cp.theme.headEmbed = e.target.value
+                        setEditModalTheme(cp)
+                    }}
+                />
+                <div
+                    style={{
+                        marginTop: 32,
+                        marginBottom: 5,
+                    }}
+                >
+                    {localize(
+                        'themes.caprover_extra',
+                        'Other configuration passed to CapRover'
+                    )}
+                </div>
+                <Input.TextArea
+                    spellCheck={false}
+                    placeholder={"{siderTheme:'dark'}"}
+                    style={{
+                        overflowX: 'auto',
+                        whiteSpace: 'nowrap',
+                        fontSize: 12,
+                    }}
+                    className="code-input"
+                    rows={4}
+                    value={!editModalTheme ? '' : editModalTheme.theme.extra}
+                    onChange={(e) => {
+                        const cp = Utils.copyObject(editModalTheme!!)
+                        cp.theme.extra = e.target.value
+                        setEditModalTheme(cp)
+                    }}
+                />
             </Modal>
         </div>
     )