caro401 / royal-velvet Goto Github PK

View Code? Open in Web Editor NEW

89.0 3.0 9.0 3.83 MB

A dark theme for obsidian.md

License: MIT License

CSS 100.00%

obsidian-md obsidian-theme

royal-velvet's Introduction

Hi, I'm Caro 👋

Endlessly curious software developer, musician and textile artist from the UK

💜 Musing about everything - talk to me about networked notetaking, the importance of sustainability in web design, the history of weaving, anything you fancy! [website] [public notes] [twitter]
📸 Improving research photo management at Tropy [website] [twitter]
🐾 Supporting the Digital Humanities at Codex Felis [website] [twitter]
📚 Re-imagining personal library management for academics (and general nerds!) at ShelfCat [website] [twitter]
🎹 Playing and teaching folk dance music with Flying Cat
🐑 Creating and selling sustainable crafts and supplies at Sheep's Green Crafts
🧶 Empowering creatives with technology at Capybara Creative
🐈 Attempting to stay on top of projects with Herding Cats
🌳 Exploring secondary school computer science education with Little Fen

Stats!

Key projects I've created

Key projects I've contributed to

royal-velvet's People

Contributors

Stargazers

Watchers

Forkers

lefd o0hmar rkrishna97 yomaser shuang-shuang topkiller eschmar gregros rickysupriyadi

royal-velvet's Issues

[BUG] blockquotes don't have contiguous styling in live preview

Feature Request: Colored Bullets

Could you add colors for the different bullet tab indentation?

Like the example from Wyrd-Theme

Love the theme, here's some CSS I'm using to make it look cleaner and more to my taste

body {
    --heading-font                    : "Lexend Deca Semibold";
    --font-monospace                  : "JetBrains Mono";
    --font-text                       : "iA Writer Quattro S";
    --table-header-color              : var(--black);
    --table-header-font               : var(--heading-font);
    --interactive-accent              : var(--red) !important;
    --interactive-accent-hover        : var(--orange) !important;
    --text-on-accent                  : var(--black) !important;
    --background-modifier-border-hover: transparent;
    --modal-border-color              : transparent;
    --prompt-border-color             : transparent !important;
    --background-modifier-border-focus: transparent !important;
    --background-modifier-boder       : transparent !important;
    --default-font                    : "Lexend Deca";
    --input-shadow                    : none !important;
    --blockquote-border-color         : none;
}

.kanban-plugin__autocomplete-item-active.kanban-plugin__ignore-click-outside em {
    color: var(--text-on-accent) !important;
}

.block-language-simple-time-tracker {
    font-family: var(--font-interface);
}

.markdown-preview-sizer {
    padding-bottom: 0 !important;
    min-height    : fit-content !important;
}

.menu-item-icon {
    color: var(--green);
}

em,
.cm-s-obsidian .cm-em {
    font-family: "iA Writer Quattro S" !important;
    font-style : italic !important;
}

.setting-item-control *:not(input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"]),
.clickable-icon {
    cursor: pointer !important;
}

.checkbox-container:not(.is-enabled) {
    background-color: var(--blackXDark) !important;
}

.suggestion-highlight,
.search-result-file-matched-text {
    color: var(--purple);
}

.explorable {
    padding-right: 4px !important;
    padding-left : 4px !important;
}

img {
    display      : block !important;
    margin-left  : auto !important;
    margin-right : auto !important;
    margin-top   : 20px !important;
    margin-bottom: 20px !important;
    border-radius: var(--radius-s);
}

.math.math-block.cm-embed-block,
.markdown-preview-view .math.math-block mjx-container.MathJax {
    background-color: var(--blackDark);
    border-radius   : var(--radius-s);
    border-left     : 4px solid var(--purple);
    border-right    : 4px solid var(--pink);
}

.markdown-preview-view .math.math-block mjx-container mjx-math.MJX-TEX {
    padding-top   : 14px;
    padding-bottom: 14px;
}

blockquote,
.HyperMD-quote {
    border-top-color   : transparent !important;
    border-bottom-color: transparent !important;
    border-right-color : transparent !important;
    border-radius      : var(--radius-s) !important;
    border-left-color  : var(--red) !important;
}

.cm-indent::before {
    border-width: 2px !important;
    border-color: var(--red) !important;
}

.markdown-rendered.show-indentation-guide li>ul::before,
.markdown-rendered.show-indentation-guide li>ol::before {
    border-width: 2px !important;
    border-color: var(--red) !important;
    left        : -13px;
}

.setting-item-heading .setting-item-name,
.vertical-tab-header-group-title {
    text-transform: uppercase !important;
}

.cm-highlight {
    color: var(--yellow) !important;
}

.cm-formatting-quote {
    color: var(--text-muted) !important;
}

.cm-em.cm-strong,
strong>em {
    color: var(--red);
}

mjx-container.MathJax {
    -webkit-text-fill-color: var(--text-normal);
}

.MJX-TEX {
    font-size: 1.2em !important;
}

em,
.cm-em {
    font-family: var(--font-text) !important;
}

.cm-hmd-internal-link,
.cm-hmd-internal-link .cm-underline,
a.internal-link {
    -webkit-text-fill-color: var(--green) !important;
    background             : transparent !important;
    text-decoration        : none !important;
}

:is(.cm-hmd-internal-link .cm-underline,
    .cm-hmd-internal-link,
    a.internal-link):hover {
    text-decoration-line   : none !important;
    -webkit-text-fill-color: var(--yellow) !important;
}

mjx-mtable>*>mjx-itable mjx-mtr:not(:first-of-type) mjx-mtd {
    padding-top: 1.2em !important;
}

.cm-link,
.cm-link .cm-underline,
a.external-link {
    -webkit-text-fill-color: var(--yellow) !important;
    background             : transparent !important;
    text-decoration        : none !important;
    text-decoration-line   : none !important;
}

:is(.cm-link,
    .cm-link .cm-underline,
    a.external-link):hover {
    -webkit-text-fill-color: var(--green) !important;
    text-decoration        : underline !important;
}

.titlebar-button.mod-close:hover {
    color: var(--black);
}

button {
    font-family: var(--font-interface) !important;
    cursor     : pointer !important;
}

.HyperMD-header,
.markdown-preview-view :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--heading-font);
}

table {
    margin-left  : auto;
    margin-right : auto;
    border-width : 2px;
    text-align   : center;
    font-family  : var(--font-interface);
    border-radius: var(--radius-s);
}

.cm-blockid,
.titlebar-text {
    opacity: 0;
}

.cm-active .cm-blockid,
.cm-blockid:hover {
    opacity: 1;
}

table tr th {
    font-family: var(--heading-font);
    font-size  : 1.2em;
    padding    : 8px 15px !important;
    border     : none !important;
    text-align : center !important;
    font-size  : var(--font-ui-medium) !important;
}

.markdown-source-view.cm-s-obsidian.mod-cm6 .HyperMD-table-row.HyperMD-table-row-0.cm-line {
    color: var(--text-normal) !important
}

.workspace-ribbon.mod-left,
.sidebar-toggle-button.mod-right,
.status-bar,
.cm-s-obsidian .external-link,
.frontmatter-container,
.workspace-leaf-content[data-type=kanban]>.view-header {
    display: none;
}

.workspace-tab-header:not(:hover) .workspace-tab-header-inner-close-button,
.workspace-tab-header-container:not(:hover) .clickable-icon {
    visibility: hidden;
}

.cm-s-obsidian .external-link,
a.external-link {
    background-image: none !important;
    padding-right   : 0px !important;
}

/* pseudometa */
/* Image Alt as caption
(except when no explicit alt is provided and urls are the alt text) */
body:not(.no-image-alttext-caption) .image-embed[alt]:not([alt$=".png"], [alt$=".jpg"], [alt$=".jpeg"], [alt$=".tiff"])::after {
    display: block;
    content: attr(alt);

    font-family: var(--font-text);
    font-size  : var(--font-smaller);
    font-style : italic;

    color: var(--text-muted);

    word-spacing: -3px;

    margin-top   : -1em;
    margin-bottom: 1em;
}

.markdown-preview-view img[src] {
    border       : var(--thin-muted-border);
    border-radius: var(--radius-s);
}

/* centers image and image caption */
.image-embed[alt]::after {
    text-align: center;
}

.view-content img {
    display     : block;
    margin-right: auto;
    margin-left : auto;
}

/* ───────────────────────────────────────────────── */
/* << Overlaying Sidebar
──────────────────────────────────────────────────── */

.mod-right-split {
    position: absolute;
    right   : 0;
}

Feature Request: Create an independent css snippet

Hi team, thanks for your great job. After trying almost the top 100 themes, I believe this theme is the most beautiful one(not one of).

But you know, there is another theme called Minimal. It's the most popular one and it supports a lot of features. So I want to have both its features and your styles.

I think there is only one way to do that, which is to use the Minimal theme and royal-velvet CSS snippet, or the opposite.

Therefore:

Feature Requested
Could you please provide a CSS file that is compatible(overwrite) with the Minimal theme?

It will save my life because I switched too many times between these two themes... I will appreciate it.

[BUG] margin of folders is too big when using Obsidian Icon Folder plugin

Describe the Bug
When using the plugin "Obsidian Icon Folder", folders with an emoji as an icon have a too big margin compared to other folders. See screenshot below.

removing the following lines fixes this issue:

img,
.markdown-source-view.mod-cm6 .cm-content > img {
  margin: 1ch !important;
}

To Reproduce

install "Obsidian Icon Folder" plugin
set an emoji as a folder or file icon (right click on folder -> change icon -> type emoji in text field -> select emoji)

Which version of Obsidian are you using?

Public Release (Desktop)
Public Release (Mobile)
Insider Release (Desktop)
Insider Release (Mobile)

Checklist

I have updated to the latest version of the theme (Obsidian Settings → Appearance → Themes - Manage → Update).
I made sure that the issue is related to this theme, by checking that the issue does not occur with other themes or the default theme.

Feature Request: Light theme

Feature Requested
A version of the theme using light (white?) background colours.

Relevant Screenshots
I'm thinking based on the old Mac aesthetic:

A light version of this theme while keeping it as colourful and having the gradients, but with a pure white background and everything else, would be awesome.

Checklist

The feature would be useful to more users than just me. (→ If it's only relevant to you, have you considered using a CSS Snippet?)

css of gradient

I know this is kind of unthankful of your work, but I do like the minimal theme more than the royal velvet because of the minimal aesthetic. However I wish I could implement your beautiful gradient into my custom theme.
By looking into your css I thought that this part would finally make it work:

h1,
.cm-header-1 {
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(
    var(--134),
    var(--#ff80bf) 0,
    var(--#ffca80) 100%
  );
} /*Source Mode*/

However it does not. The Header just goes transparent. When experimenting I could repalce the "transparent" of line 3 with any colour and the heading would change its colour to that.
So now I know how you did it and what happens. Your way of a gradient is probably to "draw" a box with a gradient with the given variables and then clip it to the text.

In my css snippet adaptation the drawing of the box does not work. The text is probably ready to get clipped and is transparent, but yeah nothing to clip there.

-> therefore I must be missing a function or whatsoever to "draw" / create that gradient.
(btw I never did css custom this is my first time so sorry if I misinterpreted a lot. I do know nothing and try to go at it with simple logic thinking, but as you can see it does not really help)

I could find no place where you establish the function. Due to no knowlede of css I think its not a integrated function. Otherwise it would work out of the box with my obsidian right?

Feature Request: Exclusion of emoji for the CSS rules doing gradient text coloring

Feature Requested
Exclusion of emoji for the CSS rules doing gradient text coloring: whenever there is a gradient over text such as headers and file titles, the emoji is painted over by this, making emoji hard to distinguish because they lose their color. An option to show original emoji colors would be very helpful and make this theme more worth using. This might be solved be a CSS or JS solution. This is considered here, for instance: https://css-tricks.com/excluding-emojis-from-transparent-text-clipping/
A Google search yields a possible solution:
https://stackoverflow.com/questions/68731016/css-background-text-clipping-affecting-emoji

Relevant Screenshots

Checklist

The feature would be useful to more users than just me. (→ If it's only relevant to you, have you considered using a CSS Snippet?)

[Experimental]: Document Title Customisation

Feature Requested
All headings in a file have gradients, the H1 gradient is from pink to orange, and the H6 is from purple to pink, completing the loop with 6 colors.
The file name is block white.
I think it would be nice to generate a gradient from the user's selected accent color. Given that it's available on <body> from the --accent-* hsl values, it's much easier to use CSS math to place it at the center of a gradient and calculate the HSL values for the gradient's root colors.

Known issues

"I don't want a custom color"
You can set your accent color to white.
"It's the future, light theme has been implemented, I switch between light and dark during day and night. I don't want to keep changing my accent color"
Uncommon yet valid use case.
CSS is shockingly powerful. We can test the --accent-* custom props to see if they're greyscale, and based on the active theme choice overwrite the gradient to be a simple black or white.
"I just updated the theme and all my file names are purple!"
This is where clear communication through patch notes and readme changes is going to matter, if people choose not to read it there's not much we can do.

Alternatives Considered
Split 360 into 7
While mathematically 6 works really well with colors (360deg of hues, 6 is a clean and easy factor), 7 is entirely possible (51.4285 should be enough precision for CSS).
It would be nice and in-keeping with the theme if the file name at the top of the page also had a gradient in this circle of color.
I'm not against this idea, and I think it could work quite well, it's simply not my first choice for this.

Checklist

The feature would be useful to more users than just me
I am willing to submit a PR for this feature's implementation if this feature is accepted
- I would use the "accent color" approach unless otherwise requested

Theme updates for v0.16

The obsidian maintainers made a guide for the required changes: https://forum.obsidian.md/t/0-16-0-theme-migration-guide/42537

[BUG] inline code in headings is invisible in reading mode

Describe the Bug
Inline code in headings is not visible in reading/preview mode. See screenshot below.

Relevant Screenshots

left: editing mode; right: reading mode

To Reproduce

create inline code in a heading and switch to reading mode

In which mode does the bug occur?

Reading/Preview Mode
Source Mode
Live Preview

Which editor are you using?

Legacy Editor
New Editor

Which version of Obsidian are you using?

Public Release (Desktop)
Public Release (Mobile)
Insider Release (Desktop)
Insider Release (Mobile)

Checklist

I have updated to the latest version of the theme (Obsidian Settings → Appearance → Themes - Manage → Update).
I made sure that the issue is related to this theme, by checking that the issue does not occur with other themes or the default theme.

Update heading CSS for new version

Network usage is prohibited for themes

It appears that your theme uses network connections to load assets (e.g. fonts, icons, or images). This is prohibited by the official Obsidian developer policies because themes should function completely locally.

You can bundle an asset for local use by using data URLs. See this guide.

Please let us know if you have any questions. Any themes that use network connections will be removed from the official directory in the first week of January 2024.

The Obsidian team.

[BUG] Properties panel has black rectangles.

Description

In the latest updates of the application, a special note properties panel has appeared. Unfortunately, when using the theme, there is a small visual problem in the form of an ugly black rectangle in the names of the properties of the note.

Screenshot

To Reproduce

Steps to reproduce the behavior, e.g.

Open Obsidian
Start adding properties
See black rectangles.

In which mode does the bug occur?

Reading/Preview Mode
Source Mode
Live Preview

Which editor are you using?

Legacy Editor
New Editor

Which version of Obsidian are you using?

Public Release (Desktop)
Public Release (Mobile)
Insider Release (Desktop)
Insider Release (Mobile)

Checklist

I have updated to the latest version of the theme (Obsidian Settings → Appearance → Themes - Manage → Update).
I made sure that the issue is related to this theme, by checking that the issue does not occur with other themes or the default theme.

[BUG] Characters disappearing in headings

Describe the Bug
When in editing mode, headers (of any size) seem to make some words disapear in editing mode (although not in preview mode). Adding special symbols seem to remove the issue, like seen in the picture below (Work'sss)

Relevant Screenshots

To Reproduce
Steps to reproduce the behavior, e.g.

Make a header
Type a word of any length, bugs out some words, usually longer ones
For example, when i Write Sci-Fi, the "Fi" part becomes transparent, but the Sci remains visable

In which mode does the bug occur?

Editing mode only

Which editor are you using?

Legacy Editor

Which version of Obsidian are you using?

Public Release (Desktop)

Checklist

I have updated to the latest version of the theme (Obsidian Settings → Appearance → Themes - Manage → Update).
I made sure that the issue is related to this theme, by checking that the issue does not occur with other themes or the default theme.

End Note
The vault I'm testing this in has very few plugins that would affect this as far as I'm aware (plugins like dataview, or non-css related). I only have 1 snippet active, and it just hides the metadata at the top of the note

.frontmatter-container {
    display: none;
}

caro401 / royal-velvet Goto Github PK

royal-velvet's Introduction

Hi, I'm Caro 👋

Stats!

Key projects I've created

Key projects I've contributed to

royal-velvet's People

Contributors

Stargazers

Watchers

Forkers

royal-velvet's Issues

Description

Screenshot

To Reproduce

In which mode does the bug occur?

Which editor are you using?

Which version of Obsidian are you using?

Recommend Projects

Recommend Topics

Recommend Org