reworkd/AgentGPT

Ability to set custom UI font

Open

#872 opened on Jun 27, 2023

View on GitHub
 (7 comments) (0 reactions) (0 assignees)TypeScript (34,594 stars) (9,446 forks)batch import
enhancementhelp wantedjavascript

Description

⚠️ Please check that this feature request hasn't been suggested before.

  • I searched previous Ideas in Discussions didn't find any similar feature requests.
  • I searched previous Issues didn't find any similar feature requests.

🔖 Feature description

At first, I want to say thank you for releasing AgentGPT.

It would be great if there was a way to set the font family used in the UI.

✔️ Solution

  • Refactor frontend to not use hardcoded monospace font and other necessary restructurings.
  • Add tailwind config value(s) to set the UI font to use.
  • Additional, nice to have: If not already available add tailwind config value to set the default UI theme (light/dark).

❓ Alternatives

No response

📝 Additional Context

No response

Acknowledgements

  • My issue title is concise, descriptive, and in title casing.
  • I have searched the existing issues to make sure this feature has not been requested yet.
  • I have provided enough information for the maintainers to understand and evaluate this request.

Contributor guide

Tech stack
typescriptreacttailwindcssnextjs
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTailwindCSSTypeScriptNext.js
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
First, identify all locations in the frontend where a hardcoded monospace font is used (likely in CSS files or component inline styles). Then, add a fontFamily custom property in the Tailwind config (tailwind.config.js) and apply it globally via the body element or a wrapper component. Optionally, implement a theme toggle for light/dark mode using Tailwind's dark mode variant. Review the existing layout components (e.g., app.tsx) and any relevant UI components to ensure consistency.