https://github.com/subframe7536/obsidian-theme-maple

[Refactoring] Obsidian theme for desktop with graceful animation and awesome components
https://github.com/subframe7536/obsidian-theme-maple

obsidian obsidian-theme

Last synced: 5 days ago
JSON representation

[Refactoring] Obsidian theme for desktop with graceful animation and awesome components

• Host: GitHub
• URL: https://github.com/subframe7536/obsidian-theme-maple
• Owner: subframe7536
• License: mit
• Created: 2022-10-19T12:12:45.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-19T02:26:15.000Z (23 days ago)
• Last Synced: 2024-11-30T07:07:23.534Z (12 days ago)
• Topics: obsidian, obsidian-theme
• Language: SCSS
• Homepage:
• Size: 13.7 MB
• Stars: 578
• Watchers: 4
• Forks: 15
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-obsidian-zh - subframe7536/obsidian-theme-maple
• awesome-hacking-lists - subframe7536/obsidian-theme-maple - [Refactoring] Obsidian theme for desktop with graceful animation and awesome components (SCSS)

README

        
# Maple

an Obsidian theme for desktop with some awesome components, using `Style Setting` to custom preference, embed with self-designed monospace font [Maple Mono](https://github.com/subframe7536/Maple-font)

- my plugin to beautify devtools: [repo](https://github.com/subframe7536/obsidian-devtools-font-and-scrollbar)

![](img/screenshot_source.webp)



**does not guarantee backward compatibility due to working time limitations**

## Quick Start

### Install theme

1. Open Obsidian and go to Settings.

2. Click on the Appearance tab.

3. Click on the Manage button to open Community Store.

4. In the Filter... Search Box, search "Maple".

5. Click the Install and use button.

### Customize (⚠️Recommend):

by community plugin: Style Settings

1. Open Obsidian and go to Settings.

2. Click on the Community plugins tab.

3. Click on the Browse button.

4. In the Search community plugins... Search Box, search for Style Settings.

5. Click the Install button.

6. Click the Enable button once the plugin is finished installing.

## Components

### Dynamic theme

dynamic theme with customable accent color

![](img/dynamic.png)

### Outline

in outline panel

![](./img/outline.gif)

### Document search

![](img/container-query.gif)

### Scrollbar style

background color transition and overlay

![](img/scrollbar.gif)

### Code block

![](img/code.png)

### Quote

live preview

![](img/quote.png)

### Toggle button style

![](img/toggle.gif)

### Blur menu

![](img/blur.png)

### Modal panel title

![](img/input.gif)

### Style settings

**more** options can be configured in Style Settings plugin

![](img/style_setting.png)

## Todo

- [ ] mobile support

- [ ] callouts

- [ ] dataview

### Credit

- [Blue Topaz](https://github.com/whyt-byte/Blue-Topaz_Obsidian-css)

- [Mado Miniflow](https://github.com/hydescarf/Obsidian-Theme-Mado-Miniflow)

- [Border](https://github.com/Akifyss/obsidian-border)

## License

MIT