Skip to content

Commit

Permalink
📝 Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
ebullient committed Nov 18, 2021
1 parent a694263 commit a73314c
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 28 deletions.
73 changes: 45 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
# Welcome to Ebullientworks Obsidian Theme 👋

<table><tr><td>Jump: </td>
<td><a href="#style-settings">Settings</a></td>
<td><a href="#admonitions">Admonitions</a></td>
<td><a href="#tables">Tables</a></td>
<td><a href="#colors">Colors</a></td>
<td><a href="#creating-your-own-accent-colors">Custom accents</a></td></tr></table>

![](https://raw.githubusercontent.com/ebullient/obsidian-theme-ebullientworks/main/images/ebullientworks-theme.jpg)

This is a dark and light theme for [Obsidian.md](https://obsidian.md), a note taking app.

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. Modals and other panels are also styled. All colors are sourced from [this palette](http://htmlpreview.github.io/?https://github.com/ebullient/obsidian-theme-ebullientworks/blob/main/colors.html)

Headers are styled and sized (for mobile and not) with and without Sliding panes (and rotated headers).
Headers are styled and sized (for mobile and not) with and without Sliding panes (and rotated headers). Modals, tables, and other panels are also styled.

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

Expand All @@ -17,21 +22,17 @@ Some light styling has also been applied for the following community plugins:
- timelines
- tracker

## Colors

![](images/theme-colors.jpg)

## Style Settings

This theme does support style settings. Settable attributes:

- "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.

- "Float front-matter in a box to the right"
- (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.

- "Prevent table content from extending beyond the width of the page"
- (0.2.0) "Prevent table content from extending beyond the width of the page"
If true, tables will have a maximum width set. Cell content will be wrapped (mid-word if necessary).

- Set custom fonts for
Expand All @@ -42,6 +43,36 @@ This theme does support style settings. Settable attributes:

- Choose primary / secondary accent color
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.

## Admonitions

As of 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 of the default admonitions, in addition to two additional custom types, have been styled.

Those two custom types are:

- `reference`
Styled for inline reference metadata. Compact, monospace font.
To use this style, create a `reference` admonition (I recommend you use the closed book icon, but take your pick).

- `toc`
Styled to create a floating (hover:right) section for Table of Contents
To use this style, create a `toc` admonition (I recommend you use the list icon, but take your pick).

Here is what they look like (unstyled edit mode on the left):

![](images/admonitions.png)

## Tables

![](images/table-styles.png)


## Colors

All colors are sourced from [this palette](http://htmlpreview.github.io/?https://github.com/ebullient/obsidian-theme-ebullientworks/blob/main/colors.html)

![](images/theme-colors.jpg)

### Creating your own accent colors

The colors used by this palette are selected by applying a grayscale filter to a selected hue.
Expand All @@ -51,7 +82,7 @@ https://grayscale.design/app?lums=71.05,60.94,48.16,35.39,17.24,6.39,2.80&palett

2. Create a snippet that contains your customized colors.

### Example
#### Example

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

Expand Down Expand Up @@ -92,27 +123,13 @@ For example, let's use a REALLY BOLD RED: `#ae2012`.
3. Create a snippet (e.g. a file named`accent-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.
## Admonitions
As of 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 of the default admonitions, in addition to two additional custom types, have been styled.
Those two custom types are:
- `reference`
Styled for inline reference metadata. Compact, monospace font.
To use this style, create a `reference` admonition (I recommend you use the closed book icon, but take your pick).
- `toc`
Styled to create a floating (hover:right) section for Table of Contents
To use this style, create a `toc` admonition (I recommend you use the list icon, but take your pick).
Here is what they look like (unstyled edit mode on the left):
## Credits
![](images/admonitions.png)
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.
## Credits
I frequently reference the following two themes, as they're often the quickest to consume a new CSS trick or snippet:
- [Spectrum](https://github.com/Braweria/Spectrum)
- [ITS Theme](https://github.com/SlRvb/Obsidian--ITS-Theme)
- Snippets from everywhere, including the forums and all the sources noted in the above two themes
Binary file added images/table-styles.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit a73314c

Please sign in to comment.