Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yoyurec/logseq-awesome-styler

🎨 Totally customizable theme with presets: colors, backgrounds, fonts and sizes, etc... Logseq plugin
https://github.com/yoyurec/logseq-awesome-styler

List: logseq-awesome-styler

Last synced: about 2 months ago
JSON representation

🎨 Totally customizable theme with presets: colors, backgrounds, fonts and sizes, etc... Logseq plugin

Host: GitHub
URL: https://github.com/yoyurec/logseq-awesome-styler
Owner: yoyurec
License: mit
Created: 2022-05-11T02:09:55.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2023-05-13T15:38:23.000Z (over 1 year ago)
Last Synced: 2024-05-21T12:23:55.620Z (4 months ago)
Language: TypeScript
Homepage:
Size: 27.1 MB
Stars: 178
Watchers: 3
Forks: 8
Open Issues: 30
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

## Other my plugins/themes
* 🪓 [Awesome UI](https://github.com/yoyurec/logseq-awesome-ui)
* 📝 [Awesome Content](https://github.com/yoyurec/logseq-awesome-content)
* 📋 [Awesome Props](https://github.com/yoyurec/logseq-awesome-props)
* ⭐ [Awesome Links](https://github.com/yoyurec/logseq-awesome-links)
* ✨ [Tabler picker](https://github.com/yoyurec/logseq-tabler-picker)
* 📌 [Sticky Headers](https://github.com/yoyurec/logseq-sticky-headers)
* 📰 [Banners](https://github.com/yoyurec/logseq-banners-plugin)

## If you ❤ what i'm doing - you can support my work! ☕

"Awesome Styler"

### 🎨 Totally customizable theme with presets: colors, backgrounds, fonts and sizes, etc...

* ⚡ Powered up with custom JS 👨‍💻
* 🔆 Light & dark versions (Solarized colors by default)
* Customizable settings: 🡖
* 🎨 Customizable colors palette **text/backgrounds**: user defined (+ autogenerated shades) for UI and content elements
* 🔮 Built-in theme **color presets**: "Solarized", "Logseq", "Chocolate", "Mia Quattro", "Bear", "Nord", "Darcula" + 3 custom slots
* 🈶 Different **fonts**: "Fira Sans", "Mulish (Poppins)", "AiWriter Quattro", "Inter" & system
* 🖼 Background image
* 📏 Theme options for sizes
* 📰 Banners plugin support and powered-up! 🡖
* etc...

## Screenshots

![](https://github.com//yoyurec/logseq-awesome-styler/raw/main/screenshots/theme.png)

[![SWU-banner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://vshymanskyy.github.io/StandWithUkraine)

## Install theme
From Logseq store - `Plugins -> Marketplace`.

![](https://github.com//yoyurec/logseq-awesome-styler/raw/main/screenshots/market.png)

Or manually:
* load zip from Releases https://github.com/yoyurec/logseq-awesome-styler/releases/latest
* extract zip, plugin should be near others plugins (hope it is `%username%\.logseq\plugins`)
* plugin folder name should be exactly `logseq-awesome-styler`, without version

## Settings

### 🎨 Colors palette:
Change main colors in Settings

![](https://github.com//yoyurec/logseq-awesome-styler/raw/main/screenshots/settings-colors.png)

https://user-images.githubusercontent.com/137919/187081296-1c9c3312-cd86-4fbb-b78c-9fccbb0f52a5.mp4

### 🔮 Presets:
* select preset to apply it with read-only mode
* or select "Custom/Custom2/Custom3" to enable manual editing
* or select preset, press "Clone", edit applied colors, b'cose you on Custom mode now

![](https://github.com//yoyurec/logseq-awesome-styler/raw/main/screenshots/settings-presets.png)

**Choose preset: built-in (uneditable ⚠) OR user "Custom" (editable)**

https://user-images.githubusercontent.com/137919/187081307-f4cd176f-c294-492e-9dc6-63d31b4cc50e.mp4

**Clone presets to edit it**

https://user-images.githubusercontent.com/137919/187081312-82125847-db92-4c64-b50c-51d2053baa5d.mp4

### 🈶 Fonts
Change font and text size

![](https://github.com//yoyurec/logseq-awesome-styler/raw/main/screenshots/settings-fonts.png)

### 🖼 Background image:
* go to https://unsplash.com
* choose any image, click (go to its details page with bigger image)
* right click on image, "copy image link",
* edit URL in settings

![](https://github.com//yoyurec/logseq-awesome-styler/raw/main/screenshots/settings-bg.png)

### 📏 Sizes
Change sidebars and content width in Settings

### 📰 Banners plugin
Theme supports [Banners plugin](https://github.com/yoyurec/logseq-banners-plugin)
Background = blurred banner!
Icon glows!

Demo video: https://www.loom.com/share/31416785f6764a7a80fba271aea4ea79

![](https://github.com//yoyurec/logseq-awesome-styler/raw/main/screenshots/settings-banners.png)

## What is Logseq?
Logseq is a privacy-first, open-source knowledge base. Visit https://logseq.com for more information.

## Support
* Read about Logseq plugin updates on Dicscord - https://discord.com/channels/725182569297215569/896368413243494430
* Ask about Logseq plugins on Dicscord - https://discord.com/channels/725182569297215569/752845167030960141
* If you have any questions, issues or feature request, use the issue submission on GitHub: https://github.com/yoyurec/logseq-awesome-styler/issues

## Credits
* Icon - https://www.flaticon.com/free-icon/palette_7927110
* ["iA Writer" fonts](https://ia.net/topics/a-typographic-christmas): Copyright © 2018 Information Architects Inc. with Reserved Font Name "iA Writer". Licensed under the SIL Open Font License 1.1.
* Theme colors inspiration - Nicholas Martin https://github.com/nmartin84/logseq-solarized
* Kanban view inspiration - @Cannibalox https://github.com/cannibalox/logtools

## License
[MIT License](./LICENSE)