mirror of
https://github.com/kazi-aidah/blobob.git
synced 2026-07-22 04:30:27 +00:00
Added Style Settings to color min-max titlebar icons
This commit is contained in:
Kazi Aidah Haque
parent
0376b715b4
commit
4003865995
4 changed files with 261 additions and 222 deletions
42
LICENSE
42
LICENSE
|
|
@ -1,21 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2025 Kazi Aidah Haque
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2025 Kazi Aidah Haque
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
|
|||
358
README.md
358
README.md
|
|
@ -1,179 +1,179 @@
|
|||
<!-- <img src="assets/bob%20squircle.png" width="100" /> -->
|
||||
|
||||
# blobob theme
|
||||
An animated theme for Obsidian!
|
||||
|
||||
|
||||
|
||||
As a self-taught animator with 7 years of experience, I love seeing motion in interactions. So I created this theme with 60+ colour options and, of course, ANIMATIONS! ( ≧ᗜ≦ )
|
||||
|
||||
It supports [Style Settings](https://github.com/mgmeyers/obsidian-style-settings#obsidian-style-settings-plugin) for lots of customization. Blobob Theme is currently in development, so if you find issues or want features or more styles, please create an issue [here](https://github.com/Kazi-Aidah/blobob/issues).
|
||||
|
||||
> I'd recommend trying this theme out without reading the rest of the README for surprises.
|
||||
|
||||
---
|
||||
# Colour Options
|
||||
**Note:** Heading is green due to my current Obsidian accent color. Some themes override it with their own.
|
||||
|
||||
### Dark Theme Colors
|
||||
|
||||
| **Amoled**<br> | **Darker Gray**<br> |
|
||||
|-----------------------------------------------|------------------------------------------------------------|
|
||||
| **Neutral Gray**<br> | **Slate Smoke**<br> |
|
||||
| **Arctic Ice**<br> | **Noble Blue**<br> |
|
||||
| **Dark Night**<br> | **Deep Blue**<br> |
|
||||
| **Deep Purple**<br> | **Violent Dream**<br> |
|
||||
| **Magic Purple**<br> | **Lavendar**<br> |
|
||||
| **Emerald**<br> | **Muted Green**<br> |
|
||||
| **More Olives**<br> | **Deep Green**<br> |
|
||||
| **Rose Gold**<br> | **Crimson Twilight**<br> |
|
||||
| **Wine**<br> | **Deep Hotpink**<br> |
|
||||
| **Deep Magenta**<br> | **Golden Earth**<br> |
|
||||
| **Golden Hour**<br> | **Caramel**<br> |
|
||||
| **Chocolate**<br> | **Dark Chocolate**<br> |
|
||||
| **Comfort Chocolate**<br> | **Tasty Chocolate**<br> |
|
||||
| **Tasty Chocolate 2**<br> | **Leather**<br> |
|
||||
| **Mafia Red**<br> | **Deep Red**<br> |
|
||||
|
||||
### Light Theme Colors
|
||||
|
||||
| **Cloud White**<br> | **Paper White**<br> |
|
||||
|------------------------------------------------------------|------------------------------------------------------------|
|
||||
| **Light Gray**<br> | **Sand**<br> |
|
||||
| **Peach**<br> | **Yellow**<br> |
|
||||
| **Green**<br> | **Cyan**<br> |
|
||||
| **Blue**<br> | **Azure**<br> |
|
||||
| **Purple**<br> | **Pink**<br> |
|
||||
| **Herb**<br> | **Olive**<br> |
|
||||
| **Jade**<br> | **Rose**<br> |
|
||||
| **Yellow Teeth**<br> | **Toothpaste**<br> |
|
||||
| **Blood**<br> | **Corporate**<br> |
|
||||
| **Disgust**<br> | **Payesh**<br> |
|
||||
| **Chicken**<br> | **Cream**<br> |
|
||||
| **Cream Blue**<br> | **50% Gray**<br> |
|
||||
|
||||
**My favourites are:**
|
||||
|
||||
*Favourite Dark Themes:* Dark Night, Golden Earth, Crimson Twilight, Emerald, Mafia Red
|
||||
|
||||
*Favourite Light Themes:* Payesh, Chicken, Corporate, Yellow Teeth
|
||||
|
||||
---
|
||||
|
||||
## Settings Tabs
|
||||
<!--  -->
|
||||
|
||||
|
||||
It is animated using ease-in-ease-out and anticipation animation principles.
|
||||
|
||||
## Setting Items
|
||||
|
||||
|
||||
## Right-click Menu
|
||||
I absolutely love how this looks.
|
||||
|
||||
|
||||
## Toggle Animation
|
||||
|
||||
|
||||
## Checkboxes
|
||||
|
||||
|
||||
|
||||
## Hide Nav Buttons
|
||||
|
||||
|
||||
## Animated Tabs
|
||||
|
||||
|
||||
I personally have `Alt + <` and `Alt + >` for easy tab navigation.
|
||||
|
||||
## Tab Bar
|
||||
|  |  |
|
||||
| ---------------------------- | ----------------------------- |
|
||||
|
||||
**Left:** Fixed stack tabs button along with the left sidebar button (which moves into the sidebar when active).
|
||||
|
||||
**Right:** Fixed + Add Tab button & right sidebar button, custom mix-max-close buttons.
|
||||
|
||||
Design Idea: Essential buttons should stay fixed.
|
||||
|
||||
### Pinned Tabs
|
||||
|
||||
|
||||
Design idea: Sharp when active, darkened and standing down when inactive (like bodyguards).
|
||||
|
||||
## Callout Style
|
||||
|
||||
|
||||
# Style Settings
|
||||
You can use the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings#obsidian-style-settings-plugin) plugin to activate these extra styles!
|
||||
|
||||
## Multiple Theme Colors
|
||||
|
||||
|
||||
6 Button Styles + 35 Dark Theme Colors 👀 + 30+ Light Theme Colors!!
|
||||
|
||||
## Active Line Highlighting
|
||||
|
||||
|
||||
## Active Line Dimming & Floating
|
||||
|
||||
|
||||
## Properties Styles
|
||||
The Properties Styling does not affect the "Show File Properties" brought via Command Palette.
|
||||
|
||||
Style 1:
|
||||
|
||||
|
||||
Style 2:
|
||||
|
||||
|
||||
Style 3:
|
||||
|
||||
|
||||
Style 4:
|
||||
|
||||
|
||||
### Cool Properties Features
|
||||
1. Dim properties unless hovered
|
||||
|
||||
|
||||
2. Hide arrows in the properties heading
|
||||
3. Center the properties heading
|
||||
4. cssclasses & tag styles
|
||||
5. Metadata key colors
|
||||
|
||||
## Folder Styles
|
||||
|  |  |
|
||||
| ------------------------------ | -------------------------------- |
|
||||
|
||||
<!-- ## Hide Calendar Tab Icon -->
|
||||
|
||||
## Custom Bullets
|
||||
Define Custom Bullets!
|
||||
|
||||
|
||||
|
||||
## Hiding
|
||||
1. Focus Mode – Hides the tab bar, min-max-close buttons & status bar
|
||||
2. Hide Status Bar - Hides the Status Bar
|
||||
3. Hide Breadcrumbs - Hides the parent paths in view-header
|
||||
|
||||
## Why is the theme named ***blobob***?
|
||||
|
||||
I drew **Blob** a long time ago as a simple character concept.
|
||||
|
||||
At one point, I planned to turn it into a small animated task-reminder app using Rive, but the idea never went further. The character stayed with me, though.
|
||||
|
||||
|
||||
|
||||
In the theme, the main face you see is the yellow character I named **Bob**:
|
||||
|
||||
|
||||
|
||||
**Blob** is the original concept, **Bob** is the face used in the theme.
|
||||
Together, they became **blobob**.
|
||||
|
||||
|
||||
|
||||
<!-- <img src="assets/bob%20squircle.png" width="100" /> -->
|
||||
|
||||
# blobob theme
|
||||
An animated theme for Obsidian!
|
||||
|
||||
|
||||
|
||||
As a self-taught animator with 7 years of experience, I love seeing motion in interactions. So I created this theme with 60+ colour options and, of course, ANIMATIONS! ( ≧ᗜ≦ )
|
||||
|
||||
It supports [Style Settings](https://github.com/mgmeyers/obsidian-style-settings#obsidian-style-settings-plugin) for lots of customization. Blobob Theme is currently in development, so if you find issues or want features or more styles, please create an issue [here](https://github.com/Kazi-Aidah/blobob/issues).
|
||||
|
||||
> I'd recommend trying this theme out without reading the rest of the README for surprises.
|
||||
|
||||
---
|
||||
# Colour Options
|
||||
**Note:** Heading is green due to my current Obsidian accent color. Some themes override it with their own.
|
||||
|
||||
### Dark Theme Colors
|
||||
|
||||
| **Amoled**<br> | **Darker Gray**<br> |
|
||||
|-----------------------------------------------|------------------------------------------------------------|
|
||||
| **Neutral Gray**<br> | **Slate Smoke**<br> |
|
||||
| **Arctic Ice**<br> | **Noble Blue**<br> |
|
||||
| **Dark Night**<br> | **Deep Blue**<br> |
|
||||
| **Deep Purple**<br> | **Violent Dream**<br> |
|
||||
| **Magic Purple**<br> | **Lavendar**<br> |
|
||||
| **Emerald**<br> | **Muted Green**<br> |
|
||||
| **More Olives**<br> | **Deep Green**<br> |
|
||||
| **Rose Gold**<br> | **Crimson Twilight**<br> |
|
||||
| **Wine**<br> | **Deep Hotpink**<br> |
|
||||
| **Deep Magenta**<br> | **Golden Earth**<br> |
|
||||
| **Golden Hour**<br> | **Caramel**<br> |
|
||||
| **Chocolate**<br> | **Dark Chocolate**<br> |
|
||||
| **Comfort Chocolate**<br> | **Tasty Chocolate**<br> |
|
||||
| **Tasty Chocolate 2**<br> | **Leather**<br> |
|
||||
| **Mafia Red**<br> | **Deep Red**<br> |
|
||||
|
||||
### Light Theme Colors
|
||||
|
||||
| **Cloud White**<br> | **Paper White**<br> |
|
||||
|------------------------------------------------------------|------------------------------------------------------------|
|
||||
| **Light Gray**<br> | **Sand**<br> |
|
||||
| **Peach**<br> | **Yellow**<br> |
|
||||
| **Green**<br> | **Cyan**<br> |
|
||||
| **Blue**<br> | **Azure**<br> |
|
||||
| **Purple**<br> | **Pink**<br> |
|
||||
| **Herb**<br> | **Olive**<br> |
|
||||
| **Jade**<br> | **Rose**<br> |
|
||||
| **Yellow Teeth**<br> | **Toothpaste**<br> |
|
||||
| **Blood**<br> | **Corporate**<br> |
|
||||
| **Disgust**<br> | **Payesh**<br> |
|
||||
| **Chicken**<br> | **Cream**<br> |
|
||||
| **Cream Blue**<br> | **50% Gray**<br> |
|
||||
|
||||
**My favourites are:**
|
||||
|
||||
*Favourite Dark Themes:* Dark Night, Golden Earth, Crimson Twilight, Emerald, Mafia Red
|
||||
|
||||
*Favourite Light Themes:* Payesh, Chicken, Corporate, Yellow Teeth
|
||||
|
||||
---
|
||||
|
||||
## Settings Tabs
|
||||
<!--  -->
|
||||
|
||||
|
||||
It is animated using ease-in-ease-out and anticipation animation principles.
|
||||
|
||||
## Setting Items
|
||||
|
||||
|
||||
## Right-click Menu
|
||||
I absolutely love how this looks.
|
||||
|
||||
|
||||
## Toggle Animation
|
||||
|
||||
|
||||
## Checkboxes
|
||||
|
||||
|
||||
|
||||
## Hide Nav Buttons
|
||||
|
||||
|
||||
## Animated Tabs
|
||||
|
||||
|
||||
I personally have `Alt + <` and `Alt + >` for easy tab navigation.
|
||||
|
||||
## Tab Bar
|
||||
|  |  |
|
||||
| ---------------------------- | ----------------------------- |
|
||||
|
||||
**Left:** Fixed stack tabs button along with the left sidebar button (which moves into the sidebar when active).
|
||||
|
||||
**Right:** Fixed + Add Tab button & right sidebar button, custom mix-max-close buttons.
|
||||
|
||||
Design Idea: Essential buttons should stay fixed.
|
||||
|
||||
### Pinned Tabs
|
||||
|
||||
|
||||
Design idea: Sharp when active, darkened and standing down when inactive (like bodyguards).
|
||||
|
||||
## Callout Style
|
||||
|
||||
|
||||
# Style Settings
|
||||
You can use the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings#obsidian-style-settings-plugin) plugin to activate these extra styles!
|
||||
|
||||
## Multiple Theme Colors
|
||||
|
||||
|
||||
6 Button Styles + 35 Dark Theme Colors 👀 + 30+ Light Theme Colors!!
|
||||
|
||||
## Active Line Highlighting
|
||||
|
||||
|
||||
## Active Line Dimming & Floating
|
||||
|
||||
|
||||
## Properties Styles
|
||||
The Properties Styling does not affect the "Show File Properties" brought via Command Palette.
|
||||
|
||||
Style 1:
|
||||
|
||||
|
||||
Style 2:
|
||||
|
||||
|
||||
Style 3:
|
||||
|
||||
|
||||
Style 4:
|
||||
|
||||
|
||||
### Cool Properties Features
|
||||
1. Dim properties unless hovered
|
||||
|
||||
|
||||
2. Hide arrows in the properties heading
|
||||
3. Center the properties heading
|
||||
4. cssclasses & tag styles
|
||||
5. Metadata key colors
|
||||
|
||||
## Folder Styles
|
||||
|  |  |
|
||||
| ------------------------------ | -------------------------------- |
|
||||
|
||||
<!-- ## Hide Calendar Tab Icon -->
|
||||
|
||||
## Custom Bullets
|
||||
Define Custom Bullets!
|
||||
|
||||
|
||||
|
||||
## Hiding
|
||||
1. Focus Mode – Hides the tab bar, min-max-close buttons & status bar
|
||||
2. Hide Status Bar - Hides the Status Bar
|
||||
3. Hide Breadcrumbs - Hides the parent paths in view-header
|
||||
|
||||
## Why is the theme named ***blobob***?
|
||||
|
||||
I drew **Blob** a long time ago as a simple character concept.
|
||||
|
||||
At one point, I planned to turn it into a small animated task-reminder app using Rive, but the idea never went further. The character stayed with me, though.
|
||||
|
||||
|
||||
|
||||
In the theme, the main face you see is the yellow character I named **Bob**:
|
||||
|
||||
|
||||
|
||||
**Blob** is the original concept, **Bob** is the face used in the theme.
|
||||
Together, they became **blobob**.
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
{
|
||||
"name": "blobob",
|
||||
"author": "Kazi Aidah Haque",
|
||||
"authorUrl": "https://github.com/Kazi-Aidah",
|
||||
"minAppVersion": "1.5.0",
|
||||
"version": "0.1.0",
|
||||
"repo": "Kazi-Aidah/blobob",
|
||||
"screenshot": "assets/screenshot.png",
|
||||
"modes": ["dark", "light"]
|
||||
}
|
||||
{
|
||||
"name": "blobob",
|
||||
"author": "Kazi Aidah Haque",
|
||||
"authorUrl": "https://github.com/Kazi-Aidah",
|
||||
"minAppVersion": "1.5.0",
|
||||
"version": "0.1.0",
|
||||
"repo": "Kazi-Aidah/blobob",
|
||||
"screenshot": "assets/screenshot.png",
|
||||
"modes": ["dark", "light"]
|
||||
}
|
||||
|
|
|
|||
63
theme.css
63
theme.css
|
|
@ -905,12 +905,13 @@
|
|||
--background-modifier-border-focus: #5d503c;
|
||||
}
|
||||
|
||||
|
||||
/* .theme-dark ::selection,
|
||||
.theme-dark ::selection,
|
||||
.theme-light ::selection {
|
||||
color: #ffffff;
|
||||
background-color: hsl(var(--interactive-accent-hsl), 0.3) !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.cm-highlight, mark {
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
|
|
@ -3519,17 +3520,20 @@ a,
|
|||
.clickable-icon {
|
||||
transition: all 0.1s ease;
|
||||
border-radius: 20px !important;
|
||||
transition: 0.2s ease cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.clickable-icon:hover {
|
||||
/* transform: scale(1.2); */
|
||||
transition: all 0.1s ease;
|
||||
border-radius: 20px !important;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.clickable-icon:active {
|
||||
border-radius: 10px !important;
|
||||
/* transform: scale(0.8); */
|
||||
transform: scale(0.8);
|
||||
color: var(--color-accent-1);
|
||||
background-color: hsla(var(--interactive-accent-hsl), 0.2) !important;
|
||||
}
|
||||
|
|
@ -3564,6 +3568,13 @@ a,
|
|||
}
|
||||
|
||||
.workspace-tab-header-new-tab .clickable-icon:hover {
|
||||
border-radius: 20px !important;
|
||||
color: var(--color-green);
|
||||
background-color: rgba(var(--color-green-rgb), 0.2) !important;
|
||||
transition: 0.2s ease !important;
|
||||
}
|
||||
|
||||
.workspace-tab-header-new-tab .clickable-icon:active {
|
||||
border-radius: 8px !important;
|
||||
color: var(--color-green);
|
||||
background-color: rgba(var(--color-green-rgb), 0.2) !important;
|
||||
|
|
@ -3919,7 +3930,8 @@ vertical-tab-nav-item-icon,
|
|||
|
||||
.setting-hotkey,
|
||||
.suggestion-hotkey {
|
||||
color: var(--color-accent-2) !important;
|
||||
/* color: var(--color-accent-2) !important; */
|
||||
/* color: var(--text-on-accent); */
|
||||
background-color: hsla(var(--interactive-accent-hsl), 0.3) !important;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
|
@ -5503,7 +5515,6 @@ th {
|
|||
|
||||
/* ===== MIN MAX CLOSE BUTTONS ===== */
|
||||
|
||||
/* base titlebar buttons */
|
||||
.titlebar-button {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
|
|
@ -5543,16 +5554,32 @@ th {
|
|||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.titlebar-button.mod-maximize:hover {
|
||||
color: var(--color-yellow);
|
||||
background-color: rgba(var(--color-yellow-rgb), 0.2) !important;
|
||||
|
||||
.g-min-y-max {
|
||||
.titlebar-button.mod-maximize:hover {
|
||||
color: var(--color-yellow);
|
||||
background-color: rgba(var(--color-yellow-rgb), 0.2) !important;
|
||||
}
|
||||
|
||||
.titlebar-button.mod-minimize:hover {
|
||||
color: var(--color-green);
|
||||
background-color: rgba(var(--color-green-rgb), 0.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-button.mod-minimize:hover {
|
||||
color: var(--color-green);
|
||||
background-color: rgba(var(--color-green-rgb), 0.2) !important;
|
||||
.y-min-g-max {
|
||||
.titlebar-button.mod-maximize:hover {
|
||||
color: var(--color-green);
|
||||
background-color: rgba(var(--color-green-rgb), 0.2) !important;
|
||||
}
|
||||
|
||||
.titlebar-button.mod-minimize:hover {
|
||||
color: var(--color-yellow);
|
||||
background-color: rgba(var(--color-yellow-rgb), 0.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* close */
|
||||
.titlebar-button.mod-close::before {
|
||||
-webkit-mask-image: url("data:image/svg+xml;utf8,\
|
||||
|
|
@ -6642,6 +6669,18 @@ settings:
|
|||
- label: Centered
|
||||
value: centered-statusbar
|
||||
|
||||
- id: color-min-max
|
||||
title: Color Minimize & Maximize buttons
|
||||
type: class-select
|
||||
default: none
|
||||
options:
|
||||
- label: none
|
||||
value: none
|
||||
- label: Green-min Yellow-max
|
||||
value: g-min-y-max
|
||||
- label: Yellow-min Green-max
|
||||
value: y-min-g-max
|
||||
|
||||
- id: hide-breadcrumbs
|
||||
title: Hide Breadcrumbs
|
||||
type: class-toggle
|
||||
|
|
|
|||
Loading…
Reference in a new issue