obsidian-plugin/sean2077_obsidian-dynamic-theme-background
1
0
Fork 0
mirror of https://github.com/sean2077/obsidian-dynamic-theme-background.git synced 2026-07-22 06:44:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: Update CSS for workspace elements

Browse source
This commit is contained in:
sean2077 2025-08-10 12:33:43 +08:00
parent 08a5262d1c
commit 3352d5d491
3 changed files with 53 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
README.md
View file

@ -124,10 +124,12 @@ Type `dtb` in the command palette (Ctrl/Cmd + P) to find all related commands.
## 📝 Notes
1. **Theme Compatibility**: The plugin is optimized for dark themes. You may need to adjust parameters for light themes.
2. **Style Override Notice**: The plugin modifies the following CSS variables to achieve background effects. Be aware this may affect your existing theme:
1. **Dark and Light Theme**: The plugin is optimized for dark themes. You may need to adjust parameters for light themes.
2. **Theme Compatibility**: The plugin uses standard Obsidian CSS variables and should be compatible with most themes. If you encounter issues, please submit an issue on GitHub. If your theme supports defining backgrounds, please choose between enabling theme custom backgrounds and DTB backgrounds, as this may cause style conflicts.
3. **Style Override Notice**: The plugin uses the following CSS variables to achieve background effects. Be aware of possible impacts on existing topics:
```css
/* Workspace Background */
.dtb-enabled :not(.modal):not(.modal *) {
--background-primary: var(--dtb-bg-color) !important;
--background-primary-alt: var(--dtb-bg-color) !important;
@ -148,6 +150,21 @@ Type `dtb` in the command palette (Ctrl/Cmd + P) to find all related commands.
bottom: 0;
z-index: -1;
}
/* Changes to other parts of the workspace */
.dtb-enabled .workspace-tab-header-container,
.dtb-enabled .workspace-tab-header-container .workspace-tab-header.tappable.is-active,
.dtb-enabled .workspace-tab-header.tappable.is-active,
.dtb-enabled .workspace-split.mod-vertical.mod-root,
.dtb-enabled .workspace-split.mod-horizontal.mod-sidedock.mod-left-split,
.dtb-enabled .workspace-split.mod-horizontal.mod-sidedock.mod-right-split,
.dtb-enabled .titlebar-button-container.mod-right,
.dtb-enabled .status-bar,
.dtb-enabled .workspace-ribbon::before,
.dtb-enabled .workspace-ribbon {
background-color: var(--dtb-bg-color) !important;
}
```
## 📄 License

21
README.zh.md
View file

@ -124,10 +124,12 @@ pull request: https://github.com/obsidianmd/obsidian-releases/pull/7359
## 📝 注意事项
1. **主题兼容性**：插件主要针对暗色主题优化，浅色主题使用时可能需要调整参数。
2. **样式覆盖说明**：插件会修改以下 CSS 变量来实现背景效果，请了解可能对现有主题的影响：
1. **明暗主题**：插件主要针对暗色主题优化，浅色主题使用时可能需要调整参数。
2. **主题兼容性**：插件使用 Obsidian 标准 CSS 变量，应该与大多数主题兼容。如遇问题请在 GitHub 提交 issue；如果主题支持定义背景，请在启用主题自定义背景和 DTB 背景之间二选一，因为这可能会导致样式冲突。
3. **样式覆盖说明**：插件使用以下 CSS 变量来实现背景效果，请知晓可能对现有主题的影响：
```css
/* 工作区背景 */
.dtb-enabled :not(.modal):not(.modal *) {
--background-primary: var(--dtb-bg-color) !important;
--background-primary-alt: var(--dtb-bg-color) !important;
@ -148,6 +150,21 @@ pull request: https://github.com/obsidianmd/obsidian-releases/pull/7359
bottom: 0;
z-index: -1;
}
/* 针对工作区其他部分的修改 */
.dtb-enabled .workspace-tab-header-container,
.dtb-enabled .workspace-tab-header-container .workspace-tab-header.tappable.is-active,
.dtb-enabled .workspace-tab-header.tappable.is-active,
.dtb-enabled .workspace-split.mod-vertical.mod-root,
.dtb-enabled .workspace-split.mod-horizontal.mod-sidedock.mod-left-split,
.dtb-enabled .workspace-split.mod-horizontal.mod-sidedock.mod-right-split,
.dtb-enabled .titlebar-button-container.mod-right,
.dtb-enabled .status-bar,
.dtb-enabled .workspace-ribbon::before,
.dtb-enabled .workspace-ribbon {
background-color: var(--dtb-bg-color) !important;
}
```
## 📄 许可证

15
styles.css
View file

@ -90,6 +90,20 @@
z-index: -1;
}
/* 针对工作区其他部分的修改 */
.dtb-enabled .workspace-tab-header-container,
.dtb-enabled .workspace-tab-header-container .workspace-tab-header.tappable.is-active,
.dtb-enabled .workspace-tab-header.tappable.is-active,
.dtb-enabled .workspace-split.mod-vertical.mod-root,
.dtb-enabled .workspace-split.mod-horizontal.mod-sidedock.mod-left-split,
.dtb-enabled .workspace-split.mod-horizontal.mod-sidedock.mod-right-split,
.dtb-enabled .titlebar-button-container.mod-right,
.dtb-enabled .status-bar,
.dtb-enabled .workspace-ribbon::before,
.dtb-enabled .workspace-ribbon {
background-color: var(--dtb-bg-color) !important;
}
/* =============================================================================
🧩 布局组件
============================================================================= */
@ -222,6 +236,7 @@
gap: 0.5rem;
flex-wrap: nowrap;
white-space: nowrap;
margin: auto 0; /* 控件垂直居中 */
}
/* ===== 炫酷动画效果 ===== */