LogoLogo
  • AppFlowy
    • ⭐Start here
      • Welcome to AppFlowy Docs
      • How to get help
      • Install AppFlowy
    • 🛠️Installation
      • 🖥️System Requirements
      • 💿Installation methods
        • Mac / Windows / Linux Packages
          • Installing on Linux
            • Installing & Setting up Flutter on Linux from Source
        • Docker
    • 🌱Community
      • 🤙Get in contact
      • 📔AppFlowy Mentorship Program
        • Program Guidance
        • Proposal Template
        • Pull Request Template
        • Mentorship 2023
          • Mentee Projects
            • Calendar View for AppFlowy Database
            • Custom Themes
            • Shortcuts and Customized Hotkeys for AppFlowy
            • Table
            • ⭐Favorites
            • Code Block
            • Outlines
            • Importers
            • AI Writers
            • Templates
          • Project Ideas
      • ✍️Write for AppFlowy
        • 📃Drafts
          • [Draft] Use Case: Software Engineer
          • [Draft] Use Case: High School Students
          • [Draft] How to add a new property to appflowy database
      • 🍂Hacktoberfest
    • 🛣️Roadmap
    • 🌋Product
      • 💽Data Storage
      • 🎨Customize and Style Content
      • ⏮️Duplicate, Delete, and Restore
      • 💎Databases
        • 🔢Database Properties
        • 🗃️Manage Properties
      • Ⓜ️Markdown
      • ⌨️Shortcuts
      • 🪄AppFlowy AI
      • 🦙AppFlowy Local AI - Ollama
      • 🎨Themes
      • ☁️AppFlowy Cloud
      • 🧩AppFlowy Plugins
        • Table-view Databases
        • Kanban Board
        • Calendar
        • Auto Generator
        • Smart Edit
        • Code Blocks
        • Math Equations
        • Cover
        • Emoji
  • Documentation
    • 💎Software Contributions
      • 🟢Get started
      • 💀Architecture
        • Frontend
          • Tauri
            • 🗺️CodeMap
          • Web
            • 🌟Design Philosophy
          • Flutter
            • 🗺️Project Structure: CodeMap
            • 🧮Grid
            • ⚙️Setting
          • Inter-Process Communication
          • User
            • User Data
            • Events & Notifications
          • Folder
            • Events & Notifications
          • Document
          • Database View
            • Events & Notifications
            • Grid
            • Calendar
            • Kanban Board
        • Backend
          • Initialize
          • Events
          • Delta(WIP)
          • Profiling
          • Database
        • Domain Driven Design
        • Proposals
      • 🏗️Conventions
        • 🔤Naming Conventions
        • ⌨️Code Conventions
          • 🐦Flutter
        • 🐙Git Conventions
      • 💛Submitting Code
        • 🏦Setting Up Your Repositories
        • ⤴️Submitting your first Pull Request
      • 🤟Coding Standards and Practices
        • 👽Rust Backend
    • 🚀AppFlowy
      • 👾How to contribute to AppFlowy
      • 🏗️Building from Source
        • 🌳Flutter Setup
          • 🐧Building on Linux
          • 🍎Building on macOS
          • 🪟Building on Windows
        • 🌐Web Setup
        • 📡Tauri Setup
      • ☁️Debugging with AppFlowy Cloud
      • 🔁Debugging in VS Code
      • ☎️Translate AppFlowy
      • ❓Troubleshooting
      • 👮‍♀️Licenses
    • 🏍️AppFlowy Editor
      • ⌨️How to Implement Markdown Syntax To Style Text In AppFlowy Editor
      • 🧩How to Create a Plugin for AppFlowy Editor
      • 👮‍♀️Licenses
    • ☁️AppFlowy Cloud
      • 🌈Architecture
      • ☀️Deployment
  • Guides
    • Sync Desktop and Mobile
    • Self-Hosting AppFlowy
      • ☁️Self-hosting AppFlowy with AppFlowy Cloud
      • 🆓Self-hosting AppFlowy for free Using Supabase
    • Import From Notion
  • Blog Highlights
    • 🔮Demystifying AppFlowy Editor's Codebase
  • Handbook
    • Core values
Powered by GitBook
On this page
  • Default Theme Options
  • Personalized Custom Theme
  • Upload Your Custom Theme File
  • Requirements for Custom Theme Files
  • Tips for Creating Custom Theme Files

Was this helpful?

Edit on GitHub
  1. AppFlowy
  2. Product

Themes

PreviousAppFlowy Local AI - OllamaNextAppFlowy Cloud

Last updated 10 months ago

Was this helpful?

Default Theme Options


AppFlowy offers a variety of pre-designed themes for you to choose from. Each theme includes both light and dark mode. Explore these themes and discover the one that resonates with your style!

Personalized Custom Theme


For a more tailored experience, AppFlowy introduces the ability to upload your custom theme file. This feature empowers you to handpick and modify the color scheme of the application, crafting an environment that aligns precisely with your personal preferences.

Upload Your Custom Theme File

Step 1: Get your theme file ready

To get started, you will require a custom theme file for the upload process. Don't worry if you don't already have one, we provide a pre-made sample theme called Dracula for your convenience. First, download this theme file and unzip it. We will use this sample file in the upcoming steps to guide you through the process of uploading a custom theme file.

After you unzip it, you will find a folder called Dracula.flowy_plugin. Inside this folder, there are two JSON files:

  • Dracula.light.json: The file configures the color scheme for the light mode of the Dracula theme.

  • Dracula.dark.json: The file, in contrast, specifies the color palette for the dark mode of the theme.

Step 2: Upload your theme file

Now it is time to upload this Dracula theme.

  1. Go to the settings dialog and click the 'Upload Theme' icon button.

  1. Click 'Upload' in the pop-up window.

  1. Choose the Dracula.flowy_plugin folder which contains the Dracula.light.json & Dracula.dark.json and click 'Choose'

  1. After that, you should ideally see a confirmation message appear at the bottom of the settings dialog, indicating the successful upload of your theme file. If you concur with any error message during this step, please refer to Requirements for Custom Theme Files and check if all the requirements are met.

Step 3: Implement your custom theme

Once you have successfully uploaded the theme file, navigate to the theme options list to locate your newly added theme. Simply select your custom theme from the list to implement it. Revel in the fresh, personalized look of your newly implemented theme!

Requirements for Custom Theme Files

Make sure you have added all the colors from FlowyColorScheme in your JSON files.

  • Name your theme folder ending with .flowy_plugin.

  • Include both .light.json and .dark.json files in the folder for light and dark themes.

  • Keep file names consistent, like Dracula.flowy_plugin, Dracula.light.json, and Dracula.dark.json.

  • Make sure you have added all the colors from FlowyColorScheme in your JSON files.

  • Using 8-digit hexadecimal codes to format the color values in JSON Files:

For example, if you want to set a red color(hex value: FF0000) with 50% opacity. The color value should be written as 0x80FF0000 in the JSON files.

  • 0x is a fixed code, which is a standard prefix indicating that the following characters are in hexadecimal format.

  • FF0000: The Hex value of the red color.

Tips for Creating Custom Theme Files

Given the extensive number of color values required in theme file creation, a practical approach is to leverage existing sample theme files as your starting point.

Here are three sample theme files for you to experiment with. By altering specific values within one of these samples, you can craft your unique custom theme with greater ease.

We may change the color field of FlowyColorScheme over time, You can find the latest color field in FlowyColorScheme in .

80 denotes the alpha (transparency) channel of the color, representing 50% opacity. To determine the appropriate code for different opacity levels, refer to this helpful resource:

Fingers crossed.... hopefully your theme looks great! We're eager to see how your theme turned out! If not, please or so that we can improve your user experience.

🌋
🎨
colorscheme.dart
Opacity percentage in a Hex color code
🤞
Submit a Feature Request
Report an issue
1KB
Dracula.flowy_plugin.zip
archive
1KB
Base.flowy_plugin.zip
archive
1KB
Barbie.flowy_plugin.zip
archive
1KB
Dracula.flowy_plugin.zip
archive
Select a built-in theme in the setting dialog