Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/drbap/magicuser-theme-for-obsidian
MagicUser theme for Obsidian.md (light and dark themes)
https://github.com/drbap/magicuser-theme-for-obsidian
dark-theme highly-customizable light-theme obsidian obsidian-md obsidian-theme preset-themes theme
Last synced: 18 days ago
JSON representation
MagicUser theme for Obsidian.md (light and dark themes)
- Host: GitHub
- URL: https://github.com/drbap/magicuser-theme-for-obsidian
- Owner: drbap
- License: mit
- Created: 2023-05-10T19:04:30.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-22T18:16:58.000Z (6 months ago)
- Last Synced: 2024-05-23T02:48:50.394Z (6 months ago)
- Topics: dark-theme, highly-customizable, light-theme, obsidian, obsidian-md, obsidian-theme, preset-themes, theme
- Language: CSS
- Homepage:
- Size: 38.1 MB
- Stars: 23
- Watchers: 4
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# ✨**MagicUser**✨ Theme
✨ **MagicUser** is a custom theme for Obsidian.md that provides a pleasant and focused note-taking experience, with light and dark themes for day and night use.
With the **Style Settings** community plugin, customize a wide range of theme elements to suit your preferences and create a truly engaging and productive workspace.
## Installation
1. Open Obsidian **Settings** -> select **Appearance**
2. **Themes** -> click **Manage** -> search for **MagicUser**
3. Select the theme -> click **Install and use**
## Built-in Themes
> No extra plugin required.
## Style Settings - Theme Options
> [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) community plugin required.
Preset Themes - click to expand/collapse
1. **MagicUser** (Default)
2. **MagicUser Room Lamp**
3. **MagicUser Purple**
4. **MagicUser Teal**
5. **MagicUser Gray**
6. **MagicUser Camouflage**
7. **MagicUser Moon**
8. **MagicUser Teacher**
9. **MagicUser Creativity**
10. **MagicUser Concentration**
11. **MagicUser Stealth**
### **MagicUser BG Themes**
**MagicUser BG Themes (Light Themes)**
- **Darken background** slider (**all preset BG themes** - **dark mode**). You can darken the background of all preset BG themes to improve readability.
- **Cards UI**.
### MagicUser Chroma Amulet Theme
The **Chroma Amulet** preset is a special preset that you can use to create multiple color themes.
How it Works:
1. Select "**MagicUser Chroma Amulet**" preset.
2. Select theme color using the first slider: **color**.
3. Adjust the level of **saturation** using the second slider (turn this one closer to zero to greyish tones).
Quick and User-Friendly: The Chroma Amulet preset theme streamlines the theme personalization process, allowing you to create your favorite theme workspace colors effortlessly (using 1 or 2 sliders).
- **Automatic adjustment**: The Chroma Amulet preset automatically changes the color of various interface elements. This includes:
- Icons,
- Vault name,
- Inline title,
- Code punctuation,
- Sidebars and other UI elements.
> MagicUser Chroma Amulet theme **does not affect your accent color**. So you can still use your favorite accent color with your chosen theme colors.
### MagicUser Accent Theme
The **MagicUser Accent** theme is also a special preset that you can use to create multiple color themes.
How it Works:
1. Select "**MagicUser Accent**" preset.
2. Select **accent color** (Obsidian -> accent color picker).
> The theme will adjust according to the selected accent color (headings, icons, borders, blockquote border, lists and other UI elements).
UI Settings - click to expand
Submenus:
◼ **Main Theme Colors**
- **Frame** color
- **Primary background** color
- **Secondary background** color
- **Caret** / **text cursor** color
- **Vault title** color
- **Inline title** color
- **Inline title** font size
- Stacked mode tabs: active tab **border color**
- Stacked mode tabs: active tab **border width**
- **Blockquote background** color
- **Blockquote border** color
- **Horizontal rule** color
- **List marker** color
- **List marker collapsed** color
◼ **Icons and Folders**
- **Folder name** color (light and dark modes)
- **Folder icon** color
- **File icon** color
- **Icon focused** color
- **Folder icons** color **saturation** slider (0 = gray).
- **File icons** color **saturation** slider (0 = gray).
- Sidebars **collapse icon** color (folder collapse, outline collapse and others).
- Show/hide **folder icons**
- Show/hide **file icons**
◼ **Indent Guides**
- Select 6 **indent guides colors** (independent colors for light and dark modes)
◼ **Line Highlight**
- Active **line highlight border** color (9 options)
- Active **line highlight background** color (9 options)
◼ **Laser**
- MagicUser **laser**.
- Select **laser focus type** (**Line** or **Area**).
- Select **laser color** (**7 colors**).
- Select **laser intensity**.
- Select **laser position**.
◼ **Graph**
- Graph colors (node, node focused, line, graph text and other graph color options).
◼ **Tables**
- Table options (presets and colors)
◼ **Tabs**
- Select active tab **foreground color** (text and icon color).
- Select the **style of the tabs** (*3 options*): **default tabs**, **square tabs** and **pill tabs**.
- *Default tabs* mode: Select active tab **border color**.
- *Default tabs* mode: Select active tab **border width** (0 = no border).
- *Stacked tabs* mode: Select active tab **border color**.
- *Stacked tabs* mode: Select active tab **border width** (0 = no border).
◼ **Reading Mode**
**Reading Glow** submenu
- Reading glow options.
**Reading Indicator and Labels** submenu
- **Reading indicator width** - slider controller.
- **Reading indicator color**.
- **H1-H6 label colors** (independent colors for light and dark modes).
- **Hide headings labels**.
◼ **Scrollbars**
- Scrollbar **width**.
- Scrollbar **track** color.
- Scrollbar **track hover** color.
- Scrollbar **thumb size**.
- Scrollbar **thumb** color.
- Scrollbar **thumb hover** color.
◼ **UI Advanced Settings** (Desktop Version)
- **Warm screen mode** (slider).
- Activate **distraction-free mode**.
- Activate **total concentration mode**.
- **File line width** (note width).
- **Compact command palette and prompts** (toggle).
- **Transparent menus** and **prompts** (toggle).
- **Transparency level adjustment** (slider).
**Hide UI Elements** submenu:
- Hide **vault name**.
- Hide **sidebar buttons** (new note, new folder and others).
- Show/hide **tab navigation back and forward buttons**.
- Auto hide **title bar top left buttons**.
- Auto hide **top side buttons**.
- Auto hide **bottom side buttons**.
- Auto hide **inline title**.
- Auto hide **status bar**.
> When **auto hide** is turned on, UI elements will gradually appear when you move your mouse over the area where they would normally be, and then gradually disappear when you move your mouse away.
Headings H1-H6 - click to expand
- **Neon Mode**
- **Outline Neon Mode**
- Neon glow controller
- **Underline headings**
**Headings Settings** submenu
- Headings **font** (H1 - H6)
- H1 to H6 **font family**
- H1 to H6 **font family**
- H1 to H6 **font size**
- H1 to H6 **font weight** (slider)
- H1 to H6 **color**
**Neon Mode Headings** submenu
- H1 to H6 neon mode colors
Text - click to expand
- **Bold text** color
- **Italic text** color
- **Highlighted text** color
- **Underline text** color
- **Footnotes** color
Links - click to expand
- **Internal link decoration** (underline, none)
- Internal link **color**
- Internal link **hover color**
- **External link decoration** (underline, none)
- External link **color**
- External Link **hover color**
Checklist - click to expand
- Checkbox shape: **default** (rounded corners), **square** and **circle**
- Checklist done **decoration** (underline, line-through, none)
- Checklist done **text color**
Code - click to expand
- Code font
- Code background color
- Keyword
- String
- Number
- Comment
- Function
- Property
- Tag
- Attribute
- Operator
- Punctuation
## Cards UI
Style Settings:
> **Preset Themes** -> Cards UI
## Outline UI - Sidebars and Active Icons
- Outline UI - sidebars
- Outline UI - active icons and elements
- Outline UI - select border color (light/dark modes)
Style Settings:
> **Preset Themes** -> Outline UI
## Tabs
**Style Settings** (**Tabs Submenu**)
- Select active tab **foreground color** (text and icon color).
- Select the **style of the tabs** (*3 options*): **default tabs**, **square tabs** and **pill tabs**.
- *Default tabs* mode: Select active tab **border color**.
- *Default tabs* mode: Select active tab **border width** (0 = no border).
- *Stacked tabs* mode: Select active tab **border color**.
- *Stacked tabs* mode: Select active tab **border width** (0 = no border).
## Breadcrumb
- New **breadcrumb layout** (view header breadcrumb). The breadcrumb folders will have the same border and background colors of the **sidebar open folder area** (file explorer).
- You can also have an additional layout (**Slanted breadcrumb** - without the `/` separator and more compact. You can activate the **slanted breadcrumb** layout using Style Settings.
Style Settings:
> **UI Settings** -> **Icons and Folders** -> *Slanted breadcrumb layout*
## MagicUser laser
Enhance your reading experience with personalized reading focus and comfort.
- MagicUser laser will be displayed in live preview, source and reading modes.
Style Settings:
> **UI Settings** -> **Laser** -> MagicUser laser
### **Laser - Style Settings Options**
- Select **laser focus type** (**Line** or **Area**)
- Select **laser color** (**7 colors** - blue, green, red, orange, yellow, pink and purple)
- Select **laser intensity**.
- Select **laser area size** (slider).
- Select **laser position** (vertical position). Easily choose where you want the laser to highlight text on the screen. Whether you prefer to start at the top, center, or bottom, simply select your preferred reading position. The default position is in the center of the screen.
## Reading Mode: Reading Glow Effect and Reading Indicator
- Reading Mode: **Reading glow** effect.
- Style Settings: Reading glow **color** (7 colors).
- Style Settings: Reading glow border size.
- Style Settings: Reading glow corners size (0 = square corners).
## Active Line Zoom
This feature dynamically **adjusts the font size** of the current line for enhanced focus while typing or reading.
- **Live preview and source modes**: The font size of the line containing the cursor is temporarily magnified.
- **Reading mode**: Clicking on a line in reading mode activates a temporary zoom effect.
- **Active line zoom** can be toggled on or off via a shortcut key or the Command Palette.
Style Settings:
> **UI Settings** -> **Line Highlight** -> active line zoom
## Hover Underline
**Hover underline** (live preview, source and reading modes).
- **Toggle hover underline** (shortcut and/or Command Palette).
Style Settings:
> **UI Settings** -> **Line Highlight** -> **Hover underline** submenu
**Hover underline submenu**.
- Select hover underline **style** (*default*, *dashed*, *dotted*,*double*).
- Select hover underline **color** (independent color for light/dark mode).
- Select hover underline **thickness** (slider).
- Select the **gap between text and hover underline** (slider).
## Folder Icons, File Icons and Colored Indent Guides
You can customize the **indent guides colors** using the Style Settings plugin (independent colors for light and dark modes). You can also show/hide **folder icons** and **file icons**.
## Sidebar Open Folder Area
- Style Settings: select sidebar open folder area **border color**.
- Style Settings: select sidebar open folder area **background color**.
- Style Settings: **hide** sidebar open folder area.
## Rainbow Folders
- When activated, this mode will highlight the background of folders starting with the numbers "01" and/or "001" to "08" and/or "008" (according to the order of rainbow colors plus the gray color, 8th color). It will work with folders starting with "01 Folder name" to "08 Folder name".
- All **subfolders** will have the same color of the top folder.
Activate this mode using the Style Settings plugin:
> **UI Settings** -> **Icons and Folders** -> Rainbow colored background folders
### Rainbow Subfolders (Nested Rainbow Folders)
- You can start your **folder structure numbering** in a subfolder.
## Dark Sidebar (Light Mode)
- Style Settings: Enable dark sidebar in light mode (compatible with preset themes)
Style Settings:
> **Preset Themes** -> Dark sidebar (light mode)
## Neon Mode
Style Settings:
> **Headings H1-H6** -> Neon mode
## Neon Mode Custom Headings Colors
You can customize the neon mode headings colors using the **Neon Mode Headings** submenu.
Style Settings:
> **Headings H1-H6** -> **Neon Mode Headings**
## Neon Mode Glow Controller
## Outline Neon Mode
**Outline Neon** mode enlarges headings for effortless reading, all while keeping your text neon-highlighted. Choose your preferred style.
## Underline Headings
- Normal mode
- Neon mode
- Outline neon mode
You can toggle **underline headings** using a shortcut or the Command Palette.
Style Settings:
> **Headings H1-H6** -> Underline headings
## Blockquote Indent Indicator
## Tags Customization - Colored Tags
**Tags submenu** (Style Settings)
- Turn on **colored tags** (44 preset tags)
- **Tags shape** (0 = square tags)
- **Spacing** between the text and the hashtag (#) - slider controller
- **Hide hashtags** (#)
- Tags **text foreground** color
- Tags **text foreground hover** color
- Tags **background** color
- Tags **background hover** color
- Tags **border** color
- Tags **border hover** color
Style Settings:
>** UI Settings** -> Tags
### 44 preset tags layout with icons
```md
- **General todo and task status**:
- #todo
- #inprogress
- #ready
- #completed
- #implemented
- **Alerts**
- #attention
- #warning
- #caution
- **Academic**:
- #article
- #reference
- #citation
- #cheatsheet
- #review
- #research
- #watch
- #test
- **Solo/Team tags**:
- #solo
- #team
- **Schedule**:
- #date
- #appointment
- #meeting
- **General purpose**:
- #study
- #work
- #family
- #finances
- #video
- #bookmark
- #important
- #favorite
- #wishlist
- #reminder
- #art
- #idea
- #magic
- **Stars rating tags**:
- #s1
- #s2
- #s3
- #s4
- #s5
- **School grading system**:
- #gA
- #gB
- #gC
- #gD
- #gF
```
## Warm Screen Mode
Style Settings:
> UI Settings -> UI Advanced Settings -> **Warm screen mode**
- Instead of just dimming the screen, the **warm scren mode** adjusts the light spectrum towards warmer tones (red, orange, yellow) and reduces cooler tones (e.g. blue).
- Warmer tones are considered less harsh on the eyes, especially in **low-light environments** or extended use.
- The warm screen mode can create a more relaxing and soothing atmosphere for reading, working, or viewing media.
- If you embed PDFs, you will be able to read them with warmer screen color.
- You can adjust the **warm screen mode intensity** (using the slider).
- To turn it off, set the slider to zero (default option).
## Distraction-free Mode
To show the left ribbon, place your cursor on the left side of the screen, it will hide again when you move your cursor away from the left side of the screen.
- You can also auto hide the **status bar** (UI Advanced Settings).
## Total Concentration Mode
**Total concentration mode** goes beyond distraction-free mode. It creates a state of flow unhindered by any visual interruptions. Focus solely on your writing or reading.
- Toggle total concentration mode quickly using a **shortcut** or **Command Palette**.
Style Settings:
> **UI Settings** -> **UI Advanced Settings** -> Total concentration mode
## Dataview Tables to Cards
- **Dataview tables can be converted to cards**. Add cssclasses property (with `cards` class) on the note you want to transform the dataview tables to cards. This cards class was inspired by @kepano excellent Minimal theme, but it is a different code and look. I hope you also find it useful.
- The default `cards` class will add **3 columns** maximum. If you want just 2 columns add `cards cards2` (cssclasses property).
```frontmatter
---
# Display table to cards (2 columns)
cssclasses:
- cards
- cards2
---
```
- You can add **5 additional classes**: `cards1`, `cards2`, `cards3`, `cards4` and `cards5` (corresponding to the number of columns - 1 to 5 columns). I think this is easy to remember and implement.
```frontmatter
---
# Display table to cards (5 columns)
cssclasses:
- cards
- cards5
---
```
## Transparent Menus, Modals and Prompts
## Compact Prompts
## Style Settings - Customize Colors for Light and Dark Modes
## Custom Checkbox Icons
### Checkbox Icons (Extra 1)
### Checkbox Icons (Extra 2 and 3)
## Checkbox Shape
- **Checkbox shape**: **default** (rounded corners), **square** and **circle**.
Style Settings:
> Checklist -> Checkbox shape
## Additional Callouts
### Gallery Callouts
`> [!g-` + `color] Callout Title`
`> [!g-` + `color|number of columns] Callout Title`
*Number of columns*: 1 - 5
*Colors*: white, black, gray
- Create image galleries. You can quickly organize and display your images in columns (1 to 5 columns).
- Gallery callouts in **reading mode** are interactive. **Clicking and holding** any image thumbnail within a gallery callout triggers a lightbox effect. This immerses you in the image by gently dimming the background, allowing you to appreciate its details without distractions.
- **Number of columns**: The default callout option is 3 columns, if you don't add `|number` of columns. You can quickly change image gallery display by changing this number (**1** - **5** columns).
**Examples:**
**White background color - default (3 columns)**
```md
> [!g-white] Your Callout Title
> Place image 1 link (image 1)
> Place image 2 link (image 2)
> Place image n link (image n)
```
**Gray background color - 5 columns**
```md
> [!g-gray|5] Your Callout Title
> Place image 1 link (image 1)
> Place image 2 link (image 2)
> Place image n link (image n)
```
### Media Callouts
`> [!m-` + `color] Callout Title`
*Colors*: white, black, gray
### Table Callouts
`> [!table]`
You can add a table inside the table callout and adjust the table size/width according to the page.
`> [!table` + `|30% - 100%]` (percentage of the page occupied by the table)
- Values: **30%**, **40%**, **50%**, **60%**, **70%**, **80%**, **90%** and **100%**.
- You can also **center** the table (just add `center` after the percentage).
- Don't forget to leave an empty line before inserting the table.
Check it out the examples below.
**Default Table Callout**
```md
> [!table] Table 1
>
> | Column 1 | Column 2 | Column 3 |
> | :---: | :---: | :---: |
> | Text 1 | Text 2 | Text 3 |
> | Text 4 | Text 5 | Text 6 |
> | Text 7 | Text 8 | Text 9 |
```
**Table 70%**
```md
> [!table|70%] Table 1
>
> | Column 1 | Column 2 | Column 3 |
> | :---: | :---: | :---: |
> | Text 1 | Text 2 | Text 3 |
> | Text 4 | Text 5 | Text 6 |
> | Text 7 | Text 8 | Text 9 |
```
**Table 50% width and centered**
- add `percentage center`
```md
> [!table|50% center] Table 1
>
> | Column 1 | Column 2 | Column 3 |
> | :---: | :---: | :---: |
> | Text 1 | Text 2 | Text 3 |
> | Text 4 | Text 5 | Text 6 |
> | Text 7 | Text 8 | Text 9 |
```
### Highlighter Callouts
`> [!hl-` + `color] Your Callout Title`
*Colors*: green, blue, orange, yellow, red, pink, purple
### Pen Callouts
`> [!p-` + `color] Your Callout Title`
*Colors*: green, blue, orange, yellow, red, pink, purple
### Quote Callouts
`> [!q-` + `color] Quote`
*Colors*: green, blue, orange, yellow, red, pink, purple
### Box Callouts
`> [!b-` + `color] Your Callout Title`
*Colors*: green, blue, orange, yellow, red, pink, purple
### Untitled Box Callouts
`> [!ub-` + `color]`
*Colors*: green, blue, orange, yellow, red, pink, purple
### Line Callouts
`> [!l-` + `color] Your Title`
*Colors*: green, blue, orange, yellow, red, pink, purple
Center the content by adding `|center` as shown below:
`> [l-`+ `color|center] Your callout title`
To align right, use `|right`.
### Line Box Callouts
`> [!lb-` + `color] Your Title`
*Colors*: green, blue, orange, yellow, red, pink, purple
### Callout Headings (H1 - H6)
`> [!h1 to h6-` + `color] Your Title`
*Colors*: green, blue, orange, yellow, red, pink, purple
Center the callout heading by adding `|center` as shown below:
`> [h1 to h6-` + `color|center] Your callout title`
To align right, use `|right`.
### Specific Callouts
`> [!video]`
`> [!mic]`
`> [!clip]` or `> [!paperclip]`
`> [!book]`
`> [!comment]`
`> [!target]`
`> [!pro]` or `> [!pros]`
`> [!con]` or `> [!cons]`
`> [!link]` or `> [!links]`
`> [!magic]`
## Resize Callouts
- **All callouts** can be resized. You can use the same syntax as table callouts in other callouts to resize them on screen (also center them).
`> [!callout-name|percentage]` or
`> [!callout-name|percentage center]`
``` md
> [!question|80% center] Your callout title
> Your callout content
```
- Values: **30%**, **40%**, **50%**, **60%**, **70%**, **80%**, **90%** and **100%**.
- You can also **center** the callout (just add `center` after the percentage)
## Caret Colors for Improved Visibility
## Caret Width (Selection and Multiple Cursors)
- When selecting text, the main edit cursor/caret will have a **different width** for better visibility (**no blinking caret**).
- Additional carets/cursors have a different width and no blinking carets (solid appearance).
## Active line background and border colors
- It works inside code samples and normal editor areas.
- Active line number will have the same color of the text cursor/caret.
## Search Highlight and Text Highlight
- **Global search highlight**, **linked mentions** and **outline text highlight**.
- The search result text in **live preview**, **source** and **reading** modes will appear in black text color with highlighted background (default is **yellow**, but you can select any highlight color using the Style Settings).
- In **live preview** and **source** modes, the text will also appear **underlined** to be easier to find. It works for all types of text (normal text, bold, italic, links, tags, code and headings).
> [!NOTE]
> The underline will be the same color of your text cursor/caret color.
- **Outline highlight**: When you click on the item (using the outline) it will highlight the text the same way (search). I think it will be easier to read, especially when using different colors for H1-H6 titles (normal mode and neon mode).
## Search Highlight in Current Note
## Inline Comments
- **Inline interactive comments**. You can add inline comments to any part of your note, and when you hover over it, the content will be displayed in a box. The comment icon will be highlighted.
- You can add HTML bold ``, italic ``, links ``, ``, `` tags in order to format your comments to make it easier to you to review them.
- They were designed for quick comments 1 - 4 paragraphs.
- The inline comments **will not be printed or exported to PDF**.
**Syntax**:
1. Add the `` tag with the class `muc` (**MagicUser Comment**)
2. Inside `` just add a `` tag with your comment. There is no need to add any class to the span tag.
**Example**
```html
This is the text of your note
This is your first inline comment.
```
- If you're used to HTML, just make it one line:
```html
This is the text of your note This is your inline comment.
```
### Inline Comments Inside Tables
## Underlined Text Colors
The **default underline color** is **red**, but you can change it using the Style Settings plugin. You can also add 7 classes to make the text **underlined**. When you hover the underlined text it will become highlighted (underlined too). Please check the syntax below.
```html
Text underlined text.
```
The classes below can quickly change the color of the underline (just the color names): **blue**, **green**, **orange**, **yellow**, **red**, **purple** and **pink** (7 colors).
```html
Text default underline
Text blue underline.
Text green underline.
Text yellow underline.
Text orange underline.
Text red underline.
Text purple underline.
Text pink underline.
```
> [!NOTE]
> The color of the text will remain the same, to avoid confusion with links.
## Hidden Text Underline
A) **Show text on hover** (hide text on live preview and reading modes)
Add the `hide` class to the `` HTML tags.
```html
You can hide the text.
```
B) **Show text on click and hold** (hide text on live preview and reading modes)
Add the `hide-c` class to the `` HTML tags (it will **reveal on click**).
```html
You can hide the text.
```
C) **Hide text on reading mode only - show on hover**
Add the `hide-r` class to the `` HTML tags. It will **reveal on hover** (reading mode).
```html
You can hide the text.
```
D) **Hide text on reading mode only - show on click**
Add the `hide-rc` class to the `` HTML tags. It will **reveal on click** (reading mode).
```html
You can hide the text.
```
- The hidden text will appear on **hover** or on **click** (bolder and highlighted). You can change the **background (highlight)** and **foreground** color using the Style Settings options (different colors for light and dark modes).
E) **Hide on reading mode only - show on hover - full width**
- Add the `hide-w` class. It will hide the text on reading mode and occupy the full width of the parent element (table column) or page.
```html
Question: What is the name of this theme? MagicUser
```
## Highlighted Text Colors
```html
Text highlighted text
```
The default is **yellow**. But you can quickly change its color by adding the same 7 classes of the underlined text (just the color names). Please check it out below:
```html
Normal default mark default highlight.
Text blue highlight.
Text green highlight.
Text yellow highlight.
Text orange highlight.
Text red highlight.
Text purple highlight.
Text pink highlight.
```
## Metadata highlighting
## Tables Layout
Default theme table layout:
- Improved table layout (**all preset themes** - light and dark modes). The colors of the tables will adapt to the different background colors of the preset themes.
- You can customize non-dataview tables using the **Tables submenu**.
- Independent table colors for light and dark modes, you can also select outer and inner border widths (sliders).
**Tables** submenu (Style Settings):
- **Preset tables**
- **Table body** text color
- **Table headers background** color
- **Table headers foreground** color
- **Table rows (odd)** background color
- **Table rows (even)** background color
- **Table row hover** background color
- **Outer table border** width
- **Inner table borders** width (rows and columns borders)
- **Disable table row hover**
> Table rounded corners (removed in theme version 19.2.0)
### Preset Tables
Style Settings: **Preset tables**
- `table1` (**column-striped table**)
- `table2`
- `table3`
- `table4` (with accent color)
- `table5` (with accent color)
- `table6` (with accent color)
- Default table (main theme table layout)
- **New**: **Numbered table** (rows and columns have numbers). You can customize the numbers background color.
- **New**: **Plain data** (simple layout for dataview tables)
Style Settings:
> **UI Settings** -> **Tables** -> Preset tables
To achieve the desired table layout for specific notes, you can apply the above CSS classes (`table1` to `table6`).
> **Properties** -> **cssclasses** -> `table1` to `table6`
## Footnotes
- You can customize the color of the footnotes (Style Settings). The default color is orange (light/dark modes).
## Mermaid
## Code Theme (Light and Dark)
The syntax highlighting in this theme is similar to the MagicUser themes for VS Code (MagicUser and MagicUser Light Blue).
## Outline Code
- **Outline inline code** and **outline code block**: Add inline code and code block border color (independent outline). You can select independent colors for inline and code block elements (light and dark modes).
- You can toggle the outline inline code and outline code block using the command palette (or shortcut key).
- Select inline code border color.
- Select code block border color.
Style Settings:
> **Code** -> Outline code
## Mobile Display
## Plugins Compatibility
- **Style Settings**
- **Excalidraw**
- **Dataview**
- **Kanban**
- **Calendar**
- **Full Calendar**
- **Tasks**
- **Commander**
- **Banners**
## Feedback
Have suggestions for new features, usability improvements, or found a bug? Your feedback is appreciated! Submit an issue on GitHub and I'll do my best to respond as soon as possible. Every voice matters and helps shape the future of this theme. Thanks.
## License and Acknowledgements
MagicUser Theme for Obsidian
MIT License ⓒ Bernardo Pires
Most of the icons for the checkboxes and the quote icon were created by me (MIT License). You can find the comment in the embedded SVGs.
The icons used by the file icon, other callouts and some checkboxes icons are from [Lucide](https://lucide.dev/) Icons used by Obsidian. The Lucide icon library is licensed under the ISC License.
Some checkbox icons were inspired by the excellent Minimal Theme by Stephan Ango (@kepano) and the Things Theme by Colin Eckert (@colineckert). You can find more information about @kepano and @colineckert below, please check their themes and support their work:
- [Minimal Theme by Stephan Ango](https://github.com/kepano/obsidian-minimal)
- [Things Theme by Colin Eckert](https://github.com/colineckert/obsidian-things)
**Style Settings Community Plugin**
- Thanks to Matthew Meyers (@mgmeyers) for the amazing [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) Plugin. Excellent work.
**Thanks for the Suggestions**
I would like to express my gratitude to everyone who offered suggestions, tested each new feature, and provided invaluable feedback. Thanks to your attention to detail and constructive criticism, the theme has evolved into what it is today.
- @alitekdemir - suggestion to add the extra checkboxes (extra 1 - screenshot), based on Minimal and Things Themes. I hope you also find them useful.
- @YannMiro - suggestion to show/hide file icons.
- @zhouxinghong - reading mode suggestions (display H1-H6 labels on hover, colored H1-H6 labels) and colored indent guides in file explorer. Style Settings Theme Options (collapse indicator color). Rounded tables suggestion.
- @ll14m4n - dataview tables and stacked mode suggestions. Suggestion to change neon heading colors and links in headings (when neon mode is on).
- @golden234431 (Obsidian Forum) - inline title font size.
- @fred.joe3697 (Obsidian Forum) - underlined text color, hidden text underline and inline comments suggestions. Callouts without title suggestion. Preset tables suggestions, disable table row background change and table text color. Hover underline suggestion.
- @New (Obsidian Forum) - note width suggestion.
- @YonKuma (Obsidian Forum) - hide headings labels.
- @merlinuwe - scrollbars customization suggestion. Numbered tables suggestion. Colored indent guides for lists.
- @indigofairyx - outline code and outline blockquote suggestion. Outline sidebars. Transparent menus blur effect. Tags suggestions.
- @Medullitus - panel divider hover color suggestion (Style Settings option). Suggestion to select the color of sidebar tags count number.
- @tr_mstein (Obsidian Forum) - independent outline code for inline code and code block.
- @damiankorcz - disable alternative checkboxes suggestion.
Special congratulations to the Obsidian.md team for creating a great software application.