Code Monkey home page Code Monkey logo

obsidian's Introduction

Logo
Catppuccin for Obsidian

GitHub star count Open issues on GitHub List of contributors

Example of the Catppuccin theme for Obsidian

Previews

🌻 Latte Preview of Latte theme
🪴 Frappé Preview of Frappé theme
🌺 Macchiato Preview of Macchiato theme
🌿 Mocha Preview of Mocha theme

About

Brief note on development 2023-9-3

I am currently in the process of rewriting the theme. Get the theme.css file from the development branch (https://github.com/catppuccin/obsidian/tree/development) if you want to try it out. It's barebones ath the moment, but has fixes for some issues currently in the main branch. Thanks for your patience!

This is the Catppuccin theme for the note-taking app Obsidian. The theme is a constant work in progress, given the quick development pace of Obsidian itself and the user-made plugin scene. The theme uses a base64-encoded version of Friedrich Althausen's font Vollkorn as its default editor text. Runner up in 🎉 Obsidian's 2022 Gems of the Year awards. Thank you to everyone who voted.

Usage

This theme provides the full range of Catppuccin palettes when used with the Style Settings plugin (see here for more on using plugins with Obsidian). This plugin will allow users to pick from several variations on Catppuccin, including accents for each color in the palette and one that features the full host of Catppuccin colors (the default). New options will be exposed through the Style Settings plugin over time.

Obsidian theme store

To install from the Obsidian theme store:

Open Obsidian and go to Preferences >> Appearance, click Manage and scroll down to 'Community Themes.' Type ' Catppuccin' in the filter bar and then click 'Use' under the theme name.

To use Catppuccin Latte, set the Base color scheme option to Light. For one of the three dark themes, set Base color scheme to Dark. This defaults to Catppuccin Mocha; install Style Settings as described below to change your dark theme flavor to Frappé or Macchiato.

Style Settings plugin installation and use

A note on Style Settings setup from pitoniak32:

To install Style Settings, open Obsidian's Preferences, and navigate to the OPTIONS section, select Community plugins and ensure that Restricted Mode is off.

Now you can search for "Style Settings" by mgmeyers. Once you have the plugin installed, you should be able to see a heading entry Style Settings on the left under COMMUNITY PLUGINS in the Preferences window.

From there you can select, and configure your Catppuccin flavor, and make customizations :)

Problems?

Obsidian is a large and constantly expanding app with a variety of use cases and plugins. If you run into theme-related issues or want CSS adjustments made for your favorite plugin(s), please open an issue. While there is a Discord community for the theme, using GitHub Issues is good for the development process, less ephemeral, and helps other users who need support or want to contribute.

Contributing

See CONTRIBUTING.md.

Plugins

The theme currently has limited CSS for a few plugins in _plugins.scss. These include:

  • Another Quick Switcher
  • Better Command Palette
  • Obsidian Git
  • Omnisearch
  • MAKE.md

Development

See the Releases page for the latest news.

💝 Thanks to

 

Cat sitting on gray line

Copyright © 2021-present Catppuccin Org

MIT license

obsidian's People

Contributors

anubisnekhet avatar backwardspy avatar eval-u8 avatar hiimsergey avatar ilovespicynoodles avatar maanuj-vora avatar mbeckrich avatar nekowinston avatar pitoniak32 avatar pocco81 avatar rea1shane avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

obsidian's Issues

Horizontal bars and table borders not visible.

As said in the title, the horizontal bar (***) and table borders aren't visible/are barely visible when in preview mode. I've provided an example image.

Not really much more to say.

EndeavourOS + KDE with Obsidian installed through pacman.

Image

Sans serif font fallback

Sans serif font on settings page doesn’t fallback to a system sans if user does not have public sans installed.

Feature Request: Scrollable CodeBloacks

Could you please add support for codeblocks to be scrollable. I am tired of the word wrap i have to deal with. been searching for a way to do it myself, no luck ☹. Everyonwe who codes can tell you that the default codeblock width isnt enough.. And wrapping code makes it look like a horrible mess :(
Great work on the theme btw. Super clean and aesthetic. Just needs a little polish.

Vim Block Cursor Issues

Hiyo,

I am having some issues with the block cursor with the vim bindings enabled, it appears almost invisible besides some slight flickering on the hovered character since the latest release, my older vaults using release 0.2.2 seem to be working fine but 0.2.8 appears to be having the issue.
Hopefully this is alright to leave here and not being repeated, couldn't see anything about it elsewhere so I thought i'd leave it here.

Option to show chevrons to collapse content on mobile

Since there's some settings already in Style Settings, a new one that would be nice would be to provide an option to view the collapse-indicators by default on mobile. Not being able to collapse things without tapping on a line to edit it really makes me annoyed. I know I can fix it with CSS, but I think it would be better implemented if it were in the theme itself.

Catppuccin 0.2.0

Hi there 👋
Thanks for your work on this port of Catppuccin!

Just want to check in and ask if there is an update to the 0.2.0 spec in the pipeline, or if it is something where help is needed.

I've had a look at the repo structure, and it seems that abstracts/_colors.scss is not used at all?

/* make any changes to colors in base.scss instead */

It also seems that #14 introduced a discrepancy between .theme-dark and .theme-light:

--background-modifier-border: hsl(249deg 16% 32%);

--background-modifier-border: hsl(249deg 23% 12%);

Wouldn't it be possible to use a combined selector .theme-dark, .theme-light {} instead?

I've got quite a bit on my personal Catppuccin To-do list already, so I essentially just want to get the conversation regarding the update started.

Tab headers colors issue with stacked tabs

The tab headers of unfocused tabs behave weirdly when in "stacked" mode. The video explains it all:

2022-11-19_13-16-06.mp4

I don't have tame to submit a PR but it probably has something to do with the foreground color of the "workspace-tab-header-inner" css class.

P.s. absolutely love your theme!

Report yr mobile version problems here

I rarely use the Obsidian mobile app, so my experience with it and the way it uses the app css is limited. I checked around the mobile app recently and saw that the fundamentals seem there, but it suffers from a few obvious hover/"active" element related issues (but likely other things I didn't spot, too). If you use the theme with the mobile app or want to go bug hunting, please either reply here or create a new issue with any problems you spot.

If the theme's misbehavior is hard to describe, please include a screenshot or gif, if possible.

Thanks!

Put all style settings into a single section

Hi, thank you for this great theme. I love it.

I'd like to propose to put all style settings into a single or a few sections with "Catppuccin" in their names. Currently, the style settings pane looks like this:

image

It's hard to distinguish which section comes from this theme and which doesn't.

Ideally, it should be put in a single or a few sections, and these sections should have "Catppuccin" in their name. Otherwise, users will not be able to find out which section to open to tweak this theme.

You can refer to the Minimal theme. Every Minimal-related section is given a name with "Minimal" in it.

image

Thank you!

Allow more text colouring

Would be great if we are able to colour the bold, italic, quoted… text like Things theme combined with the Style settings plugin. Texts will be much clearer and also take advantage of the full colour palette.

[Bug] Search suggestion note is not readable for hovered items

The search suggestion title changes color for a hovered item, but the search suggestion notes don't, which may make theme unreadable. The following screenshots illustrate the issue:

Current Behavior:
Screenshot_20221025_031739

Desired Behavior:
Screenshot_20221025_031820

Possible Fix:

.suggestion-item.is-selected .suggestion-note{
  color: var(--text-on-accent);
}

Highlights are illegible in reading mode

When making a highlight in Editing using ==highlighted text here== the text looks fine
image
When switching into Reading mode, the text becomes illegible
image

This is using the default settings in Style Settings with a new vault

Broken text color

Hi, did I miss something? I'm sure both Obsidian and the Catppuccin theme have the latest version installed, but it looks like the text color is exactly the same as the background.

image
image
image

Bold letters in command palette render improperly

Sometimes when using the command palette, suggested letters in search terms will fail to change from black to white. Once highlighted, the letter will render correctly and continue to render correctly even after the palette is closed and reopened. Difficult to replicate, so anyone who can please let me know.

catppuccin color palette mismatch

Hi,

There seems to be a mismatch between the colors used here and the colors used in the catppuccin repo. For example:

latte

color catppuccin here
rosewater 220, 138, 120 222, 149, 132
pink 234, 118, 203 236, 131, 208
yellow 223, 142, 29 228, 147, 32
blue 30, 102, 245 42, 110, 245

Is this intended?

Using different theme sub options (latte, frappe, mocha)

I am not sure how to go about selecting which version of Catppuccin is selected once it is set as my theme in Obsidian, I tried checking out the CSS snippets linked in the README, and the obsidian docs about CSS snippets.

Would it be possible to show an example of switching the default from mocha to frappe?

Apologies, I am very new to obsidian

Add proper italic style.

Hello,

At first I would like to thank for the effort put into this gorgeous theme as well as the excellent font choice.

However, I found that italic text looks kind off odd. Comparing with the official font website, Vollkorn, the current implementation lacks its style.

Italic text on the website:
20230807_15h26m41s_grim

Italic text in my vault:
20230807_15h36m26s_grim

Basically, it inherits the same serif style from regular text and slants it.

I'm not sure if it's intentional or not and if it's possible to change it.

However, thank you in advance.

Respect folder hierarchy when highlighting tree items

Description

It would be a huge visual improvement if tree items were highlighted according to the hierarchy they belong to.

For example, the dropdown lines respect the hierarchy:
IMG_0062

But highlighted items, whether hovering or selected, do not:
IMG_0064

Improved Behavior

Highlighting tree items, whether hovering or selected, according to the directory hierarchy they belong to.

Tag visibility

Hey there,
In other themes, there's one thing that I really like, which is the way the tag is differentiated from normal text. Take this pill from anuppuccin for example:
anu
Is it possible for you to implement something like that? Current tag in catppuccin looks the same as normal text so it bothers me a little bit.
cat
Love your theme btw. Ty for your effort!

quick font size adjustment not working

this might be a compatibility issue. the ctrl + zoom is not working when changing font size inside a note. ctrl + and ctrl - are working but it is intended for the interface zoom.

So Pretty!!

@mbeckrich, your theme does Catppuccin so much justice, it's so clean and I absolutely love it! The only thing that I've found myself changing (and this is just preference for me) is the heading colors, which I prefer in a specific order, and the italic and bold styles. Again these are purely based on preference. I love this version of it though, it's literally perfect! 🤩

image

Obsidian 0.16.0 and Catppuccin

Obsidian has just released an insider build, 0.16.0, with a new default theme. The new theme means that many user-made themes are broken, including Catppuccin, and considered "legacy" in the new release. These themes will be struck from the Obsidian theme store when the update goes live for all users. I am an insider member and will be updating the theme over the coming days to work with the new default theme. I am not sure what their timeline for general release of the update is, but I hope to have the new theme ready to go by the time it is live. If memory serves, they usually take a few weeks between an insider update and public release. In the meantime, if you are an insider and want to continue using Catppuccin, you will need to stay on 0.15.9 and disable insider builds.

The new theme looks great and, while I've not looked into the details, it is theoretically going to be easier for themers to modify. For further details, please see this post from Liam on Obsidian's forum: https://forum.obsidian.md/t/0-16-0-theme-migration-guide/42537

Open to thoughts/comments/questions throughout this process.

Excalidraw support with paletton

I setup my excalidraw in a way so that my drawing notes match my obsidian colors. It would be great if this plugin or catpuccin itself had a integration with excalidraw. Maybe that is an upstream related issue to support paletton.com

Excalidraw in obsidion allows you to import color palettes with paletton.

Search results readability

Hey, there

I really adore the theme you have given us.

One thing I do find myself struggling with is readability of search results when using the theme in dark mode, as seen in the screenshot.

image

Is there a way to adjust this in style settings or is there another fix for this. I checked the closed issues and could not find anything on this.

EDIT:
Another example are the folders in the plug in the another quick switcher plug in. I understand that you cannot have support for all plug ins just thought I would mention it as another example
image

Low contrast for file name popup when moving files

The file name text is difficult to read while using the latte theme variant.

Screen.Recording.2023-08-14.at.2.09.32.PM.mov

No issues with the mocha theme variant.

Screen.Recording.2023-08-14.at.2.20.24.PM.mov

I am on MacOS 12.6.8 with Obsidian Version 1.3.7 (Installer 1.1.9), and I am using the latest version 0.4.16 of the Catppuccin theme.

Need more features

I like this theme very much. It looks simple and elegant. But is it too simple? Features such as the status bar are not visible on this theme. The same goes for mouse tips. I think adding some of the necessary features will make the theme easier to use.

ex: obsidian-git plugin on catppuccin theme(left) and Minimal theme(right)

441665594384_ pic

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.