Home

Awesome

<div align="center"> <img src="./icon.png" style="width: 8em; height: 8em;">

GitHub release (latest by date including pre-releases) GitHub Release Date GitHub License GitHub last commit GitHub repo size hits GitHub all releases<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> All Contributors

<!-- ALL-CONTRIBUTORS-BADGE:END -->

简体中文 | English

</div>

🌙Dark+

A dark theme (which also supports light mode, can you imagine that ~) of SiYuan Note.

It is now on the shelves of the Siyuan Notes Community Bazaar. If you like this theme, welcome to light up ⭐ for this project!

NOTICE

❗The functions have been migrated to plugins and disabled by default in this theme❗

⚠️The functions have been migrated to plugins but can still be used in the theme⚠️

FEEDBACK

PREVIEW

light-relative light-location

dark-relative dark-location

row-level element alignment-relative row-level element alignment-location

List indentation alignment-relative List indentation alignment-location

Common 2:1 monospace font for Chinese and Western languages.: 仿宋, 黑体, 楷体, 隶书, 宋体, 新宋体, 幼圆

The 2:1 monospaced font in Chinese and Western characters used in the schematic diagram:

INTRODUCTION

CONTRIBUTOR INTRODUCTION

FunctionContributorProject
inline comments and noteslangzhousiyuan-note/siyuan-comment at main · langzhou/siyuan-note · GitHub
list mind mapsroyc01royc01/notion-theme: notion复刻
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/tswwe"><img src="https://avatars.githubusercontent.com/u/36465489?v=4?s=100" width="100px;" alt="thxnder"/><br /><sub><b>thxnder</b></sub></a><br /><a href="https://github.com/Zuoqiu-Yingyi/siyuan-theme-dark-plus/commits?author=tswwe" title="Code">💻</a> <a href="https://github.com/Zuoqiu-Yingyi/siyuan-theme-dark-plus/issues?q=author%3Atswwe" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/langzhou"><img src="https://avatars.githubusercontent.com/u/6987229?v=4?s=100" width="100px;" alt="langzhou"/><br /><sub><b>langzhou</b></sub></a><br /><a href="https://github.com/Zuoqiu-Yingyi/siyuan-theme-dark-plus/commits?author=langzhou" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/royc01"><img src="https://avatars.githubusercontent.com/u/38906705?v=4?s=100" width="100px;" alt="royc01"/><br /><sub><b>royc01</b></sub></a><br /><a href="#ideas-royc01" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/Zuoqiu-Yingyi/siyuan-theme-dark-plus/commits?author=royc01" title="Code">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/UserZYF"><img src="https://avatars.githubusercontent.com/u/38289979?v=4?s=100" width="100px;" alt="UserZYF"/><br /><sub><b>UserZYF</b></sub></a><br /><a href="#video-UserZYF" title="Videos">📹</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/StarDustSheep"><img src="https://avatars.githubusercontent.com/u/114859111?v=4?s=100" width="100px;" alt="吃星尘的羊"/><br /><sub><b>吃星尘的羊</b></sub></a><br /><a href="#design-StarDustSheep" title="Design">🎨</a></td> </tr> </tbody> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->

PS: The table is generated automatically using All Contributors · GitHub, go to emoji key to see the contribution type.

SHORTCUT KEYS

THEME SHORTCUT KEYS

Shortcut KeysOperational objectivesFunction
<kbd>Middle Mouse Button</kbd><br/>❗Disabled by default in the v2.8.10+ version of SiYuanentire windowopen the block or hyperlink in a new window<br/>❗Migrated to plugin Web Page View webview
<kbd>Right Mouse Button</kbd>slider on the right side of the document / current reading progress indicatorjump to where the document was last browsed
<kbd>Shift + Middle Mouse Button</kbd><br/>❗Disabled by default in the v2.8.10+ version of SiYuanentire windowopen the block in a new window and focus<br/>❗Migrated to plugin Web Page View webview
<kbd>Alt + Middle Mouse Button</kbd><br/>❗Disabled by default in the v2.9.8+ version of SiYuanentire windowopen the Monaco Editor in a new window and edit the content<br/>❗Migrated to plugin Integrated Edit Environment monaco-editor
<kbd>Shift + Alt + Middle Mouse Button</kbd><br/>❗Disabled by default in the v2.9.8+ version of SiYuanentire windowopen the Monaco Editor in a new window and edit the markdown source code<br/>❗Migrated to plugin Integrated Edit Environment monaco-editor
<kbd>Ctrl/⌘ + Mouse Wheel</kbd><br/>❗Disabled by default in the v2.9.8+ version of SiYuanentire windowadjust the edit area font size
<kbd>Ctrl/⌘ + Middle Mouse Button</kbd>hyperlinkset the custom block attributes
<kbd>Ctrl/⌘ + Middle Mouse Button</kbd>video block/audio block/iframe blockwrite the current timestamp to the clipboard
<kbd>Ctrl/⌘ + Left Mouse Button</kbd>video block/audio block/iframe blockjump to the point in time set by the custom block attribute time
<kbd>Ctrl/⌘ + Left Mouse Button</kbd>widget block/iframe blockreload the block contents
<kbd>Double-click with Left Mouse Button</kbd>widget block/iframe blockreload the block contents
<kbd>Ctrl/⌘ + F1</kbd><br/>Requires to be enabled in a custom profilecurrent documentrender the custom style for all blocks in the current document
<kbd>Ctrl/⌘ + F5</kbd>entire windowdisplay block content in full screen
<kbd>Shift + Alt + B</kbd><br/>Requires to be enabled in a custom profileentire windowturn on/off the feature of tabs are arranged vertically
<kbd>Shift + Alt + E</kbd><br/>Requires to be enabled in a custom profileentire windowturn on/off the feature of displaying the mark text
<kbd>Shift + Alt + F</kbd><br/>Requires to be enabled in a custom profileentire windowturn on/off the focus mode (collapse/expand the feature panels)
<kbd>Shift + Alt + G</kbd><br/>Requires to be enabled in a custom profileentire windowturn on/off list guides (list, table list, mind map list)
<kbd>Shift + Alt + I</kbd><br/>Requires to be enabled in a custom profileentire windowturn on/off invert color mode
<kbd>Shift + Alt + L</kbd><br/>Requires to be enabled in a custom profileentire windowturn on/off record the current browsing location
<kbd>Shift + Alt + M</kbd><br/>Requires to be enabled in a custom profileentire windowturn on/off block menu enhancement
<kbd>Shift + Alt + N</kbd><br/>Requires to be enabled in a custom profileentire windowopen the block where the cursor is located in a new window
<kbd>Shift + Alt + R</kbd><br/>Requires to be enabled in a custom profileentire windowuse the web background images
<kbd>Shift + Alt + T</kbd><br/>Requires to be enabled in a custom profileentire windowturn on/off typewriter mode
<kbd>Shift + Alt + C</kbd><br/>Requires to be enabled in a custom profilecurrent documentcopy the full markdown text of the current document to the clipboard
<kbd>Shift + Alt + X</kbd><br/>Requires to be enabled in a custom profilecurrent documentcut the full markdown text of the current document to the clipboard
<kbd>Shift + Alt + D</kbd><br/>Requires to be enabled in a custom profilecurrent documentdelete the full content of the current documen
<kbd>Shift + Alt + ↑</kbd><br/>Requires to be enabled in a custom profilecurrent documentcollapse all sub-headings of the current document
<kbd>Shift + Alt + ↓</kbd><br/>Requires to be enabled in a custom profilecurrent documentexpand all sub-headings of the current document
<kbd>Ctrl/⌘ + Shift + Alt + R</kbd><br/>Requires to be enabled in a custom profileentire windowuse the custom background images
<kbd>Ctrl/⌘ + Shift + Alt + N</kbd><br/>Requires to be enabled in a custom profileentire windowopen the block and focus where the cursor is located in a new window
<kbd>Ctrl/⌘ + Shift + Alt + L</kbd><br/>Requires to be enabled in a custom profileentire windowclear the current document browsing location history
<kbd>Ctrl/⌘ + Shift + Alt + O</kbd><br/>Requires to be enabled in a custom profilecurrent documentcopy the current document outline as an ordered list
<kbd>Ctrl/⌘ + Shift + Alt + U</kbd><br/>Requires to be enabled in a custom profilecurrent documentcopy the current document outline as an unordered list
<kbd>Ctrl/⌘ + Shift + Alt + T</kbd><br/>Requires to be enabled in a custom profilecurrent documentcopy the current document outline as a task list

EDITOR SHORTCUT KEYS

Shortcut KeysFunction
<kbd>Alt + Z</kbd>toggle word wrap
<kbd>Ctrl/⌘ + Alt + P</kbd>window pin/unpin
<kbd>Ctrl/⌘ + O</kbd>open file in VS Code
<kbd>Ctrl/⌘ + Shift + O</kbd>open directory in VS Code
<kbd>Ctrl/⌘ + Alt + C</kbd>copy link
<kbd>Ctrl/⌘ + Shift + Alt + C</kbd>copy full link

CUSTOM BLOCKS ATTRIBUTES

Operational objectivesAttribute NameAttribute ValueFunction
all types of blocksfont-family等线<br/>方正舒体<br/>方正姚体<br/>仿宋<br/>黑体<br/>华文彩云<br/>华文仿宋<br/>华文琥珀<br/>华文楷体<br/>华文隶书<br/>华文宋体<br/>华文细黑<br/>华文新魏<br/>华文行楷<br/>华文中宋<br/>楷体<br/>隶书<br/>宋体<br/>微软雅黑<br/>新宋体<br/>幼圆Sets the font family used by the block.
all types of blocksrenderdanmaku<br/>弹幕<br/>(You can separate multiple attribute values with spaces)Set the block to the scrolling danmaku block style.
all types of blocksrenderscroll<br/>滚屏<br/>滚动<br/>(You can separate multiple attribute values with spaces)Set the vertical scroll bar for the overly long block.
all types of blocksrenderinvert<br/>反色<br/>(You can separate multiple attribute values with spaces)Render all images as inverted colors.
all types of blocksmarkdisplay<br/>显示<br/>(You can separate multiple attribute values with spaces)Display marked text.
document blockslocationblock IDThe current document browsing location.
document blocksauto-num-h0<br/>false<br/>禁用<br/>关闭<br/>Disables automatic numbering of subheading in the document.
document blocksauto-num-f图<br/>图片<br/>Fig.<br/>figure<br/>Figure<br/>FIGUREEnable automatic numbering of pictures in the document.
document blocksauto-num-t表<br/>表格<br/>Tab.<br/>table<br/>Table<br/>TABLEEnable automatic numbering of tables in the document.
document blocksrenderid<br/>(You can separate multiple attribute values with spaces)Renders the ID of each block.
document blocksrenderhref<br/>(You can separate multiple attribute values with spaces)Renders the URL of each hyperlink.
document blocksrenderindex<br/>(You can separate multiple attribute values with spaces)Renders the ordinal number of the current block in the document.
document blocksrendercontent<br/>(You can separate multiple attribute values with spaces)Renders the contents of the input box.
document blocksrenderoutline<br/>(You can separate multiple attribute values with spaces)Renders the outline of a hovering block.
non-document blockspositiontop<br/>bottomPin the block to the top/bottom of the parent container.
non-document blocksstyleCSS stylesSet a custom style for the block.
non-document blockstitleAny valueSets the title of the block.
video blocks/audio blocks/widget blocks/iframe blockswidth100%Sets the width of the iframe window to the document width.
video blocks/audio blockstimess<br/>ss.ms<br/>mm:ss<br/>mm:ss.ms<br/>hh:mm:ss<br/>hh:mm:ss.msTimestamp.
list blocks & document blockstypetable<br/>表格<br/>(You can separate multiple attribute values with spaces)Renders the list as a table.
list blocks & document blockstype脑图<br/>map<br/>导图<br/>mind-map<br/>思维导图<br/>(You can separate multiple attribute values with spaces)Renders the list as a mind map.
list blocks & document blockstype看板<br/>board<br/>(You can separate multiple attribute values with spaces)Renders the list as a board.
table blockstable-widthauto<br/>自动<br/>(You can separate multiple attribute values with spaces)Enable table content wraps.
table blockstable-widthequal<br/>等宽<br/>(You can separate multiple attribute values with spaces)Enable equal cell.
paragraph blockstype图标题<br/>表标题<br/>figure-title<br/>table-title<br/>(You can separate multiple attribute values with spaces)Figure titles/table titles are counted automatically.
paragraph blockswriting-modehorizontal-tb<br/>vertical-rl<br/>vertical-lr<br/>sideways-rl<br/>sideways-lrThis is shown in the following table.

example-writing-mode

FUNCTIONAL DESCRIPTION

OTHER FEATURES

CUSTOM CONFIG

Custom configuration filesProduct
<workspace>/data/widgets/custom.jsTheme feature configuration, which overwrites the corresponding value in file <workspace>/conf/appearance/themes/Dark+/style/module/config.js
<workspace>/data/widgets/custom.cssThemes share style configuration, which overwrites the corresponding value in file <workspace>/conf/appearance/themes/Dark+/style/module/config.css
<workspace>/data/widgets/custom-light.cssTheme light color style configuration, which overwrites the corresponding value in file <workspace>/conf/appearance/themes/Dark+/style/config/light.css
<workspace>/data/widgets/custom-dark.cssTheme dark config style configuration, which overwrites the corresponding value in file <workspace>/conf/appearance/themes/Dark+/style/color/dark.css

CONFIG EXAMPLE

custom.js

/**
 * File Path
 *    <workspace>/data/widgets/custom.js
 * Example function:
 *    Custom background image list
 *        The directory of the light background image in the example is <workspace>/data/snippets/images/background-light
 *        The directory of the dark background image in the example is <workspace>/data/snippets/images/background-dark
 *
 *    Turn on the Copy current document full-text shortcut (Shift + Alt + C)
 */

export const config = {
    theme: {
        background: {
            image: {
                custom: {
                    random: false,
                    default: true,
                    landscape: { // Landscape background image
                      light: [
                          '/snippets/images/background-light/landscape-background-1.png',
                          '/snippets/images/background-light/landscape-background-2.png',
                          '/snippets/images/background-light/landscape-background-3.png',
                          '/snippets/images/background-light/landscape-background-4.png',
                      ],
                      dark: [
                          '/snippets/images/background-dark/landscape-background-1.png',
                          '/snippets/images/background-dark/landscape-background-2.png',
                          '/snippets/images/background-dark/landscape-background-3.png',
                          '/snippets/images/background-dark/landscape-background-4.png',
                      ],
                    },
                    portrait: { // Portrait background image
                      light: [
                          '/snippets/images/background-light/portrait-background-1.png',
                          '/snippets/images/background-light/portrait-background-2.png',
                          '/snippets/images/background-light/portrait-background-3.png',
                          '/snippets/images/background-light/portrait-background-4.png',
                      ],
                      dark: [
                          '/snippets/images/background-dark/portrait-background-1.png',
                          '/snippets/images/background-dark/portrait-background-2.png',
                          '/snippets/images/background-dark/portrait-background-3.png',
                          '/snippets/images/background-dark/portrait-background-4.png',
                      ],
                    },
                },
            },
        },
    },
}

export async function callback(config) {
    config.theme.hotkeys.doc.copy.enable = true;
}

For more configuration items, see config.js.

custom.css

/**
 * File Path
 *    <workspace>/data/widgets/custom.css
 * Example function:
 *    Custom the blank line prompt text
 */

:root[data-theme-mode=light],
:root[data-theme-mode=dark] {
    /* Blank line prompt */
    --custom-empty-p: "这里是空的 (´･-･)ﾉ㊫";
    --custom-empty-c: "这里是空的 (´･-･)ﾉ↹";
    --custom-empty-t: "这里是空的 (´･-･)ﾉ☑";
    --custom-empty-u: "这里是空的 (´･-･)ﾉ◉";
    --custom-empty-o: "这里是空的 (´･-･)ﾉ①";
}

For more configuration items, see config.css.

The above example is equivalent to the following code snippet:

:root[data-theme-mode=light][data-light-theme="Dark+"], 
:root[data-theme-mode=dark][data-dark-theme="Dark+"] {
    /* Blank line prompt */
    --custom-empty-p: "这里是空的 (´･-･)ﾉ㊫";
    --custom-empty-c: "这里是空的 (´･-･)ﾉ↹";
    --custom-empty-t: "这里是空的 (´･-･)ﾉ☑";
    --custom-empty-u: "这里是空的 (´･-･)ﾉ◉";
    --custom-empty-o: "这里是空的 (´･-･)ﾉ①";
}

Code snippets can be set in Siyuan <kbd>Settings > Appearance > Code Snippet > CSS</kbd>.

custom-light.css

/**
 * File Path
 *    <workspace>/data/widgets/custom-light.css
 * Example function:
 *    Custom default light theme background image
 *        The path of the light background image in the example is
 *            <workspace>/data/widgets/background-light.png
 *            <workspace>/data/widgets/background-light-dialog.png
 */

:root[data-theme-mode=light] {
    /* default background image for light color theme */
    --custom-background-image: url("/widgets/background-light.png");

    /* default dialog background image for light color theme */
    --custom-background-image-dialog: url("/widgets/background-light-dialog.png");
}

For more configuration items, see config.css and light.css.

The above example is equivalent to the following code snippet:

:root[data-theme-mode=light][data-light-theme="Dark+"] {
    /* default background image for light color theme */
    --custom-background-image: url("/widgets/background-light.png");

    /* default dialog background image for light color theme */
    --custom-background-image-dialog: url("/widgets/background-light-dialog.png");
}

Code snippets can be set in Siyuan <kbd>Settings > Appearance > Code Snippet > CSS</kbd>.

custom-dark.css

/**
 * File Path
 *    <workspace>/data/widgets/custom-dark.css
 * Example function:
 *    Custom default dark theme background image
 *        The path of the dark background image in the example is
 *            <workspace>/data/widgets/background-dark.png
 *            <workspace>/data/widgets/background-dark-dialog.png
 */

:root[data-theme-mode=dark] {
    /* default background image for dark color theme */
    --custom-background-image: url("/widgets/background-dark.png");

    /* default dialog background image for dark color theme */
    --custom-background-image-dialog: url("/widgets/background-dark-dialog.png");
}

For more configuration items, see config.css and dark.css.

The above example is equivalent to the following code snippet:

:root[data-theme-mode=dark][data-dark-theme="Dark+"] {
    /* default background image for dark color theme */
    --custom-background-image: url("/widgets/background-dark.png");

    /* default dialog background image for dark color theme */
    --custom-background-image-dialog: url("/widgets/background-dark-dialog.png");
}

Code snippets can be set in Siyuan <kbd>Settings > Appearance > Code Snippet > CSS</kbd>.

START

AUTO INSTALL

The theme has been put on the shelves at SiYuan community bazaar and can be installed directly in the Bazaar.

MANUAL INSTALL

Download the release package in Releases, unzip it and place it in the <workspace>/conf/appearance/themes/ directory of SiYuan Note.

REFERENCE & THANKS

AuthorProjectLicense
Achuan-2Achuan-2/siyuan-themes-tsundoku-dark: a editor theme for siyuan noteGPL-3.0 license
roesethroeseth/Siyuan-Golden-Topaz-Refined: A ported Golen Topaz theme for Siyuan note with tweaksUnknown
Morganwan90Morganwan90/Lightblue-siyuan-themeUnknown
Crowds21Crowds21/Cliff-LightUnknown
Zhangwuji希望能够增加根据大纲生成思维导图的功能Unknown
Morganwan90Morganwan90/Darkblue-siyuan-themeUnknown
leolee9086leolee9086/cc-baselibUnknown
UserZYFUserZYF/zhang-lightUnknown
langzhoulangzhou/siyuan-noteUnknown
royc01royc01/notion-themeUnknown
shawroger思源笔记渲染 SQL 文档路径代码 - 链滴Unknown

ps: Sort in no particular order.

DEPENDENCIES

AuthorProjectLicense
Microsoftmicrosoft/monaco-editorMIT License
eligreyeligrey/FileSaver.jsMIT License

ps: Sort by introduction time.

CHANGE LOGS

CHANGELOG

SUPPORT & DONATE

ko-fi:zuoqiu