Skip to content

Commit

Permalink
Added One Dark theme (#130)
Browse files Browse the repository at this point in the history
  • Loading branch information
hoonweiting authored Sep 2, 2021
1 parent 2b0c4fd commit 9731b3e
Show file tree
Hide file tree
Showing 3 changed files with 257 additions and 2 deletions.
7 changes: 5 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -143,5 +143,8 @@ Thank you so much for contributing!!
* [__Z-Touch__](themes/prism-z-touch.css) (by [Zeel Codder](https://github.com/zeel-codder))<br />
[![Z-Touch](screenshots/prism-z-touch.png)](themes/prism-z-touch.css)

* [__Solarized Dark Atom__](themes/prism-holi-theme.css) (by [Pranay Chauhan](https://github.com/PranayChauhan2516), based on [Solarized Dark Theme by Atom](https://github.com/atom/solarized-dark-syntax))<br />
[![Solarized Dark Atom](screenshots/prism-solarized-dark-atom.png)](themes/prism-solarized-dark-atom.css)
* [__Solarized Dark Atom__](themes/prism-solarized-dark-atom.css) (by [Pranay Chauhan](https://github.com/PranayChauhan2516), based on [Solarized Dark Theme by Atom](https://github.com/atom/solarized-dark-syntax))<br />
[![Solarized Dark Atom](screenshots/prism-solarized-dark-atom.png)](themes/prism-solarized-dark-atom.css)

* [__One Dark__](themes/prism-one-dark.css) (by [Hoon Wei Ting](https://github.com/hoonweiting), based on [Atom's One Dark Syntax](https://github.com/atom/atom/tree/master/packages/one-dark-syntax))<br />
[![One Dark](screenshots/prism-one-dark.png)](themes/prism-one-dark.css)
Binary file added screenshots/prism-one-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
252 changes: 252 additions & 0 deletions themes/prism-one-dark.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,252 @@
/**
* One Dark theme for prism.js
* Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
*/

/**
* One Dark colours in terms of RGB (accurate as of commit 8ae45ca on 6 Sep 2018)
* @mono-1: #abb2bf
* @mono-2: #828997
* @mono-3: #5c6370
* @hue-1: #56b6c2 <- cyan
* @hue-2: #61afef <- blue
* @hue-3: #c678dd <- purple
* @hue-4: #98c379 <- green
* @hue-5: #e06c75 <- red 1
* @hue-5-2: #be5046 <- red 2
* @hue-6: #d19a66 <- yellow 1
* @hue-6-2: #e5c07b <- yellow 2
* @syntax-fg: #abb2bf
* @syntax-bg: #282c34
* @syntax-gutter: #636d83
* @syntax-guide: #abb2bf26
* @syntax-accent: #528bff
* @syntax-selection-color: #3e4451
*/

code[class*="language-"],
pre[class*="language-"] {
background: #282c34;
color: #abb2bf;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
line-height: 1.5;

-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;

-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

/* Selection */
code[class*="language-"]::-moz-selection,
pre[class*="language-"] *::-moz-selection {
background: #3e4451;
text-shadow: none;
}

code[class*="language-"]::selection,
pre[class*="language-"] *::selection {
background: #3e4451;
text-shadow: none;
}

/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .2em .3em;
border-radius: .3em;
white-space: normal;
}

/* Print */
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}

.token.comment,
.token.prolog,
.token.cdata {
color: #5c6370;
}

.token.doctype,
.token.punctuation,
.token.entity {
color: #abb2bf;
}

.token.attr-name,
.token.class-name,
.token.boolean,
.token.constant,
.token.number,
.token.atrule {
color: #d19a66;
}

.token.keyword {
color: #c678dd;
}

.token.property,
.token.tag,
.token.symbol,
.token.deleted,
.token.important {
color: #e06c75;
}

.token.selector,
.token.string,
.token.char,
.token.builtin,
.token.inserted,
.token.regex,
.token.attr-value,
.token.attr-value > .token.punctuation {
color: #98c379;
}

.token.variable,
.token.operator,
.token.function {
color: #61afef;
}

.token.url {
color: #56b6c2;
text-decoration: underline;
}

/* HTML overrides */
.token.attr-value > .token.punctuation.attr-equals,
.token.special-attr > .token.attr-value > .token.value.css {
color: #abb2bf;
}

/* CSS overrides */
.language-css .token.selector {
color: #e06c75;
}

.language-css .token.property {
color: #abb2bf;
}

.language-css .token.url {
text-decoration: none;
}

.language-css .token.function,
.language-css .token.url > .token.function {
color: #56b6c2;
}

.language-css .token.url > .token.string.url {
color: #98c379;
}

.language-css .token.important,
.language-css .token.atrule .token.rule {
color: #c678dd;
}

/* JS overrides */
.language-javascript .token.operator {
color: #c678dd;
}

.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation {
color: #be5046;
}

/* JSON overrides */
.language-json .token.operator {
color: #abb2bf;
}

.language-json .token.null.keyword {
color: #d19a66;
}

/* MD overrides */
.language-markdown .token.url,
.language-markdown .token.url > .token.operator,
.language-markdown .token.url-reference.url > .token.string {
color: #abb2bf;
text-decoration: none;
}

.language-markdown .token.url > .token.content {
color: #61afef;
text-decoration: none;
}

.language-markdown .token.url > .token.url,
.language-markdown .token.url-reference.url {
color: #56b6c2;
text-decoration: underline;
}

.language-markdown .token.blockquote.punctuation,
.language-markdown .token.hr.punctuation {
color: #5c6370;
font-style: italic;
}

.language-markdown .token.code-snippet {
color: #98c379;
}

.language-markdown .token.bold .token.content {
color: #d19a66;
}

.language-markdown .token.italic .token.content {
color: #c678dd;
}

.language-markdown .token.strike .token.content,
.language-markdown .token.strike .token.punctuation,
.language-markdown .token.list.punctuation,
.language-markdown .token.title.important > .token.punctuation {
color: #e06c75;
}

/* General */
.token.bold {
font-weight: bold;
}

.token.comment,
.token.italic {
font-style: italic;
}

.token.entity {
cursor: help;
}

.token.namespace {
opacity: .8;
}

2 comments on commit 9731b3e

@atelierbram
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 there is also atom one light syntax @hoonweiting … anyone?

@hoonweiting
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've never wandered away from One Dark ever since I installed Atom (it looks so good!), but I can work on One Light later this week to match One Dark :)

Please sign in to comment.