Git Product home page Git Product logo

midnight-trilium-dark-mode's Introduction

Midnight - Trilium Dark Mode Theme

A beautiful, opinionated, material design inspired dark mode theme for Trilium with extra features and OCD level attention to detail and style coverage.

Midnight Screenshot

Supported Version Open Issues Open PRs

Features

  • Material Design Based
    • Comfortable Contrast
    • Maximum Readability
  • Dark Mode Friendly Font
  • Consistent Design
    • Including fixes to alignment and layout issues
  • Custom Code View Styling
    • Dark Mode Native
    • Ligature Font
  • Complete Style Coverage
    • More than even built in default themes and dark mode!
  • New Features
    • Zen Mode - focus solely on the note at hand

Support

Supported Trilium version: 0.50.2. Please report any bugs or missing style coverage.

Unsupported: Everything else. However, Midnight was initially developed against 0.49.5, versions greater then that will probably work but only latest supported. Early versions than 0.49.5 not tested.

Prerequisites

Technically none, Midnight will try and fetch the fonts it uses from the web. For offline use, or if any problems encountered, please manually install the following fonts:

  • Inter - A beautiful font designed specifically for screen use and works well in dark mode compared to default Trilium fonts.
  • FiraCode - The best programming font, great dark mode look and programming ligatures.

Installation

  • See prerequisites to guarantee font use even when offline.
  • Create a new note in Trilium, store it anywhere you would like.
  • Change note type to CSS.
  • Paste in the raw contents of midnight.css.
  • Add an owned attribute of #appTheme=Midnight to the note.
  • Click the Trilium icon in the top left, select Options, and under theme select Midnight.

Zen Mode

Enable the optional Zen Mode. Remember the ALT + Z key combo to exit Zen Mode!

  • Create a new note in Trilium, store it anywhere you would like.
  • Change note type to JS Frontend.
  • Paste in the raw contents of zenmode.js.
  • Add an owned attribute of #run=frontendStartup to the note.
  • Click the Trilium icon in the top left, select Reload frontend, or press F5 to reload the front end.

Customization

The code is laid out and commented for your easy customization. Change what you want, delete what you want. Let me know anything interesting you think is valuable for the core. Pull requests welcome!

Highly Opinionated

As described, this is my daily theme and is highly opinionated to my desires. I created a "highly opiniated" section of the code for those changes I've made that I expect may be controversial. This will allow easy removal if you do not like. Here they are so far:

  • By default, in Trilium notes have a max-width of 1200px. Midnight will override this to 100% with a slight margin for gutter comfort. If you don't like your notes too wide, feel free to remove.

Zen Mode VS Extreme Zen Mode

By default, "Extreme Zen Mode" is active, meaning Zen Mode removes everything but the note contents. If you would prefer that more of the note UI, such as attributes, tabs, splitter, etc, remain visible, comment out or remove the Extreme Zen Mode section and uncomment the Zen Mode section.

Donation

If for some reason you want to donate for this, I'm flattered but instead please consider donating to or sponsoring zadam, the developer of Trilium.

midnight-trilium-dark-mode's People

Contributors

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