[Feature Request]: More flexibility on appearance or custom css

[Astnoa]

Description

I currently find some aspects of the styling not to my liking and for me it's sometimes difficult to read text heavy pages. Give users more options in appearance for font types, sizes, colours etc or full on custom css injection.

Use case

Could make documents easier to read for some users and give users more creative expression in styling their affine workspace. For example a company could apply their styling guide or accent colours to be present in their documentation.

Anything else?

No response

Are you willing to submit a PR?

• [ ] Yes I'd like to help by submitting a PR!

[affine-issue-bot[bot]]

Issue Status: 🆕 *Untriaged

*🆕 Untriaged

The team has not yet reviewed the issue. We usually do it within one business day. Docs: https://github.com/toeverything/AFFiNE/blob/canary/docs/issue-triaging.md

^{_{This is an automatic reply by the bot.}}

[Astnoa]

After switching to a canary build I noticed there is now a theme editor which I think is already a good step forward! :) Nice!

[rozek]

I just tried the canary version from Nov. 20, but the Theme Editor appears to be empty. Is there a "trick" to get it? Or is it actually just a placeholder?

[rozek]

People using the web client for AFFiNE who need to apply custom styling now may use a Tampermonkey script for that purpose.

Warning: using Tampermonkey is nothing but a rude hack - and you should use it only if you know what you are doing!

As a starter for others, here is my initial Tampermonkey script for web clients connecting to my self-hosted AFFiNE:

// ==UserScript==
// @name         custom AFFiNE styling
// @namespace    http://tampermonkey.net/
// @version      2025-12-01
// @description  customizes the style of AFFiNE workspaces
// @author       Andreas Rozek
// @match        http://localhost:3010/workspace*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  function addStyle (CSS) {
    const TargetElement = document.head ?? document.documentElement
    if (TargetElement == null) { return }

    const StyleElement = document.createElement('style')
      StyleElement.type = 'text/css'
      StyleElement.textContent = CSS
    TargetElement.appendChild(StyleElement)
  }

  addStyle(`
  [data-testid="edgeless-note-container"] {
    padding:0px ! important;
  }
  .affine-code > div {
    margin:0px ! important;
  }
  .affine-block-children-container {
    padding:0px 10px ! important;
  }
  .affine-code-block-container {
    padding:4px ! important;
  }
  `);
})();

Use (and modify) it at your own risk!

[chewybone]

this would be a great feature. i've never seen more padding in a code block for a KBMS app before, its a tremendous waste of space imo. would love to change that <3