✨ Add option for custom CSS to Customization Settings

src/components/Settings/AdvancedSettings.tsx

@@ -1,4 +1,4 @@
-import { TextInput, Button, Stack } from '@mantine/core';
+import { TextInput, Button, Stack, Textarea } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useTranslation } from 'next-i18next';
 import { useConfig } from '../../tools/state';
@@ -25,6 +25,7 @@ export default function TitleChanger() {
     logo?: string;
     favicon?: string;
     background?: string;
+    customCSS?: string;
   }) => {
     setConfig({
       ...config,
@@ -34,6 +35,7 @@ export default function TitleChanger() {
         logo: values.logo,
         favicon: values.favicon,
         background: values.background,
+        customCSS: values.customCSS,
       },
     });
   };
@@ -62,6 +64,12 @@ export default function TitleChanger() {
             placeholder={t('background.placeholder')}
             {...form.getInputProps('background')}
           />
+          <Textarea
+            minRows={5}
+            label="Custom CSS"
+            placeholder="Your CSS will be executed last"
+            {...form.getInputProps('customCSS')}
+          />
           <Button type="submit">{t('buttons.submit')}</Button>
         </Stack>
       </form>

src/components/layout/Layout.tsx

@@ -34,6 +34,9 @@ export default function Layout({ children, style }: any) {
       >
         {children}
       </main>
+      <style>
+        {cx(config.settings.customCSS)}
+      </style>
     </AppShell>
   );
 }

src/tools/types.ts

@@ -10,6 +10,7 @@ export interface Settings {
   secondaryColor?: MantineTheme['primaryColor'];
   primaryShade?: MantineTheme['primaryShade'];
   background?: string;
+  customCSS?: string,
   appOpacity?: number;
   widgetPosition?: string;
   appCardWidth?: number;