Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use color in the "Files" sidebar to better distinguish files, folders, etc. #35

Open
conradsrc opened this issue Jun 8, 2023 · 5 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@conradsrc
Copy link

The Obsidian color palette is very nice and gives a good variety of colors to choose from... but it currently feels very underused in this specific implementation of the theme. I get that you might not want to swing too hard in the other direction by making every single element colorful, but I often forget that I'm specifically using a "Dracula" theme as opposed to just any other generic dark theme.

The first thing that I'll suggest (because it's the one that's constantly popping into my mind) is the "Files" sidebar. Colored text would go a long way towards both readability and aesthetics IMO, as would very simple colored icons... I'm assuming Obsidian would properly render embedded BASE64 graphics if needed? Are the default Obsidian icons referencable via CSS?

I don't have specific thoughts on exactly what should be what color from the palette, but directories could be colored using Dracula's yellow/orange/red for different depth levels. Similarly, different file types could be colored differently (e.g. regular Markdown vs. Canvas vs. popular extension types like Kanban boards) and have simple icons.

I'd consider taking a shot at it but I'm fairly busy with work at the moment and I would only classify my CSS skills as "passable". Maybe I'll take a look at some point anyway if I find the time considering the existing CSS doesn't look

@Chrismettal
Copy link
Collaborator

I think this one is a point of personal preference. In my eyes more themed elements would overload the design. I am not the original designer of this theme, @andybyers21 is, I just agree with his design decisions of leaving the file bar especially quite down low.

Unsure on how to resolve this then. A poll? Variants? Are we able to use options for themes in Obsidian now natively without any plugins?

If you could mock up or try to implement what you are thinking of then I think we would have a better base to decide on.

@Chrismettal Chrismettal added enhancement New feature or request help wanted Extra attention is needed labels Jun 9, 2023
@conradsrc
Copy link
Author

I'll try and implement it (or at least partially as a mockup) if I ever get the time but who knows when that would be.

I understand the issue of personal preference -- obviously, I think the current sidebar is very plain and everything blends together in a way that makes it harder to visually parse, but I can see how others might find adding too much in the way of color/iconography as either ugly or distracting.

Your comment about options for themes is an interesting question. I assume you had something like the UserStyle format in mind, which some Dracula themes (e.g. the GitHub Dracula theme) already utilize:

/* ==UserStyle==
@name Github Dracula
@namespace https://github.com/Dracula
@homepageURL https://github.com/Dracula/github
@supportURL https://github.com/Dracula/github/issues
@version 1.1.4
@updateURL https://github.com/Dracula/github/raw/master/style.user.css
@description  🧛🏻‍♂️ Dark theme for Github
@author Umbreon
@license MIT

@preprocessor stylus
@var checkbox purple-logo "Use purple logo" 0
@var checkbox purple-topbar "Use purple topbar" 0
@var checkbox colored-status "Use dracula colors on status badges" 0
@var checkbox black-btn-text "Use black text on colored buttons" 0
@var checkbox contributor-graph-colors "Use dracula colors for profile contributor graphs" 0

@var checkbox custom-font-enabled "Use custom code font" 0
@var text custom-font "Custom Font" "FiraCode"
==/UserStyle== */
/* Styles 
Rounded input
background-color: draculaW-blackSecondary
*/

It would be pretty nifty if Obsidian were able to implement this on their end but I suspect they might consider it too low priority. I'll have to check their issue/feature tracker later to see see if there's anything similar on there already.

@Chrismettal
Copy link
Collaborator

IIRC there was a plugin that enables this functionality, granting options to Obsidian themes. I do like some good icons in file trees and would happily implement/merge an OPTIONAL feature for that.

Lets say the default would just give you what we have now, but if the options plugin (if that really exists) is installed, there is a checkbox to enable additional theming. We could still discuss the default after that, but I feel implementing new features optionally at first would be the way to go.

@Chrismettal
Copy link
Collaborator

The plugin that allows users to configure optional features for styles is the following:
https://github.com/mgmeyers/obsidian-style-settings

Implementing this would be related to [#30] as both require new icons in the stylesheet, whith user configureable options using the style settings plugin.

I currently don't plan on implementing this myself, but if you or someone else opens up a PR for these two things it could be a nice addition.

@jmslbam
Copy link

jmslbam commented Aug 20, 2023

Came here to note (leave a FYI) that the contrast of the file manager is to low. Barely the filenames/folder names on my screen.
And that's more because I have a bright room and not a fancy pancy modern 2nd monitor, so I always notice accessibility issues quit quickly.

Brightening them up makes it usable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request help wanted Extra attention is needed
Development

No branches or pull requests

3 participants