Fast Text Color

This Obsidian plugin allows you to create beautifully colored interactive notes using a custom coloring syntax.

Features

• Wide variety of available formatting options
• Full live preview support
• Multiple ways of applying/removing color to suit your individual needs
  • Multiple intuitive editor integrations
  • Custom coloring syntax that neatly integrates into Obsidian Markdown
  • Keyboard-only usage possible
• Bundle formatting presets into themes
  • Override active theme for individual notes through Frontmatter property
• No exposed HTML in the editing view
• Further in-depth customization using CSS classes

Usage

Color text sections using the following syntax:

~={id} This text is colored according to the id=~

The id maps to one of the color formats provided by the current active theme, which can be selected in the settings.

The formatting options include:

• $\textsf{{\color[rgb]{1.0, 0.0, 0.0}T}{\color[rgb]{1.0, 0.5, 0.0}e}{\color[rgb]{1.0, 1.0, 0.0}x}{\color[rgb]{0.0, 1.0, 0.0}t~ }{\color[rgb]{0.0, 1.0, 1.0}c}{\color[rgb]{0.0, 0.0, 1.0}o}{\color[rgb]{0.33, 0.0, 0.5}l}{\color[rgb]{1.0, 0.0, 1.0}o}{\color[rgb]{1.0, 0.0, 0.5}r}}$
• Bold
• Italics
• Under-, o̅v̅e̅r̅-, and throughlines
• FULL CAPS, Sᴍᴀʟʟ Cᴀᴘs

These options are handled using CSS classes, which means that any changes will be applied to preexisting sections marked with the respective id retroactively.

Themes

Colors are bundled into themes, which can be created and edited in the plugin settings. You can also pick the global active theme there.

If you want to override your global active theme for a specific note, you can do so by setting the frontmatter property ftcTheme to the name of the theme you wish to use.

Applying Color

Editor Context Menu

Right clicking on highlighted text lets you change the color via the context menu. All colors included in the current theme will be available.

Interactive Delimiter

If the interactive delimiter option is enabled in the settings (default), you can change or remove the color of text using the interactive delimiter shown in place of the color name.

Coloring Menu

Calling the change text color command opens the coloring menu, which allows you to choose the color of the selected text or insert a colored section if no text is selected.

You can select a color by clicking the corresponding button or using the keybind assigned in the theme editor. Keybinds can be disabled entirely in the settings, if desired.

Known Issues

These issues mainly arise from the different techniques required for live preview and reading mode and will be fixed in the future.

• Reading Mode.
  • An unopened closing delimiter =~ will lead to problems in reading mode.

Planned Features

• [x] Selectable color themes
• [ ] More/better ways to apply color
  • [x] Submenu in editor context menu
  • [ ] Suggester modal
  • [x] Changing color through interactive delimiter
  • [ ] Individual commands for theme colors
  • [ ] Automatically color by keyword
  • [ ] More (custom) CSS options
  • [ ] Full note commands (color by keyword etc.)

How It Works

This plugin uses a custom parser, which allows the coloring to interact with the established Obsidian Markdown syntax. A CSS class containing the specified style options is created for each color id.