Dark mode with Shiki and Code Hike

• codehike

  4 3,091 9.0 TypeScript

  Marvellous code walkthroughs

  

  Warning: This article refers to versions of Code Hike before 0.8.0. Since version 0.8.0, Code Hike uses lighter instead of Shiki. The approach presented in this article uses shiki's color replacement method, which no longer works with lighter.

• lighter

  1 16 9.4 TypeScript

  

  Warning: This article refers to versions of Code Hike before 0.8.0. Since version 0.8.0, Code Hike uses lighter instead of Shiki. The approach presented in this article uses shiki's color replacement method, which no longer works with lighter.

• Appwrite

  appwrite.io

  sponsored

  Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  

• shiki

  12 4,945 9.7 TypeScript

  A beautiful Syntax Highlighter.

  

  Warning: This article refers to versions of Code Hike before 0.8.0. Since version 0.8.0, Code Hike uses lighter instead of Shiki. The approach presented in this article uses shiki's color replacement method, which no longer works with lighter.

• Tailwind CSS

  510 66,238 9.8 HTML

  A utility-first CSS framework for rapid UI development.

  

  If you use Tailwind CSS and use the dark mode with the class strategy instead of media query, you can override the variables like this:

• vscode-textmate

  2 444 4.8 JavaScript

  A library that helps tokenize text using Text Mate grammars.

  

  Shiki does this because the underlying library vscode-textmate or vscode-oniguruma returns black if the value is not a valid color. This explains why Code Hike uses blackish color codes instead of variables. But what if we write a variable directly into the theme instead of the color code.

• vscode-oniguruma

  2 69 2.5 JavaScript

  Oniguruma Bindings for VS Code

  

  Shiki does this because the underlying library vscode-textmate or vscode-oniguruma returns black if the value is not a valid color. This explains why Code Hike uses blackish color codes instead of variables. But what if we write a variable directly into the theme instead of the color code.

• convert-sh-theme

  1 1 10.0 TypeScript

  For more information about the converter tool, have a look at convert-sh-theme.

• Sonar

  www.sonarsource.com

  sponsored

  Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  

Suggest a related project