mirror of
https://github.com/taniarascia/new-moon.git
synced 2025-04-19 11:22:15 +03:00
Update README
This commit is contained in:
Tania Rascia
parent
c81b549082
commit
fe8d289135
50
README.md
50
README.md
@ -2,7 +2,7 @@
|
||||
|
||||
# New Moon Theme
|
||||
|
||||
[](https://opensource.org/licenses/MIT) [](https://marketplace.visualstudio.com/items?itemName=taniarascia.new-moon-vscode) [](https://marketplace.visualstudio.com/items?itemName=taniarascia.new-moon-vscode) 
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
|
||||
[New Moon](https://taniarascia.github.io/new-moon/) is the optimized dark theme for web development. It's intuitive, easy on the eyes, and consistent across your entire development environment. It's pleasant for long coding hours in any language, and particularly well suited for HTML, CSS, SCSS/LESS, PHP (WordPress), and JavaScript (React, Vue).
|
||||
|
||||
@ -16,9 +16,7 @@ New Moon is available for:
|
||||
|
||||
- [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=taniarascia.new-moon-vscode)
|
||||
- [Chrome DevTools](https://chrome.google.com/webstore/detail/devtools-theme-new-moon/lndddploiofhfpdcoclegenegblkhlfk?hl=en)
|
||||
- [Brackets](https://github.com/taniarascia/new-moon-brackets)
|
||||
- [Sublime Text](https://packagecontrol.io/packages/New%20Moon%20Color%20Scheme)
|
||||
- [Atom](https://github.atom.io/packages/new-moon-atom-syntax)
|
||||
- [iTerm2](https://github.com/taniarascia/new-moon/tree/master/iterm2)
|
||||
- [Terminal.app](https://github.com/taniarascia/new-moon/tree/master/Terminal.app)
|
||||
- [Hyper Term](https://github.com/Tmeister/hyperterm-new-moon-theme)
|
||||
@ -51,32 +49,24 @@ New Moon is available for:
|
||||
|
||||
## Colors
|
||||
|
||||
| Usage | Palette | Hex Code |
|
||||
| --------------- | ------------ | ------------------------------------------------------------------ |
|
||||
| Background | Darkest |  `#2d2d2d` |
|
||||
| Comment | Medium |  `#777c85` |
|
||||
| Foreground | Light |  `#b3b9c5` |
|
||||
| Function | Lightest |  `#ffffff` |
|
||||
| Variable | Red |  `#f2777a` |
|
||||
| Number | Orange |  `#fca369` |
|
||||
| Attribute | Yellow |  `#ffd479` |
|
||||
| Keyword | Light Yellow |  `#ffeea6` |
|
||||
| String | Green |  `#92d192` |
|
||||
| Class/Tag | Blue |  `#6ab0f3` |
|
||||
| Constant/Pseudo | Aqua |  `#76d4d6` |
|
||||
| Support | Purple |  `#e1a6f2` |
|
||||
| Operator | Beige |  `#ac8d58` |
|
||||
| Usage | Palette | Hex Code |
|
||||
| --------------- | ------------ | --------- |
|
||||
| Background | Darkest | `#2d2d2d` |
|
||||
| Comment | Medium | `#777c85` |
|
||||
| Foreground | Light | `#b3b9c5` |
|
||||
| Function | Lightest | `#ffffff` |
|
||||
| Variable | Red | `#f2777a` |
|
||||
| Number | Orange | `#fca369` |
|
||||
| Attribute | Yellow | `#ffd479` |
|
||||
| Keyword | Light Yellow | `#ffeea6` |
|
||||
| String | Green | `#92d192` |
|
||||
| Class/Tag | Blue | `#6ab0f3` |
|
||||
| Constant/Pseudo | Aqua | `#76d4d6` |
|
||||
| Support | Purple | `#e1a6f2` |
|
||||
| Operator | Beige | `#ac8d58` |
|
||||
|
||||
## Screenshots
|
||||
|
||||
### Chrome DevTools
|
||||
|
||||
|
||||
|
||||
### iTerm2
|
||||
|
||||
|
||||
|
||||
### VSC: JavaScript/React
|
||||
|
||||
|
||||
@ -89,6 +79,14 @@ New Moon is available for:
|
||||
|
||||
|
||||
|
||||
### Chrome DevTools
|
||||
|
||||
|
||||
|
||||
### iTerm2
|
||||
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
New Moon themes for any app are welcome! To contribute:
|
||||
|
||||
396
docs/index.html
396
docs/index.html
@ -1,159 +1,265 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
||||
<title>New Moon Syntax Theme for Web Development</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="The optimized dark theme for web development"
|
||||
/>
|
||||
|
||||
<title>New Moon Syntax Theme for Web Development</title>
|
||||
<meta name="description" content="The optimized dark theme for web development">
|
||||
<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />
|
||||
<link rel="dns-prefetch" href="https://api.github.com/" />
|
||||
|
||||
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
|
||||
<link rel="dns-prefetch" href="https://api.github.com/">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Cinzel+Decorative:400%7CAveria+Serif+Libre&display=swap"
|
||||
/>
|
||||
<link rel="stylesheet" href="./css/main.css" />
|
||||
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cinzel+Decorative:400%7CAveria+Serif+Libre&display=swap">
|
||||
<link rel="stylesheet" href="./css/main.css">
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
href="./apple-touch-icon.png"
|
||||
sizes="180x180"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
href="./favicon-32x32.png"
|
||||
sizes="32x32"
|
||||
type="image/png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
href="./favicon-16x16.png"
|
||||
sizes="16x16"
|
||||
type="image/png"
|
||||
/>
|
||||
<link rel="manifest" href="./manifest.json" />
|
||||
<link rel="mask-icon" href="./safari-pinned-tab.svg" color="#2d2d2d" />
|
||||
<meta name="apple-mobile-web-app-title" content="New Moon Syntax Theme" />
|
||||
<meta name="application-name" content="New Moon Syntax Theme" />
|
||||
<meta name="msapplication-TileColor" content="#2d2d2d" />
|
||||
<meta name="theme-color" content="#2d2d2d" />
|
||||
|
||||
<link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="./favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="./favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="./manifest.json">
|
||||
<link rel="mask-icon" href="./safari-pinned-tab.svg" color="#2d2d2d">
|
||||
<meta name="apple-mobile-web-app-title" content="New Moon Syntax Theme">
|
||||
<meta name="application-name" content="New Moon Syntax Theme">
|
||||
<meta name="msapplication-TileColor" content="#2d2d2d">
|
||||
<meta name="theme-color" content="#2d2d2d">
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
|
||||
<script async defer src="https://buttons.github.io/buttons.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<img
|
||||
class="logo"
|
||||
src="./logos/new-moon.svg"
|
||||
alt="New Moon Logo"
|
||||
width="150"
|
||||
height="150"
|
||||
/>
|
||||
<h1>New Moon</h1>
|
||||
<div class="subtitle">The optimized dark theme for web development</div>
|
||||
<a
|
||||
class="github-button"
|
||||
href="https://github.com/taniarascia/new-moon"
|
||||
data-icon="octicon-star"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Star taniarascia/new-moon on GitHub"
|
||||
>New Moon</a
|
||||
>
|
||||
<a
|
||||
class="github-button"
|
||||
href="https://github.com/taniarascia"
|
||||
data-size="large"
|
||||
data-show-count="true"
|
||||
aria-label="Follow @taniarascia on GitHub"
|
||||
>@taniarascia</a
|
||||
>
|
||||
</header>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<img class="logo" src="./logos/new-moon.svg" alt="New Moon Logo" width="150" height="150">
|
||||
<h1>New Moon</h1>
|
||||
<div class="subtitle">
|
||||
The optimized dark theme for web development
|
||||
</div>
|
||||
<a class="github-button" href="https://github.com/taniarascia/new-moon" data-icon="octicon-star" data-size="large"
|
||||
data-show-count="true" aria-label="Star taniarascia/new-moon on GitHub">New Moon</a>
|
||||
<a class="github-button" href="https://github.com/taniarascia" data-size="large" data-show-count="true"
|
||||
aria-label="Follow @taniarascia on GitHub">@taniarascia</a>
|
||||
</header>
|
||||
<section>
|
||||
<img
|
||||
srcset="./samples/react.png, ./samples/react@2x.png 2x"
|
||||
src="./samples/react.png"
|
||||
alt="React Screenshot"
|
||||
width="800"
|
||||
height="634"
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<img srcset="./samples/react.png, ./samples/react@2x.png 2x" src="./samples/react.png" alt="React Screenshot"
|
||||
width="800" height="634">
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>
|
||||
<span class="circle b2"></span>
|
||||
One theme for all your apps
|
||||
</h2>
|
||||
<p>
|
||||
New Moon is available for your <strong>text editor</strong> (VS Code, Brackets, Sublime, VIM, Atom), your
|
||||
browser's <strong>DevTools</strong> (Chrome), your
|
||||
<strong>terminal</strong> (iTerm2, HyperTerm, Blink), and your <strong>APL session</strong> (Dyalog, RIDE).
|
||||
</p>
|
||||
|
||||
<div class="logos">
|
||||
<a href="https://marketplace.visualstudio.com/items?itemName=taniarascia.new-moon-vscode" rel="noopener"
|
||||
target="_blank">
|
||||
<img class="logo2" src="./logos/vscode.png" alt="VS Code Logo" width="75" height="75">
|
||||
</a>
|
||||
<a href="https://chrome.google.com/webstore/detail/devtools-theme-new-moon/lndddploiofhfpdcoclegenegblkhlfk?hl=en"
|
||||
rel="noopener" target="_blank">
|
||||
<img class="logo2" src="./logos/chrome.png" alt="Chrome Logo" width="75" height="75">
|
||||
</a>
|
||||
<a href="https://github.com/taniarascia/new-moon/tree/master/iterm2">
|
||||
<img class="logo2" src="./logos/iterm2.png" alt="VS Code Logo" width="75" height="75">
|
||||
</a>
|
||||
<a href="https://github.com/taniarascia/new-moon-brackets">
|
||||
<img class="logo2" src="./logos/brackets.png" alt="VS Code Logo" width="75" height="75">
|
||||
</a>
|
||||
<a href="https://packagecontrol.io/packages/New%20Moon%20Color%20Scheme">
|
||||
<img class="logo2" src="./logos/sublime.png" alt="VS Code Logo" width="75" height="75">
|
||||
</a>
|
||||
<a href="https://atom.io/themes/new-moon-atom-syntax">
|
||||
<img class="logo2" src="./logos/atom.png" alt="VS Code Logo" width="75" height="75">
|
||||
</a>
|
||||
<a href="https://github.com/taniarascia/new-moon/tree/master/dyalog">
|
||||
<img class="logo2" src="./logos/dyalog.png" alt="Dyalog Logo" width="75" height="75">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
<span class="circle g2"></span>
|
||||
Intuitive syntax highlighting
|
||||
</h2>
|
||||
<p>
|
||||
I've meticulously designed <strong class="y">New Moon</strong> to be easy on the eyes with intuitive
|
||||
connections between related elements. It's pleasant for long coding hours in any language,
|
||||
and particularly well suited for <strong class="o">HTML</strong>, <strong class="strong">CSS</strong>,
|
||||
<strong class="r">Sass</strong>, <strong class="p">PHP</strong>, and <strong class="y">JavaScript</strong>.
|
||||
</p>
|
||||
<h3>HTML & CSS work together</h3>
|
||||
<p>In HTML, we can see tags are blue, attributes are yellow, and values are green.</p>
|
||||
<img src="./samples/html.png" alt="HTML Screenshot" width="430" height="114">
|
||||
<p>
|
||||
In CSS, Sass, or LESS, styling tag selectors will be blue, and classes will be yellow.
|
||||
</p>
|
||||
<img src="./samples/css1.png" alt="CSS/Sass/Less Screenshot" width="316" height="242">
|
||||
<h3>Optimized for JSX and React</h3>
|
||||
<p>Even React component names are blue, matching HTML and JSX tags.</p>
|
||||
<img src="./samples/component.png" alt="React Components Screenshot" width="450" height="397">
|
||||
<h3>Clear distinctions between code and markup</h3>
|
||||
<p>
|
||||
Variables are red, tags are blue, and the distinction between PHP and HTML or JavaScript
|
||||
and JSX is clear and obvious.
|
||||
</p>
|
||||
<img src="./samples/php3.png" alt="PHP Screenshot" width="570" height="365">
|
||||
<h2>
|
||||
<span class="circle p2"></span>
|
||||
What are people saying?
|
||||
</h2>
|
||||
<blockquote>
|
||||
<section>
|
||||
<h2>
|
||||
<span class="circle b2"></span>
|
||||
One theme for all your apps
|
||||
</h2>
|
||||
<p>
|
||||
“Undoubtedly the best color theme ever. Just install and see yourself. The background
|
||||
color is perfect for long time exposure to the eyes. And the code color is well lit and
|
||||
separated from each other.”
|
||||
New Moon is available for your <strong>text editor</strong> (VS Code,
|
||||
Sublime, VIM), your browser's <strong>DevTools</strong> (Chrome), your
|
||||
<strong>terminal</strong> (iTerm2, HyperTerm, Blink), and your
|
||||
<strong>APL session</strong> (Dyalog, RIDE).
|
||||
</p>
|
||||
<cite>— Ibnul Alam</cite>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>
|
||||
“Absolutely beautiful theme. Definitely deserves more recognition.”
|
||||
</p>
|
||||
<cite>— Arcadia</cite>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>
|
||||
“Great theme for long coding hours.”
|
||||
</p>
|
||||
<cite>— Volkan</cite>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>
|
||||
“Really surprised this theme isn't more popular. It's a joy to use for HTML/CSS/JS and
|
||||
PHP. I like that it isn't heavy on blue colors like a lot of the popular dark themes.”
|
||||
</p>
|
||||
<cite>— Brendan</cite>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>
|
||||
“Wonderful. Well crafted with a clear sense of experience and focus. It actually helps me code more by
|
||||
enjoying the process more. Excellent work Tania.”
|
||||
</p>
|
||||
<cite>— Monte</cite>
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
<section class="credits">
|
||||
<p>Made by <a href="https://www.taniarascia.com/" rel="noopener" target="_blank">Tania Rascia</a></p>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
<div class="logos">
|
||||
<a
|
||||
href="https://marketplace.visualstudio.com/items?itemName=taniarascia.new-moon-vscode"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
class="logo2"
|
||||
src="./logos/vscode.png"
|
||||
alt="VS Code Logo"
|
||||
width="75"
|
||||
height="75"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://chrome.google.com/webstore/detail/devtools-theme-new-moon/lndddploiofhfpdcoclegenegblkhlfk?hl=en"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
class="logo2"
|
||||
src="./logos/chrome.png"
|
||||
alt="Chrome Logo"
|
||||
width="75"
|
||||
height="75"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://github.com/taniarascia/new-moon/tree/master/iterm2">
|
||||
<img
|
||||
class="logo2"
|
||||
src="./logos/iterm2.png"
|
||||
alt="VS Code Logo"
|
||||
width="75"
|
||||
height="75"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://packagecontrol.io/packages/New%20Moon%20Color%20Scheme"
|
||||
>
|
||||
<img
|
||||
class="logo2"
|
||||
src="./logos/sublime.png"
|
||||
alt="VS Code Logo"
|
||||
width="75"
|
||||
height="75"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://github.com/taniarascia/new-moon/tree/master/dyalog">
|
||||
<img
|
||||
class="logo2"
|
||||
src="./logos/dyalog.png"
|
||||
alt="Dyalog Logo"
|
||||
width="75"
|
||||
height="75"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
<span class="circle g2"></span>
|
||||
Intuitive syntax highlighting
|
||||
</h2>
|
||||
<p>
|
||||
I've meticulously designed <strong class="y">New Moon</strong> to be
|
||||
easy on the eyes with intuitive connections between related elements.
|
||||
It's pleasant for long coding hours in any language, and particularly
|
||||
well suited for <strong class="o">HTML</strong>,
|
||||
<strong class="strong">CSS</strong>, <strong class="r">Sass</strong>,
|
||||
<strong class="p">PHP</strong>, and
|
||||
<strong class="y">JavaScript</strong>.
|
||||
</p>
|
||||
<h3>HTML & CSS work together</h3>
|
||||
<p>
|
||||
In HTML, we can see tags are blue, attributes are yellow, and values
|
||||
are green.
|
||||
</p>
|
||||
<img
|
||||
src="./samples/html.png"
|
||||
alt="HTML Screenshot"
|
||||
width="430"
|
||||
height="114"
|
||||
/>
|
||||
<p>
|
||||
In CSS, Sass, or LESS, styling tag selectors will be blue, and classes
|
||||
will be yellow.
|
||||
</p>
|
||||
<img
|
||||
src="./samples/css1.png"
|
||||
alt="CSS/Sass/Less Screenshot"
|
||||
width="316"
|
||||
height="242"
|
||||
/>
|
||||
<h3>Optimized for JSX and React</h3>
|
||||
<p>Even React component names are blue, matching HTML and JSX tags.</p>
|
||||
<img
|
||||
src="./samples/component.png"
|
||||
alt="React Components Screenshot"
|
||||
width="450"
|
||||
height="397"
|
||||
/>
|
||||
<h3>Clear distinctions between code and markup</h3>
|
||||
<p>
|
||||
Variables are red, tags are blue, and the distinction between PHP and
|
||||
HTML or JavaScript and JSX is clear and obvious.
|
||||
</p>
|
||||
<img
|
||||
src="./samples/php3.png"
|
||||
alt="PHP Screenshot"
|
||||
width="570"
|
||||
height="365"
|
||||
/>
|
||||
<h2>
|
||||
<span class="circle p2"></span>
|
||||
What are people saying?
|
||||
</h2>
|
||||
<blockquote>
|
||||
<p>
|
||||
“Undoubtedly the best color theme ever. Just install and see
|
||||
yourself. The background color is perfect for long time exposure to
|
||||
the eyes. And the code color is well lit and separated from each
|
||||
other.”
|
||||
</p>
|
||||
<cite>— Ibnul Alam</cite>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>
|
||||
“Absolutely beautiful theme. Definitely deserves more recognition.”
|
||||
</p>
|
||||
<cite>— Arcadia</cite>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>“Great theme for long coding hours.”</p>
|
||||
<cite>— Volkan</cite>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>
|
||||
“Really surprised this theme isn't more popular. It's a joy to use
|
||||
for HTML/CSS/JS and PHP. I like that it isn't heavy on blue colors
|
||||
like a lot of the popular dark themes.”
|
||||
</p>
|
||||
<cite>— Brendan</cite>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>
|
||||
“Wonderful. Well crafted with a clear sense of experience and focus.
|
||||
It actually helps me code more by enjoying the process more.
|
||||
Excellent work Tania.”
|
||||
</p>
|
||||
<cite>— Monte</cite>
|
||||
</blockquote>
|
||||
</section>
|
||||
|
||||
<section class="credits">
|
||||
<p>
|
||||
Made by
|
||||
<a href="https://www.taniarascia.com/" rel="noopener" target="_blank"
|
||||
>Tania Rascia</a
|
||||
>
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user