Now with a light Day variant

A vibrant syntax theme
for dark & light.

Electron Highlighter is a syntax theme based on the iconic One Dark theme from Atom, reimagined with a more vibrant color palette. Toggle the theme above — this whole page is a live preview.

Get the theme GitHub

Palette

Click any swatch to copy its hex for the current theme.

Accents

Neutrals

Ports

Electron Highlighter is available for the following platforms.

Neovim VS Code Zed Sublime Text Atom Kitty Alacritty Ghostty Hyper iTerm 2 Terminal.app tmux Fish Shell bat Pi

Examples

See the color scheme in action across common languages. Switch the theme above to preview both variants.

These snippets use the PrismJS highlighter, so the exact highlighting in your editor may differ.

:root {
  --font-base: 16px;
}
.someClass {
  font-family: serif;
  font-size: var(--font-base);
}

#someID {
  background: yellow;
  display: flex;
}

main {
  margin-top: 20px;
}

input[type="text"] {
  border-radius: 0;
  -webkit-border-radius: 0;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>
    <div id="app" class="tacos">Tacos Tacos</div>

    <p>Tacos tacos tacos</p>
    <!--comment-->
  </body>

</html>

'use strict'
class Sale {
  constructor(price) {
    ;[this.decoratorsList, this.price] = [[], price]
  }

  decorate(decorator) {
    if (!Sale[decorator]) throw new Error(`decorator does not exist: ${decorator}`)
    this.decoratorsList.push(Sale[decorator])
  }

  static async remotePrice(price) {
    return await Promise.all([fetch(`/api/convert/${price}`)])
  }

  getPrice() {
    for (let decorator of this.decoratorsList) {
      this.price = decorator(this.price)
    }
    return this.price.toFixed(2)
  }

  static quebec(price) {
    // this is a comment
    return price + price * 7.5 / 100
  }

  static fedtax(price) {
    return price + price * 5 / 100
  }
}

import (
  "fmt"
  "strings"
)

type deck []string

func newDeck() deck {
  cards := deck{}

  cardSuits := []string{"Spades", "Diamonds", "Hearts", "Clubs"}
  cardValues := []string{"Ace", "Two", "Three", "Four", "Five"}

  for _, suit := range cardSuits {
    for _, value := range cardValues {
      cards = append(cards, value+" of "+suit)
    }
  }

  return cards
}

from collections import deque
def topo(G, ind=None, Q=[1]):
    if ind == None:
        ind = [0] * (len(G) + 1) #this is a comment
        for u in G:
            for v in G[u]:
                ind[v] += 1
        Q = deque()
        for i in G:
            if ind[i] == 0:
                Q.append(i)
    if len(Q) == 0:
        return
    v = Q.popleft()
    print(v)
    for w in G[v]:
        ind[w] -= 1
        if ind[w] == 0:
            Q.append(w)
    topo(G, ind, Q)

module ExampleModule
  class ExampleClass::ScopeResolution < NewScope::Operator

    def initialize(options)
      @@class_var = options[:class]
      @instance_var = options[:instance]
    end

    def method
      puts 'doing stuff'
      yield if block_given?
      other_method(:arg)
    end

    def self.class_method
      return "I am a class method!"
    end

    private

    def other_method(*args)
      puts 'doing other stuff #{42}'
    end

    def self.private
      [1, 2, 3].each do |item|
        puts item
      end
    end

    private_class_method :private
  end
end

ExampleModule::ExampleClass::ScopeResolution
example_instance = ExampleModule::ExampleClass::ScopeResolution.new(:arg)

example_instance.method(:arg) do
  puts 'yielding in block!'
end

fn main() {
    let mut mutable_binding = 1;

    println!("Before mutation: {}", mutable_binding);

    // Ok
    mutable_binding += 1;

    println!("After mutation: {}", mutable_binding);
}

# Electron Highlighter Theme

> Electron Highlighter Theme for Atom

![Preview](images/preview.jpg)

# Installation

1.  Install [Atom](https://atom.io/)
2.  Launch Atom
3.  Open **Preferences** > **Install**
4.  Search for `electron-highlighter-syntax`
5.  Click **Install** to install it
6.  Preferences > Themes > Syntax Theme > **Electron Highlighter**


- lists
- more stuff
- it's a list mkay

import { Component, OnInit, OnDestroy } from '@angular/core'
import { Person, SearchService } from '../shared'
import { ActivatedRoute } from '@angular/router'
import { Subscription } from 'rxjs'

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit, OnDestroy {
  query: string
  searchResults: Array<Person>
  sub: Subscription

  constructor(
    private searchService: SearchService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      if (params['term']) {
        this.query = decodeURIComponent(params['term'])
        this.search()
      }
    })
  }

  search(): void {
    this.searchService.search(this.query).subscribe(
      (data: any) => {
        this.searchResults = data
      },
      error => console.log(error)
    )
  }

  ngOnDestroy() {
    if (this.sub) {
      this.sub.unsubscribe()
    }
  }
}