Added mechanism to allow injecting custom CSS files for UI customizat…

…ion (Chainlit#373)

* Added mechanism to allow injecting custom CSS files for UI customization

* Removed parenthesis.

backend/chainlit/config.py

@@ -162,6 +162,8 @@ class UISettings(DataClassJsonMixin):
     default_expand_messages: bool = False
     github: Optional[str] = None
     theme: Optional[Theme] = None
+    # Optional custom CSS file that allows you to customize the UI
+    custom_css: Optional[str] = None
 
 
 @dataclass()

backend/chainlit/server.py

@@ -177,6 +177,7 @@ def get_build_dir():
 def get_html_template():
     PLACEHOLDER = "<!-- TAG INJECTION PLACEHOLDER -->"
     JS_PLACEHOLDER = "<!-- JS INJECTION PLACEHOLDER -->"
+    CSS_PLACEHOLDER = "<!-- CSS INJECTION PLACEHOLDER -->"
 
     default_url = "https://github.com/Chainlit/chainlit"
     url = config.ui.github or default_url
@@ -193,13 +194,19 @@ def get_html_template():
     if config.ui.theme:
         js = f"""<script>window.theme = {json.dumps(config.ui.theme.to_dict())}</script>"""
 
+    css = None
+    if config.ui.custom_css:
+        css = f"""<link rel="stylesheet" type="text/css" href="{config.ui.custom_css}">"""
+
     index_html_file_path = os.path.join(build_dir, "index.html")
 
     with open(index_html_file_path, "r", encoding="utf-8") as f:
         content = f.read()
         content = content.replace(PLACEHOLDER, tags)
         if js:
             content = content.replace(JS_PLACEHOLDER, js)
+        if css:
+            content = content.replace(CSS_PLACEHOLDER, css)
         return content
 
 

frontend/index.html

@@ -12,6 +12,7 @@
       rel="stylesheet"
     />
     <!-- JS INJECTION PLACEHOLDER -->
+    <!-- CSS INJECTION PLACEHOLDER -->
     <script>
       const global = globalThis;
     </script>