A simple theme that makes Obsidian feels a bit more like a modern app.

  • By Cyasha Rain
  • Last update: Dec 15, 2022
  • Comments: 10

Obsidian Theme - Mado 11

Mado 11 is an Obsidian theme, inspired by Windows 11 UI styling.

This theme aims for a simplified app feel, with bigger buttons to click on the sidebar. Works well for people that prefer easy workflow rather than using everything Obsidian provided.

That being said, feel free to dock anything wherever you want.


  • Download the file "obsidian.css" and place it inside your Obsidian Snippet Folder. (You may rename the file to your liking)
  • Enable it through Settings → Appearance → CSS Snippets.


Top Menu

  • Back & Forward buttons - hidden, hover to show. Position is at the top-left corner.
  • Min/Max/Close buttons - hidden, hover to show. Position is at the top-right corner.
  • App Title and Vault Title - hidden.

Left Sidebar

  • New Note/New Folder/Rearrange buttons - hidden. Recommend to make the buttons first before installing.
  • Ribbon-Dock buttons (Settings, Change Vault, etc.) - hidden. Same solution as above.
  • Style is set to be buttons-only. Icons are made possible with Icon Folder Plugin
  • To achieve the bottom-left buttons (Settings, etc.), Buttons Plugin is required. See instructions below.


  • Dock-Collapse buttons - hidden, hover to show. Position is around the top-left/right corner.
  • Tab Menu on the dock - hidden, hover to show. Position is around the top-edge of the dock inner border.


  • Recommended Font: Segoe UI, Noto Sans JP
  • Main Pane has animation activated at each update/enter. Search for "slide-up" in the CSS file if you want to disable it.
  • Resize Handle - hidden, hover to show.
  • Status Bar - hidden.

Special class: mado-header

Turn your headers into buttons, and align all contents to their width and style!


Just add "mado-header" to the cssclass in the frontmatter of that note and you're done.

Make sure you have the option "Fold Header" enabled in your Settings→Editor section.

cssclass: mado-header

Header H1 will serve as the main button, and the rest will be kept inside of that button.

Copy the following and test it out!

# Header H1 Title
Contents can be anything.

> Be it Quote

Or Code

- Or List


- [ ] Or Checkbox (with a hidden separator `---` above to separate checkbox from list)

Sidebar Buttons

  1. Install Buttons Plugin.
  2. Create a note and insert a "button" (Ctrl+P, search for "Buttons: Button Maker") that should look like below. You may use an SVG link as Icon in the "name" section
    name <svg/> **Insert an SVG link here** </svg> New Note
    type command
    action Create a New Note 
  3. Create another note, and insert an "inline-button" (Ctrl+P, search for "Buttons: Insert Inline Button").
  4. Select the button you need to be placed on the sidebar. It should come out something like "`button-aafl`".
  5. Drag the note onto the bottom part of the sidebar.

Adjustment for Buttons Plugin

An adjustment to the Buttons Plugin main.js file is required as of April 2022, to make the buttons work in the sidebar. See shabegom/buttons#105 for more information.

  1. Go to your plugin folders
  2. Look for Buttons Folder, and open the file "main.js" inside it
  3. Search for const clickHandler = async (app, args, inline, id) => { (around line 1553)
  4. Look for these right below and cut them
    if (args.type === "command") {  
    	command(app, args);  
    // handle link buttons  
    if (args.type === "link") {  
  5. Paste them below const activeView = app.workspace.getActiveViewOfType(obsidian.MarkdownView); which is just a few lines above them (or one line below the initial search)



  • Applied minor styling to Callout feature


  • Quick Fixes for background colours for codeblock and scrollbar


  • Adjusted various styling, especially for those in dark mode
    • ==Highlight== is now underlined in dark mode
    • Bold text is now coloured
    • Code Colour is now more readable with a brighter red version
    • Other small changes
  • Implemented special CSS class "mado-header"


  • Release!




  • 1

    iframes with style position:absolute are not working

    I took it upon myself to check that those iframes are working in all the other Obsidian Themes and so it is; it's possible to embed iframes in the entirety of a note. Not on Mado 11. The note just appears empty in reading mode. I have no idea what could be causing this, but it's unique to this Theme as far as I know.

    Here is a simple line of HTML code to test the functionality:

    <iframe src="https://es.wikipedia.org/wiki/Biblia" style="position:absolute; top:0; left:0; width:100%; border:none; height:100%;"></iframe>

    That said, let me tell you that your work with this Theme is fabulous, the best I've seen in styling for Obsidian.

  • 2

    [Bug] Dotpoints In Transcluded Notes

    Hello! I'm really loving the theme, it's so beautifully designed 🥺! However, I noticed that dotpoints in transcluded notes may be styled weirdly.

    Here's what I mean: image image

    System Information

    • OS: Tested on Fedora 36 and Debian 11
    • Obsidian Version: 0.15.9
  • 3

    Optimize horizontal line spacing

    I love this theme. However, I feel the placement of horizontal lines could be improved somewhat. For example, they jump several lines below where they're placed in editor mode. It would be great if horizontal lines could be moved higher up in their default placement, I personally use horizontal lines beneath headings and this behavior messes up the look of my notes in my opinion.



  • 4

    Window control buttons broken with "translucent window" option

    First of all, amazing theme! Elegant, simple and all I wanted, but anyway, whenever I switch the "Translucent Window" option ON in the appearance menu, the top right buttons (Minimize, Maximize, Close) don't show up when hovering, in fact, it's as if they don't exist at all, no cursor changes to indicate a button or anything.

    EDIT: I'm using Windows 10, latest Obsidian release

    Default: image

    Translucent Window: image

  • 5

    [Request] to avoid/remove !important for page width setting

    your inclusion of !important to increase specificity is interfered with collection of snippets. hope you can consider not using !important for this. this is because, if i understand correctly, i can only override it by having an !important and then put more css classes. in this case, i have a snippet to control with of specific pages and if i use ur theme, the snippet can no longer work.

    perhaps u use doubling of last class e.g. .markdown-preview-view.is-readable-line-width .markdown-preview-sizer.markdown-preview-sizer for you to override app's default css (in fact i believe, even with same specificity, snippets take priority).

    thank you. btw i really love the clean look of your theme.


  • 6

    the bar in the bottom(right corner)is not showed

    image.png I cannot see the same bar shows in the picture in your theme.Is it deliberately designed? Without the bar,I cannot switch the workspace simply.I cannot see the words,which are inmortant. Your theme is remarkable,but if it didin't include the bar,I had to stop😭

  • 7

    Adapt to Obsidian 1.0

    I have been using Mado-11 as the primary theme for its minimalism and UI appearance. Obsidian v1.0 has introduced a lot of features like tabs and etc. As of now unable to experience the latest feature of obsidian v1.0 with Mado-11. it would be great if we upgrade the Mado-11 theme to get the latest obsidian feature.

  • 8

    How to set the "Schedulle" pane on the right side?

    Hi, Cyasha, I wonder what plugin is used for the "Schedule" pane . I am always looking for a plugin to show the details of an todo entry.

    Thanks a lot.

  • 9

    Left sidebar is not working

    This is a very nice theme. Unfortunately, left sidebar is working for File Explorer, but not for Backlinks, Outgoing Links, Outline, Longform... If you need any further details, please let me know.

  • 10

    Settings button missing

    Not sure design or a feature. But I couldn't find the Settings button, thus unable to go back to the default theme if needed. Please add a warning., on how to get to the settings button. Or how to revert back to the default theme.