英雄帖:求各位大佬展示一下你们炫酷的obsidian界面吧~

你好,头图下面的小日历怎么设置的

是用插件做到的,具体可以参考这个视频:【Obsidian 颜值党的福音 | 像玩乐高一样轻松打造你的 Home page】 Obsidian 颜值党的福音 | 像玩乐高一样轻松打造你的 Home page_哔哩哔哩_bilibili

除了视频中提到的插件,我还用到了toggl track,来实现最上面的时间统计栏。

1 个赞

好棒,可以分享配置文件吗

toggl没用明白…

秀一下黑色线框风

3 个赞


崇尚默认界面,简单修改css。

2 个赞

标题的css样式可以分享下吗 :blush:

大佬,求同款标题样式的css

请问一下你是怎么把工具栏固定在上面的啊

这个插件

非常感谢!已安装,特别好用,而且我发现这个插件的作者和我最喜欢的主题Blue Topaz是同一个作者,大佬太厉害了

1 个赞

我记得之前有个挺古风的、书卷式的、竖排繁体的界面,不知道是哪位大神的。
两三年前在OB论坛上最受欢迎。
还有人记得吗?

求大佬的字体,非常美观

字体非常美观,求大佬的字体

OB包容性高,每个人都有自己的用法。



3 个赞

字体用的鸿蒙黑体

标题后h1、h2标注

/* Heading */

.HyperMD-header-2:not(.cm-formatting-header),
.markdown-preview-view h2 {
  border-bottom: 2px solid rgba(231, 228, 216, 0.5) !important;
}

.HyperMD-header-1:not(.cm-formatting-header)::after,
h1::after {
  content: " H1";
  color: #48a8ee;
  font-size: 10px;
}

.HyperMD-header-2:not(.cm-formatting-header)::after,
h2::after {
  content: " H2";
  color: #48a8ee;
  font-size: 10px;
}
.HyperMD-header-3:not(.cm-formatting-header)::after,
h3::after {
  content: " H3";
  color: #48a8ee;
  font-size: 10px;
}
.HyperMD-header-4:not(.cm-formatting-header)::after,
h4::after {
  content: " H4";
  color: #48a8ee;
  font-size: 10px;
}
.HyperMD-header-5:not(.cm-formatting-header)::after,
h5::after {
  content: " H5";
  color: #48a8ee;
  font-size: 10px;
}
.HyperMD-header-6:not(.cm-formatting-header)::after,
h6::after {
  content: " H6";
  color: #48a8ee;
  font-size: 8px;
}


标题颜色

.cm-header-1,
.markdown-preview-section h1
{
    color: var(--color-red) ;
}

.cm-header-2,
.markdown-preview-section h2
{
    color: var(--color-orange) ;
}


.cm-header-3,
.markdown-preview-section h3
{
    color: var(--color-yellow) ;
}

.cm-header-4,
.markdown-preview-section h4
{
    color: var(--color-green) ;
}

.cm-header-5,
.markdown-preview-section h5
{
    color: var(--color-aqua) ;
}

.cm-header-6,
.markdown-preview-section h6
{
    color: var(--color-purple) ;
}

配色代码,在flexoki基础上改的


/*
Flexoki
MIT License
Copyright (c) 2023 Steph Ango
https://stephango.com/flexoki
*/
.theme-light {
  --color-red-rgb: 175, 48, 41;
  --color-orange-rgb: 188, 82, 21;
  --color-yellow-rgb: 173, 131, 1;
  --color-green-rgb: 102, 128, 11;
  --color-cyan-rgb: 36, 131, 123;
  --color-blue-rgb: 32, 94, 166;
  --color-purple-rgb: 94, 64, 157;
  --color-pink-rgb: 160, 47, 111;
  
  --color-red: #AF3029;
  --color-orange: #BC5215;
  --color-yellow: #AD8301;
  --color-green: #66800B;
  --color-cyan: #24837B;
  --color-blue: #205EA6;
  --color-purple: #5E409D;
  --color-pink: #A02F6F;
}
.theme-dark {
  --color-red-rgb: 209, 77, 65;
  --color-orange-rgb: 218, 112, 44;
  --color-yellow-rgb:208, 162, 21;
  --color-green-rgb: 135, 154, 57;
  --color-cyan-rgb: 58, 169, 159;
  --color-blue-rgb: 67, 133, 190;
  --color-purple-rgb: 139, 126, 200;
  --color-pink-rgb: 206, 93, 151;

  --color-red: #D14D41;
  --color-orange: #DA702C;
  --color-yellow: #D0A215;
  --color-green: #879A39;
  --color-cyan: #3AA99F;
  --color-blue: #4385BE;
  --color-purple: #8B7EC8;
  --color-pink: #CE5D97;
}
body.theme-light {
  --accent-h: 175;
  --accent-s: 57%;
  --accent-l: 33%;

  --color-base-00: #FFFCF0;
  --color-base-05: #FFFCF0;
  --color-base-10: #F2F0E5;
  --color-base-20: #F2F0E5;
  --color-base-25: #E6E4D9;

  --color-base-30: #E6E4D9;
  --color-base-35: #DAD8CE;
  --color-base-40: #CECDC3;

  --color-base-50: #B7B5AC;
  --color-base-60: #878580;
  --color-base-70: #6F6E69;
  --color-base-100: #100F0F;

  --color-accent: var(--color-cyan);
  --color-accent-1: var(--color-cyan);

}
body.theme-dark {
  --accent-h: 175;
  --accent-s: 49%;
  --accent-l: 45%;

  --color-base-00: #100F0F;
  --color-base-05: #100F0F;
  --color-base-10: #1C1B1A;
  --color-base-20: #1C1B1A;
  --color-base-25: #282726;

  --color-base-30: #282726;
  --color-base-35: #343331;
  --color-base-40: #403E3C;

  --color-base-50: #575653;
  --color-base-60: #6F6E69;
  --color-base-70: #878580;
  --color-base-100: #CECDC3;

  --color-accent: #24837B;
  --color-accent-1: #3AA99F;
}


.view-header-title {
  font-weight: 700;
}


/* dataview汇总行距和字体 */
.is-live-preview .block-language-dataviewjs > p, .is-live-preview .block-language-dataviewjs > span {
  line-height: 1.5;
  font-size: 16px;
}

/* dataview表格内容字体 */
.table-view-table > tbody > tr > td {
  font-size: 16px;
}
/* dataview表格标题字体 */
.table-view-table > thead > tr > th {
  font-size: 16px;
}

/* tasks字体*/
ul > li.task-list-item {
  list-style: none;
  font-size: 16px;
}

/*预览中的字体*/
h2, .markdown-rendered h2 {
  font-size: 16px;
}

.markdown-preview-view {
  font-size: 16px;
}


/*取消链接下划线*/
.internal-link {
  text-decoration: none !important;
}

body {
  --h1-size: 1.3em;
  --h2-size: 1.1em;
  --h3-size: 1.0em;
  --h4-size: 1.0em;
  --h5-size: 0.8em;
  --h6-size: 0.8em;
}

给文件夹加上❶❷❺文字

div[data-path="00收件箱"] .nav-folder-title-content::before
{
  content: "⓿";
}

div[data-path="01日志"] .nav-folder-title-content::before
{
  content: "❶";
}

div[data-path="02卡片"] .nav-folder-title-content::before
{
  content: "❷";
}

div[data-path="03笔记"] .nav-folder-title-content::before
{
  content: "❸";
}

div[data-path="04输出"] .nav-folder-title-content::before
{
  content: "❹";
}

div[data-path="05工作"] .nav-folder-title-content::before
{
  content: "❺";
}

div[data-path="98模板"] .nav-folder-title-content::before
{
  content: "❾";
}

/* http://www.unicode.org/emoji/charts/full-emoji-list.html */

鸿蒙黑体

哥们,分享一下插件,你这个好好看!

主页是用varn 做的components插件

这个是什么主题啊