dom/obsidian_everforest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refined colors; updated skeleton ToC; updated README

Browse Source
This commit is contained in:
GlitchByte
2021-07-14 15:38:55 -04:00
parent b114d6a769
commit 8585e70287
4 changed files with 182 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@@ -1,10 +1,24 @@
# Obsidian + Everforest # Obsidian + Everforest
This is an [Everforest](https://github.com/sainnhe/everforest) theme for This is an [Everforest](https://github.com/sainnhe/everforest-vscode) theme for
[Obsidian](https://obsidian.md). It supports both light and dark modes. [Obsidian](https://obsidian.md). It supports both light and dark modes.
> Everforest is a green based color scheme, it's designed to be warm and soft in order to protect developers' eyes.
## Features
- Green based but warm-toned.
- Designed to have soft contrast for eye protection.
- Works well with [redshift](https://github.com/jonls/redshift) and [f.lux](https://justgetflux.com).
- Customizable.
- Rich support for common file types.
- Semantic highlighting support.
- Italic support.
**Currently only supports the Medium Material modes.**
## Installation
Simply copy the `everforest.css` file to your vault directory/.obsidian/themes to choose it from your settings. Simply copy the `everforest.css` file to your vault directory/.obsidian/themes to choose it from your settings.
![](dark.png) ![](dark_v2.png)
![](light.png) ![](light_v2.png)

BIN
dark_v2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 625 KiB

246
everforest.css
View File

@@ -1,101 +1,185 @@
/***** TABLE OF CONTENTS *****/
/* TODO: Reformat entire CSS file as below.
/* 1. Font
/* 2. Colours
/* 2.1. Dark theme color variables
/* 2.2. Light theme color variables
/* 2.3. Dark theme implementation
/* 2.4. Light theme implementation
/* 3. General UI
/* 3.1. Title Bar
/* 4. Markdown (editor / preview)
/* 4.1. Headings
/* 4.1.1. Fix font weights
/* 4.2. Links
/* 4.2.1. Nifty arrow before internal links (also applies to embeds)
/* 4.3. Embeds
/* 4.4. Tables
/* 4.5. Popovers
/* 4.6. Task Lists
/* 4.7. Blockquotes
/* 4.8. Code
/* 4.9. Bulleted lists
/* 4.10. Misc Fixes
/* 5. Graph view colours
/* 6. Notion Colour Blocks
/* 7. In-document header (scrolls with the document) [remove for compatibility with Andy's mode]
/* 7.1. Adjustments for non-in-document headers (graphs, etc)\
/* 7.2. Active pane border
/* 7.3. Misc fixes
/* 8. Tags
/* 8.1. Tag custom colours
/***** *****/
/* 1. Font */
body {
/* font stacks taken directly from Notion */
--font-monospace: Hack Nerd Font',Source Code Pro', monospace;
-webkit-font-smoothing: auto;
}
/* 2. Colours */
:root :root
{ {
--dark0-hard: #22282c; /* 2.1 Dark theme color variables */
--dark0: #2f383e; --bg0-dark: #22282c;
--dark0-soft: #2f383e; --bg1-dark: #272f34;
--dark1: #374247; --bg-dark: #2f383e;
--dark2: #404c51; --bg2-dark: #374247;
--dark3: #4a555b; --bg3-dark: #404c51;
--dark4: #525c62; --bg4-dark: #4a555b;
--bg5-dark: #525c62;
--bg_visual: #503946;
--bg_red: #4e3e43;
--bg_green: #404d44;
--bg_blue: #394f5a;
--bg_yellow: #4a4940;
--shadow: #00000070;
--gray: #7c8377; --fg-dark: #d3c6aa;
--grey0-dark: #7f897d;
--light0-hard: #fff9e8; --grey1-dark: #859289;
--light0: #fdf6e3; --grey2-dark: #9aa79d;
--light0-soft: #f8f0dc;
--light1: #f7f2e0;
--light2: #f0eed9;
--light3: #e9e8d2;
--light4: #e1ddcb;
--faded-red: #e67e80; --faded-red: #e67e80;
--faded-green: #a7c080;
--faded-yellow: #dbbc7f;
--faded-blue: #7fbbb3;
--faded-purple: #d3869b;
--faded-aqua: #83c092;
--faded-orange: #e69875; --faded-orange: #e69875;
--faded-yellow: #dbbc7f;
--faded-green: #a7c080;
--faded-aqua: #83c092;
--faded-blue: #7fbbb3;
--faded-purple: #d699b6;
--neutral-red: #da6362; --dim-red: #da6362;
--neutral-green: #899c40; --dim-orange: #d77f48;
--neutral-yellow: #bf983d; --dim-yellow: #bf983d;
--neutral-blue: #5a93a2; --dim-green: #899c40;
--neutral-purple: #b87b9d; --dim-aqua: #569d79;
--neutral-aqua: #569d79; --dim-blue: #5a93a2;
--neutral-orange: #d77f48; --dim-purple: #b87b9d;
/* 2.2 Light theme color variables */
--bg0-light: #f0edd8;
--bg1-light: #f6f1dd;
--bg-light: #fdf6e3;
--bg2-light: #f3efda;
--bg3-light: #edead5;
--bg4-light: #e4e1cd;
--bg5-light: #dfdbc8;
--grey0-light: #a4ad9e;
--grey1-light: #939f91;
--grey2-light: #879686;
--shadow-light: #3c474d20;
--bg_visual_light: #eaedc8;
--bg_red_light: #fbe3da;
--bg_green_light: #f0f1d2;
--bg_blue_light: #e9f0e9;
--bg_yellow_light: #faedcd;
--fg-light: #5c6a72;
--light-red: #f85552;
--light-orange: #f57d26;
--light-yellow: #bf983d;
--light-green: #899c40;
--light-aqua: #569d79;
--light-blue: #5a93a2;
--light-purple: #b87b9d;
--light-dim-red: #f1706f;
--light-dim-orange: #f39459;
--light-dim-yellow: #e4b649;
--light-dim-green: #a4bb4a;
--light-dim-aqua: #6ec398;
--light-dim-blue: #6cb3c6;
--light-dim-purple: #e092be;
} }
/* 2.3 Dark theme implementation */
.theme-dark .theme-dark
{ {
--font-monospace: 'Hack Nerd Font', 'Source Code Pro', monospace; --background-primary: var(--bg-dark);
--background-primary: var(--dark0); --background-primary-alt: var(--bg-dark);
--background-primary-alt: var(--dark0); --background-secondary: var(--bg-dark);
--background-secondary: var(--dark0); --background-secondary-alt: var(--bg-dark);
--background-secondary-alt: var(--dark1); --text-normal: var(--fg-dark);
--text-normal: var(--light0); --text-faint: var(--grey1-dark);
--text-faint: var(--light3); --text-title-h1: var(--dim-red);
--text-title-h1: var(--faded-red); --text-title-h2: var(--dim-orange);
--text-title-h2: var(--faded-orange); --text-title-h3: var(--dim-yellow);
--text-title-h3: var(--faded-yellow); --text-title-h4: var(--dim-green);
--text-title-h4: var(--faded-green); --text-title-h5: var(--dim-aqua);
--text-title-h5: var(--faded-aqua); --text-title-h6: var(--dim-purple);
--text-title-h6: var(--faded-purple); --text-link: var(--faded-blue);
--text-link: var(--neutral-blue);
--text-a: var(--faded-green); --text-a: var(--faded-green);
--text-a-hover: var(--faded-aqua); --text-a-hover: var(--dim-green);
/*--text-mark: rgba(215, 153, 33, 0.4); /* neutral-yellow */ --text-mark: rgba(215, 153, 33, 0.4); /* light-yellow */
--pre-code: var(--dark1); --pre-code: var(--bg1-dark);
--text-highlight-bg: var(--neutral-aqua); --text-highlight-bg: var(--bg_green);
--interactive-accent: var(--neutral-blue); --interactive-accent: var(--bg5-dark);
--interactive-before: var(--dark4); --interactive-before: var(--bg5-dark);
--background-modifier-border: var(--dark2); --background-modifier-border: var(--bg5-dark);
--text-accent: var(--neutral-green); --text-accent: var(--bg5-dark);
--interactive-accent-rgb: var(--neutral-blue); --interactive-accent-rgb: var(--faded-green);
--inline-code: var(--faded-blue); --inline-code: var(--dim-blue);
--code-block: var(--faded-red); --code-block: var(--fg-dark);
--vim-cursor: var(--neutral-blue); --vim-cursor: var(--faded-blue);
--text-selection: var(--dark4) --text-selection: var(--bg5-dark);
} }
/* 2.4 Light theme implementation */
.theme-light .theme-light
{ {
--background-primary: var(--light0); --background-primary: var(--bg-light);
--background-primary-alt: var(--light0); --background-primary-alt: var(--bg-light);
--background-secondary: var(--light0-hard); --background-secondary: var(--bg-light);
--background-secondary-alt: var(--light1); --background-secondary-alt: var(--bg-light);
--text-normal: var(--dark0); --text-normal: var(--fg-light);
--text-faint: var(--dark3); --text-faint: var(--grey1-light);
--text-title-h1: var(--neutral-red); --text-title-h1: var(--light-red);
--text-title-h2: var(--neutral-orange); --text-title-h2: var(--light-orange);
--text-title-h3: var(--neutral-yellow); --text-title-h3: var(--light-yellow);
--text-title-h4: var(--neutral-green); --text-title-h4: var(--light-green);
--text-title-h5: var(--neutral-aqua); --text-title-h5: var(--light-aqua);
--text-link: var(--neutral-blue); --text-title-h6: var(--light-purple);
--text-a: var(--neutral-orange); --text-link: var(--light-blue);
--text-a-hover: var(--neutral-aqua); --text-a: var(--light-dim-blue);
--text-mark: rgba(215, 153, 33, 0.4); /* neutral-yellow */ --text-a-hover: var(--light-blue);
--pre-code: var(--light1); --text-mark: rgba(215, 153, 33, 0.4); /* light-yellow */
--text-highlight-bg: var(--neutral-aqua); --pre-code: var(--bg1-light);
--interactive-accent: var(--neutral-orange); --text-highlight-bg: var(--light-dim-green);
--interactive-before: var(--light4); --interactive-accent: var(--bg5-light);
--background-modifier-border: var(--light2); --interactive-before: var(--bg5-light);
--text-accent: var(--neutral-orange); --background-modifier-border: var(--bg5-light);
--interactive-accent-rgb: var(--neutral-orange); --text-accent: var(--bg5-light);
--inline-code: var(--neutral-blue); --interactive-accent-rgb: var(--light-dim-green);
--vim-cursor: var(--neutral-orange); --inline-code: var(--light-blue);
--code-block: var(--fg-light);
--vim-cursor: var(--light-blue);
--text-selection: rgba(189, 174, 147, 0.5); /* light3 */ --text-selection: rgba(189, 174, 147, 0.5); /* light3 */
} }
@@ -472,14 +556,14 @@ img
} }
input.task-list-item-checkbox { input.task-list-item-checkbox {
border: 1px solid var(--dark4); border: 1px solid var(--dark3);
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
} }
input.task-list-item-checkbox:checked input.task-list-item-checkbox:checked
{ {
background-color: var(--dark4); background-color: var(--dark3);
box-shadow: inset 0 0 0 2px var(--background-primary); box-shadow: inset 0 0 0 2px var(--background-primary);
} }

BIN
light_v2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 639 KiB