https://github.com/Madelena/Metrology-for-Beeper
A flat design theme for Beeper. Based on Metro Design System.
https://github.com/Madelena/Metrology-for-Beeper
Last synced: about 2 months ago
JSON representation
A flat design theme for Beeper. Based on Metro Design System.
- Host: GitHub
- URL: https://github.com/Madelena/Metrology-for-Beeper
- Owner: Madelena
- Created: 2022-08-10T07:16:40.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-21T04:31:59.000Z (about 2 years ago)
- Last Synced: 2025-04-04T02:23:12.880Z (about 1 year ago)
- Language: CSS
- Size: 56.6 KB
- Stars: 40
- Watchers: 3
- Forks: 8
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-beeper - Metrology-for-Beeper
README
# Metrology for Beeper
Metrology is a series of app customizations and redesigns aimed at bringing a bold, clear, and consistent user experience to various apps, such as [Home Assistant](https://github.com/Madelena/Metrology-for-Hass), [MusicBee](https://github.com/Madelena/Metrology-for-Musicbee), and [more](https://github.com/Madelena?tab=repositories&q=Metrology). Its design language is based on [Metro](https://en.wikipedia.org/wiki/Metro_(design_language)) and [Fluent](https://www.microsoft.com/design/fluent/) design systems pioneered by Microsoft Design since the 2010s.
This is a theme for [Beeper](https://www.beeper.com/), a brand-new universal chat client!
*Dark Theme*
*Light Theme*
## How to Install
To install, simply copy and paste [the CSS code](https://raw.githubusercontent.com/Madelena/Metrology-for-Beeper/main/Metrology-for-Beeper.css) to the Custom CSS box under Settings > Appearances, and you're all set.
As theming for Beeper is still at an early stage of development, so any new updates may break the theme. As a precaution, the app will reset to the base theme every time the app is restarted. You will need to go back into Settings > Appearance and press the Apply button to reapply the theme each time.
## Theme Customizations
### Change Theme Color
The default color is set to magenta (my favorite), and you are not limited to that! Simply change the first line:
```css
--metrology-hue: 212;
```
Enter a number between 0 to 355, and you are all set!
(0 = red, 30 = orange, 60 = yellow, 120 = green, 180 = teal, 210 = blue, 300 = purple)
### Change Favorites size
You can make Favorite avatars on the Rooms List smaller or even larger, by changing the `--metrology-favorites-size` variable.