Giter Club home page Giter Club logo

obsidian-night-owl-theme's Introduction

Obsidian.md - Night Owl Theme

Release Badge

โšก Inspired by the original Night Owl theme by Sarah Drasner.

Obsidian Night Owl Theme Preview

๐Ÿ“ฅ Installation

Obsidian Marketplace (Recommended)

  1. Open the Settings in Obsidian
  2. Navigate to Appearances tab under Options
  3. Under the Themes section, click on the Browse button next to Community Themes
  4. Search for Night Owl in the Filter text input in the upper left corner
  5. Click Use and then you're done! ๐ŸŽ‰

Manual

  1. Download this repo
  2. Copy the obsidian.css file into your vault's /.obsidian/themes directory
  3. Rename the file to Night Owl.css so it will have a unique name in the theme selection dropdown
  4. Open the Settings in Obsidian
  5. Navigate to Appearances tab under Options
  6. Under the Themes section, click on the dropdown menu next to Theme heading
  7. Select for Night Owl and then you're done! ๐ŸŽ‰'

๐Ÿ‘ฉโ€๐Ÿ’ป Local Dev Environment

This is for people who want to clone the repo and work with the file locally.

  1. Clone the repo
  2. Install dependencies
  3. Create .env with a file path to where your theme directory lives
    • Use .env-sample to see the format.
  4. Run npm start

All changes made to SCSS files will automatically be migrated into your Obsidian environment.

FAQs

How do I customize this theme?

This allows you to configure the theme directly in Obsidian without any CSS knowledge required!

More settings to come, but if you have specific requests, please open an issue here!

Intermediate: Add CSS snippets

Check out CSS snippets as a way to progressively enhance the theme.

Here's a useful forum post to help get you started.

๐ŸŽฉ Thanks to the suggestion by @DutchPete!

Hard: Create a fork of this theme

This is arguably the most reliable route, but will require some familiarity with coding.

I recommend using Node.js so you can leverage the Sass I'm starting to break out so you can make meaningful changes.

The Sass partials are will a work in progress though, so the way things are organized will probably change over time as I establish out better ways to structure how theming styles should be organized.

Typography

Preview Mode

When in preview mode, the typography is inspired by a dual font family system to easily distinguish between headings and regular text.

Editor Mode

When in edit mode, the typography is inspired from a developer like environment where you're "coding" your second-brain.

Credit

๐ŸŽฉ Hat tip to the Dracula Obsidian Theme for serving as the base theme I used to create this theme.

obsidian-night-owl-theme's People

Contributors

bencodezen avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.