ebullient / obsidian-theme-ebullientworks

Theme for Obsidian.md (https://obsidian.md)

Welcome to Ebullientworks Obsidian Theme 👋

Jump:

Settings

Alt Checkboxes

Admonitions

Tables

Embeds

Colors

Custom accents

This is a dark and light theme for Obsidian, a note-taking application and Obsidian Publish, a static site generator.

Headers are styled, sized, and responsive (meaning friendly for all screens) with and without stacked tabs enabled. Modals, tables, and other panels are also styled.

Some light styling has also been applied for the following community plugins:

• Admonition
• Calendar
• Day Planner
• Timelines
• Tracker

This theme is compatible with custom task snippets from the Snippetor.

Style Settings

This theme does support style settings. Settable attributes:

• (0.3.25) "Suppress/remove this theme's checkbox styles" Set this to true if you are going to use your own task snippet (💡 Check out Snippetor!)

• (0.6.1) "Suppress/remove this theme's tag styles" Set this to true if you are going to use your own tag snippet

• (0.5.x) "View header actions to the left" Set this to true if the view header is visible, and you want the controls on the left side of the tab contents, rather than the right.

• "Show external links in edit mode" If true, external links (or the content of Markdown links) will be shown in edit mode. External links are hidden by default.

• (0.1.8) "Float front-matter in a box to the right" If true, front-matter in preview mode will be collapsed in a top-right container.

• (0.5.x) "Hide the heading used to embed a document" If true, the heading used to embed a document will be hidden.

• Custom Fonts

  • "Headings" Font for text headings (h1 to h6); empty will use default text font

  • (0.3.24) "Heading Font Caps Variant" Capitalization variant for h1 text headings

  • "Tags" Font for displaying inline tags; empty will use default text font

  • "Callout/admonition titles" Font for callout/admonition titles; empty will use default text font

• Colors This allows you to select the primary or secondary color from the colors in the palette (purple, pink, green, teal, or blue). You can also select a "custom" accent color, in which case, you should define and enable your own snippet as described below.

  • "Primary accent color" Choose the primary accent color. You should define a snippet if you select primary-accent-custom. See the Theme's README.

  • "Secondary accent color" Choose the secondary accent color. You should define a snippet if you select secondary-accent-custom. See the Theme's README.

Alternative Checkboxes

This theme provides styles for the following checkbox values:

Syntax	Description
- [ ]	Unchecked
- [x]	Checked
- [-]	Cancelled
- [/]	In Progress
- [>]	Deferred
- [!]	Important
- [?]	Question
- [r]	Review

Admonitions and callouts

As of Admonitions version 6.5.1, you can disable the color picker for admonitions (globally or per-admonition) to have colors picked up from CSS styles instead.

All the default admonitions, in addition to two additional custom types, have been styled.

Custom admonitions:

• chat Styled with a speech bubble to represent a conversation of some kind

• excerpt Styled similarly to quote, for a captured text snippet.

• reference
  Styled for inline reference metadata. Compact, monospace font.

• toc Styled to create a floating (hover:right) section for Table of Contents

You can import these admonitions using admonitions.json

Here is what they look like (Callouts and Admonitions):

Tables

To constrain the table content to the width of the pane, use:

---
cssclass: force-wrap
---

To prevent column headers from wrapping, use:

---
cssclass: word-wrap
---

Embeds

To make embedded content "invisible" (same background color as the including page and much less padding), use the invisible-embed css class:

---
cssclass: invisible-embed
---

Colors

All colors are sourced from this palette

Creating your own accent colors

A simple way to select colors that will work with this palette is by applying a grayscale filter to a selected hue.

1. Use the following URL to apply the grayscale filter to a color of your choice: https://grayscale.design/app?lums=71.05%2C60.94%2C48.16%2C35.39%2C17.24%2C6.39%2C2.80&palettes=%235c7a62%2C%238e6787&filters=0%7C0%2C0%7C0&names=green%2Cpurple&labels=%2C

2. Create a snippet that contains your customized colors.

Example

For example, let's use a REALLY BOLD RED: #ae2012.

1. If we visit the link above, we can scroll down a bit until we see a button "Add a color", and we paste this value (including the # in that field). This will show us something like this:

2. Scroll down until you see Step 3, which is the step you need to export your colors. You'll want to use the CSS variables.

   If we want to use this red as the primary color:

   .primary-accent-custom {
       --primary-accent-0: rgb(250, 210, 206); /* red-100 */
       --primary-accent-1: rgb(248, 192, 187); /* red-200 */
       --primary-accent-1-rgb: 248, 192, 187;  /* Note removal of rgb() function */
       --primary-accent-2: rgb(245, 163, 156); /* red-300 */
       --primary-accent-3: rgb(241, 127, 117); /* red-400 */
       --primary-accent-4: rgb(222, 40, 23);   /* red-500 */
       --primary-accent-4-rgb: 222, 40, 23;    /* Note removal of rgb() function */
       --primary-accent-5: rgb(142, 25, 15);   /* red-600 */
       --primary-accent-6: rgb(95, 17, 10);    /* red-700 */
   }
   

   If we want to use this red as the secondary color:

   .secondary-accent-custom {
       --secondary-accent-0: rgb(250, 210, 206); /* red-100 */
       --secondary-accent-1: rgb(248, 192, 187); /* red-200 */
       --secondary-accent-1-rgb: 248, 192, 187;  /* Note removal of rgb() function */
       --secondary-accent-2: rgb(245, 163, 156); /* red-300 */
       --secondary-accent-3: rgb(241, 127, 117); /* red-400 */
       --secondary-accent-4: rgb(222, 40, 23);   /* red-500 */
       --secondary-accent-4-rgb: 222, 40, 23;    /* Note removal of rgb() function */
       --secondary-accent-5: rgb(142, 25, 15);   /* red-600 */
       --secondary-accent-6: rgb(95, 17, 10);    /* red-700 */
   }
   

3. Create a snippet (e.g. a file namedaccent-colors.css) containing this content in the .obsidian/snippets directory. Go to the Obsidian Appearance settings use the refresh button if necessary to find the snippet, and enable it. Provided you've selected the "custom" value in the primary/secondary style settings drop-down, you should be off to the races with this brilliant red.

Changing tag colors

As of 0.5.3 (Obsidian 0.16+ / 1.x), use the "accent color" setting on the appearance pane to set your tag color. Resetting the value will use the theme default.

For 0.2.7 through 0.5.2, you can alter the color contrast (against the usual scale, 0-6) for tags in light or dark mode.

Credits

I've begged/borrowed/stolen CSS snippets from just about everywhere, but I started from vanilla and tried to be judicious about what to include to keep things lean.

I frequently reference the following two themes, as they're often the quickest to consume a new CSS trick or snippet:

• Spectrum
• ITS Theme

If you have ideas or requests, please open an issue. ;)

obsidian-theme-ebullientworks's Issues

0.16: Tweak show/hide left/right sidebar

• Icon in top/left for show/hide sidebar is overlapped
• There is no ribbon on the right side

Dark theme PDF exporting issue

There'are some problem while exporting to PDF in dark theme.

[Bug]: Style Settings Headers Error

When editing the style setting "Heading Font Caps Variant", Stylesettings begins erroring out.

I honestly do not use headers enough to determine if it is hindering the functionality of the setting; it does not seem to hinder color settings. I have included a gif of the action and error.

Looking at the style settings snippet, I do not see anything outwardly incorrect, but there might be something I am missing.

Change H1 to Title Case vs Upper Case

I have tried to change the h1 to a standard title case like Chapter 12 Mobile. I tried the text-transform, but that did not work. I turned off all Snippets in case, but that did to work either. I found one reference to text-transform but changing it did not resolve the issue.

I find this font style hard to read. I would appreciate your assistance in pointing me in the right direction.

I appreciate any help you can provide.

Alternate status icons on mobile

In Live Preview mode for Mobile, the icons for alternate status on display check boxes.

[FR] Add default Icons to Reference and TOC

Hello There! It's very quiet here.

I normally do not use admonitions anymore, as I am head-deep in custom callout land, but I have always enjoyed your interpretation of reference and too and so use those. Why reinvent a perfectly good wheel?

However, the one thing lacking is the icons missing on them. I noticed in the scss files that the css for both of them is standard, which means it's something I can possibly assist with! 💃🏻 I'll be happy to submit a PR with a simple update, or you can stick the 2 lines of code in there, your choice.

Now, the hard part. Icon choices. The current recommended ones are font-awesome icons. Unless you want to embed those or a user has them already installed, thats a no-go. So here are some Lucide that I think may work.

Reference:

1. library
2. album
3. pin (This is a left fielder, for fun).

ToC:

1. layout-list
2. clipboard-list

What do you think?

Introduction of your theme

Hi, i just want you know that i've made an introduction of your theme in Chinese, wish there'll be more users use it: https://youtu.be/AtibeL0tceo

Happy new year! ❤️

Secondary Accents on Mobile/tablet need work

i also don't know why, but active tab on ipad is still secondary accent color, rather than primary. I am missing something.. ipad colors hit secondary a lot more often than desktop does. not terrible, but different

Fix theme build/publish for Obsidian 0.16

https://forum.obsidian.md/t/0-16-0-theme-migration-guide/42537

the H1 title word height is low

• when i input the word with lowercase, the H1 height is low.
• while i input the word with uppercase, the H1 height is normal.

color ajustments

Hi, can you add color modification to the "style settings" plugin just like the prism theme in the picture ? thank you

problem in light theme

I can't see the selection when hovering the options in quick switcher.

test.mov

0.16: Header size within callouts

Tag contrast

The tags for me (using a light version) are too dark to read. I've tried to find where I can change them, but as of today I haven't found it. Currently, it is a reddish color on black. I need more contrast. The hover is black on black.

I appreciate the help!

Originally posted by @KzBeck in #7 (comment)

Block embeds cleanly / flush

For [[embed links#^blockid]] and [[embed links#heading]] can the theme remove all clutter ?

should look closer to

how to change the head font size?

I has try as below in custom css, but no any change in edit mode.
could you kindly help me?

.workspace .cm-header-2,
.workspace h2,
.print .cm-header-2,
.print h2 {
  /*font-variant: none;*/
  border-bottom: 1px dotted #F00;
  /*  font-variant: common-ligatures small-caps;*/
  font-variant: common-ligatures;
  font-weight: 500 !important;
  font-size: 25px !important;
  font: 18px !important;
    width: 350px !important;

}

0.16: Pane/titlebar header settings (visible and not)

Selected text highlighting is not visible in Light mode

When I select some text, I cannot see the selection, it is either so low in contrast or the same colour as the background. In dark mode, it is a bit discrete, but certainly visible.

Include Optional Admonitions

As we discussed earlier, with the export of Admonitions in Json form per admonition being an option, it would be a nice icing on the cake to be able to include those in an optional folder for those who want to grab them.

[Update] Publish Integration

If you are interested, I am submitting a Pull Request with Publish integration.

The .css used in Obsidian and Publish does not line up 1:1, so utilizing the existing files as is resulted in the publish site not uniformly changing. To reduce duplication of files and code, and to prevent any interference in your existed workflow, my method of getting around this was to change the individual .body, .theme-dark, and .theme-light, variables nests at the top of each file into mixins, and @include them into the core files from 01-03 respectively.

This way the important variables be called into publish's own file, without all the extra css that will either be half effective or a hindrance. I've mapped out Publish's DOM, but haven't done specific styling as of yet, so some things are not quite consistent with Ebullient theme (yet) such as StrongEM. But, many things are, like checkboxes and callouts. :)

Dark theme hightlighting text caret-color issue

Dark theme and editor mode, the cursor caret-color diffcult be seen.

My temporary fix:

.theme-dark .cm-highlight {
  caret-color: var(--text-highlight-fg);
}

Add Sync Icon script for Mobile/Tablet

Retrofit this snippet to work for ebullient

https://forum.obsidian.md/t/mobile-make-sync-icon-always-visible/31780

Request for documentation naming available custom checkboxes

Hello!

tl;dr

If someone could document this theme's supported custom checkboxes and their names - something like this - I would be happy to add support for this theme in the Tasks plugin.

Background

I'm the maintainer of the Tasks plugin, and am adding support for custom statuses, aka custom checkboxes.

The goal is to add more buttons like this, for popular themes with documented custom checkboxes.

table colors

Hi, i like your theme. 👍

But could you add some color for table cell's border or odd/even rows alternative background-color under Dark mode?
It's hard to see border in the currrent release.

Thanks.