diff --git a/README.md b/README.md index eff2c17..518bd04 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,24 @@ # 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. +> 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. -![](dark.png) +![](dark_v2.png) -![](light.png) \ No newline at end of file +![](light_v2.png) \ No newline at end of file diff --git a/dark_v2.png b/dark_v2.png new file mode 100644 index 0000000..cd1f9b9 Binary files /dev/null and b/dark_v2.png differ diff --git a/everforest.css b/everforest.css index de650fc..4154ef2 100644 --- a/everforest.css +++ b/everforest.css @@ -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 { - --dark0-hard: #22282c; - --dark0: #2f383e; - --dark0-soft: #2f383e; - --dark1: #374247; - --dark2: #404c51; - --dark3: #4a555b; - --dark4: #525c62; + /* 2.1 Dark theme color variables */ + --bg0-dark: #22282c; + --bg1-dark: #272f34; + --bg-dark: #2f383e; + --bg2-dark: #374247; + --bg3-dark: #404c51; + --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; - - --light0-hard: #fff9e8; - --light0: #fdf6e3; - --light0-soft: #f8f0dc; - --light1: #f7f2e0; - --light2: #f0eed9; - --light3: #e9e8d2; - --light4: #e1ddcb; + --fg-dark: #d3c6aa; + --grey0-dark: #7f897d; + --grey1-dark: #859289; + --grey2-dark: #9aa79d; --faded-red: #e67e80; - --faded-green: #a7c080; - --faded-yellow: #dbbc7f; - --faded-blue: #7fbbb3; - --faded-purple: #d3869b; - --faded-aqua: #83c092; --faded-orange: #e69875; + --faded-yellow: #dbbc7f; + --faded-green: #a7c080; + --faded-aqua: #83c092; + --faded-blue: #7fbbb3; + --faded-purple: #d699b6; - --neutral-red: #da6362; - --neutral-green: #899c40; - --neutral-yellow: #bf983d; - --neutral-blue: #5a93a2; - --neutral-purple: #b87b9d; - --neutral-aqua: #569d79; - --neutral-orange: #d77f48; + --dim-red: #da6362; + --dim-orange: #d77f48; + --dim-yellow: #bf983d; + --dim-green: #899c40; + --dim-aqua: #569d79; + --dim-blue: #5a93a2; + --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 { - --font-monospace: 'Hack Nerd Font', 'Source Code Pro', monospace; - --background-primary: var(--dark0); - --background-primary-alt: var(--dark0); - --background-secondary: var(--dark0); - --background-secondary-alt: var(--dark1); - --text-normal: var(--light0); - --text-faint: var(--light3); - --text-title-h1: var(--faded-red); - --text-title-h2: var(--faded-orange); - --text-title-h3: var(--faded-yellow); - --text-title-h4: var(--faded-green); - --text-title-h5: var(--faded-aqua); - --text-title-h6: var(--faded-purple); - --text-link: var(--neutral-blue); + --background-primary: var(--bg-dark); + --background-primary-alt: var(--bg-dark); + --background-secondary: var(--bg-dark); + --background-secondary-alt: var(--bg-dark); + --text-normal: var(--fg-dark); + --text-faint: var(--grey1-dark); + --text-title-h1: var(--dim-red); + --text-title-h2: var(--dim-orange); + --text-title-h3: var(--dim-yellow); + --text-title-h4: var(--dim-green); + --text-title-h5: var(--dim-aqua); + --text-title-h6: var(--dim-purple); + --text-link: var(--faded-blue); --text-a: var(--faded-green); - --text-a-hover: var(--faded-aqua); - /*--text-mark: rgba(215, 153, 33, 0.4); /* neutral-yellow */ - --pre-code: var(--dark1); - --text-highlight-bg: var(--neutral-aqua); - --interactive-accent: var(--neutral-blue); - --interactive-before: var(--dark4); - --background-modifier-border: var(--dark2); - --text-accent: var(--neutral-green); - --interactive-accent-rgb: var(--neutral-blue); - --inline-code: var(--faded-blue); - --code-block: var(--faded-red); - --vim-cursor: var(--neutral-blue); - --text-selection: var(--dark4) + --text-a-hover: var(--dim-green); + --text-mark: rgba(215, 153, 33, 0.4); /* light-yellow */ + --pre-code: var(--bg1-dark); + --text-highlight-bg: var(--bg_green); + --interactive-accent: var(--bg5-dark); + --interactive-before: var(--bg5-dark); + --background-modifier-border: var(--bg5-dark); + --text-accent: var(--bg5-dark); + --interactive-accent-rgb: var(--faded-green); + --inline-code: var(--dim-blue); + --code-block: var(--fg-dark); + --vim-cursor: var(--faded-blue); + --text-selection: var(--bg5-dark); } +/* 2.4 Light theme implementation */ .theme-light { - --background-primary: var(--light0); - --background-primary-alt: var(--light0); - --background-secondary: var(--light0-hard); - --background-secondary-alt: var(--light1); - --text-normal: var(--dark0); - --text-faint: var(--dark3); - --text-title-h1: var(--neutral-red); - --text-title-h2: var(--neutral-orange); - --text-title-h3: var(--neutral-yellow); - --text-title-h4: var(--neutral-green); - --text-title-h5: var(--neutral-aqua); - --text-link: var(--neutral-blue); - --text-a: var(--neutral-orange); - --text-a-hover: var(--neutral-aqua); - --text-mark: rgba(215, 153, 33, 0.4); /* neutral-yellow */ - --pre-code: var(--light1); - --text-highlight-bg: var(--neutral-aqua); - --interactive-accent: var(--neutral-orange); - --interactive-before: var(--light4); - --background-modifier-border: var(--light2); - --text-accent: var(--neutral-orange); - --interactive-accent-rgb: var(--neutral-orange); - --inline-code: var(--neutral-blue); - --vim-cursor: var(--neutral-orange); + --background-primary: var(--bg-light); + --background-primary-alt: var(--bg-light); + --background-secondary: var(--bg-light); + --background-secondary-alt: var(--bg-light); + --text-normal: var(--fg-light); + --text-faint: var(--grey1-light); + --text-title-h1: var(--light-red); + --text-title-h2: var(--light-orange); + --text-title-h3: var(--light-yellow); + --text-title-h4: var(--light-green); + --text-title-h5: var(--light-aqua); + --text-title-h6: var(--light-purple); + --text-link: var(--light-blue); + --text-a: var(--light-dim-blue); + --text-a-hover: var(--light-blue); + --text-mark: rgba(215, 153, 33, 0.4); /* light-yellow */ + --pre-code: var(--bg1-light); + --text-highlight-bg: var(--light-dim-green); + --interactive-accent: var(--bg5-light); + --interactive-before: var(--bg5-light); + --background-modifier-border: var(--bg5-light); + --text-accent: var(--bg5-light); + --interactive-accent-rgb: var(--light-dim-green); + --inline-code: var(--light-blue); + --code-block: var(--fg-light); + --vim-cursor: var(--light-blue); --text-selection: rgba(189, 174, 147, 0.5); /* light3 */ } @@ -472,14 +556,14 @@ img } input.task-list-item-checkbox { - border: 1px solid var(--dark4); + border: 1px solid var(--dark3); appearance: none; -webkit-appearance: none; } input.task-list-item-checkbox:checked { - background-color: var(--dark4); + background-color: var(--dark3); box-shadow: inset 0 0 0 2px var(--background-primary); } diff --git a/light_v2.png b/light_v2.png new file mode 100644 index 0000000..62d81d8 Binary files /dev/null and b/light_v2.png differ