Skip to content

Commit

Permalink
feat: Update Coldark colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArmandPhilippot
ArmandPhilippot committed Oct 27, 2020
1 parent d221759 commit 1bc2c46
Show file tree
Hide file tree
Showing 7 changed files with 193 additions and 148 deletions.
142 changes: 85 additions & 57 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

# Coldark

![GitHub License](https://img.shields.io/github/license/ArmandPhilippot/coldark?colorA=111B27&color=d8e0eb&logo=Github&logoColor=E3E9F2&style=for-the-badge) ![GitHub package.json version](https://img.shields.io/github/package-json/v/ArmandPhilippot/coldark?colorA=111B27&color=d8e0eb&logo=Github&logoColor=E3E9F2&style=for-the-badge)
![GitHub License](https://img.shields.io/github/license/ArmandPhilippot/coldark?colorA=213043&color=d0dae7&logo=Github&logoColor=e3eaf2&style=for-the-badge) ![GitHub package.json version](https://img.shields.io/github/package-json/v/ArmandPhilippot/coldark?colorA=213043&color=d0dae7&logo=Github&logoColor=e3eaf2&style=for-the-badge)

An optimized theme for web development that comes with two versions: light & dark.

Expand All @@ -16,12 +16,12 @@ Coldark is a gray-blue theme. The colors used respect the Web Content Accessibil

Coldark is available for:

- [Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=armandphilippot.coldark) (repo: [Coldark - VS Code](https://github.com/ArmandPhilippot/coldark-vscode/))
- [XFCE4 Terminal](https://github.com/ArmandPhilippot/coldark-xfce4-terminal)
- [Bat](https://github.com/ArmandPhilippot/coldark-bat)
- [Dir_colors](https://github.com/ArmandPhilippot/coldark-dircolors)
- [Zsh Theme](https://github.com/ArmandPhilippot/coldark-zsh-theme)
- [Prism.js](https://github.com/ArmandPhilippot/coldark-prism)
- [Bat](https://github.com/ArmandPhilippot/coldark-bat)
- [Visual Studio Code](https://github.com/ArmandPhilippot/coldark-vscode/)
- [XFCE4 Terminal](https://github.com/ArmandPhilippot/coldark-xfce4-terminal)
- [Zsh Theme](https://github.com/ArmandPhilippot/coldark-zsh-theme)

## Color pallets

Expand All @@ -31,58 +31,51 @@ Coldark consists of three color pallets. The first is common to both versions. T

## Colors in detail

| | Light Theme | | Dark Theme | |
| -------------- | ----------- | :------------------------------------------------------: | :--------: | :------------------------------------------------------: |
| **Usage code** | **Hex** | **Preview** | **Hex** | **Preview** |
| `coldark00` | `#E3E9F2` | ![#E3E9F2](https://placehold.it/20/E3E9F2/000000?text=+) | `#111B27` | ![#111B27](https://placehold.it/20/111B27/000000?text=+) |
| `coldark01` | `#d8e0eb` | ![#d8e0eb](https://placehold.it/20/d8e0eb/000000?text=+) | `#0b121b` | ![#0b121b](https://placehold.it/20/0b121b/000000?text=+) |
| `coldark02` | `#ccd6e4` | ![#ccd6e4](https://placehold.it/20/ccd6e4/000000?text=+) | `#304259` | ![#304259](https://placehold.it/20/304259/000000?text=+) |
| `coldark03` | `#304259` | ![#304259](https://placehold.it/20/304259/000000?text=+) | `#ccd6e4` | ![#ccd6e4](https://placehold.it/20/ccd6e4/000000?text=+) |
| `coldark04` | `#0b121b` | ![#0b121b](https://placehold.it/20/0b121b/000000?text=+) | `#d8e0eb` | ![#d8e0eb](https://placehold.it/20/d8e0eb/000000?text=+) |
| `coldark05` | `#111B27` | ![#111B27](https://placehold.it/20/111B27/000000?text=+) | `#E3E9F2` | ![#E3E9F2](https://placehold.it/20/E3E9F2/000000?text=+) |
| `coldark06` | `#213043` | ![#213043](https://placehold.it/20/213043/000000?text=+) | `#f0f3f8` | ![#f0f3f8](https://placehold.it/20/f0f3f8/000000?text=+) |
| `coldark07` | `#f0f3f8` | ![#f0f3f8](https://placehold.it/20/f0f3f8/000000?text=+) | `#213043` | ![#213043](https://placehold.it/20/213043/000000?text=+) |
| `coldark08` | `#007474` | ![#007474](https://placehold.it/20/007474/000000?text=+) | `#5dc2c2` | ![#5dc2c2](https://placehold.it/20/5dc2c2/000000?text=+) |
| `coldark09` | `#7d6600` | ![#7d6600](https://placehold.it/20/7d6600/000000?text=+) | `#cdb74a` | ![#cdb74a](https://placehold.it/20/cdb74a/000000?text=+) |
| `coldark10` | `#005c99` | ![#005c99](https://placehold.it/20/005c99/000000?text=+) | `#6ab3e4` | ![#6ab3e4](https://placehold.it/20/6ab3e4/000000?text=+) |
| `coldark11` | `#237800` | ![#237800](https://placehold.it/20/237800/000000?text=+) | `#82c366` | ![#82c366](https://placehold.it/20/82c366/000000?text=+) |
| `coldark12` | `#b800b8` | ![#b800b8](https://placehold.it/20/b800b8/000000?text=+) | `#ea89ea` | ![#ea89ea](https://placehold.it/20/ea89ea/000000?text=+) |
| `coldark13` | `#8600c6` | ![#8600c6](https://placehold.it/20/8600c6/000000?text=+) | `#cf7ef6` | ![#cf7ef6](https://placehold.it/20/cf7ef6/000000?text=+) |
| `coldark14` | `#aa4d00` | ![#aa4d00](https://placehold.it/20/aa4d00/000000?text=+) | `#d88b4a` | ![#d88b4a](https://placehold.it/20/d88b4a/000000?text=+) |
| `coldark15` | `#bf0100` | ![#bf0100](https://placehold.it/20/bf0100/000000?text=+) | `#f57a73` | ![#f57a73](https://placehold.it/20/f57a73/000000?text=+) |

- **`coldark00`: Default background**
Can also be used for some borders or as foreground for some elements (_e.g.: buttons_).
- **`coldark01`: Alternative background 1**
Used for text editor gutters & user interaction/form components (_e.g.: inputs, checkboxes, dropdowns_). Can also be used for some borders or as foreground for some elements (_e.g.: activityBar..._).
- **`coldark02`: Selection background**
Used to colorize the currently active text editor line as well as selection in editor. Also used as background (and hover background) for some elements (_e.g.: scrollbar slider, sidebar headers..._).
- **`coldark03`: Description**
Used for description, comment or invisible, icons.
- **`coldark04`: Alternative foreground 1**
Used for activityBar background (both versions) and as foreground for status bar when no folder is opened.
- **`coldark05`: Default foreground**
Also used with opacity for borders and shadows. Can also be used for punctuation.
- **`coldark06`: Alternative foreground 2**
Used for modals and floating popups like notifications or auto completion.
- **`coldark07`: Alternative background 2**
Used for modals and floating popups like notifications or auto completion. Also used for active tab.
- **`coldark08`: Cyan**
Used for tags, parameters and object-literal keys. Also used for Markup code.
- **`coldark09`: Yellow**
Used for hint, modified elements, numeric, constants, attributes, Markup link url.
- **`coldark10`: Blue**
Used for UI (text highlighting color, status bar, badges, drop background, focused elements, info, links and buttons). Also used for classes, variables and Markup headings.
- **`coldark11`: Green**
Used for added elements, strings and RGB value (CSS).
- **`coldark12`: Magenta**
Used for support, regular expressions, Markup list, CSS property value.
- **`coldark13`: Purple**
Used for functions, untracked elements and CSS classes & IDs.
- **`coldark14`: Orange**
Used for warnings, preformatted text, keywords and storage. Also used for debugging status bar.
- **`coldark15`: Red**
Used for errors, deleted elements, invalid or deprecated elements and opening/closing embedded language tags (_e.g.: `<?php ?>`_).
I tried to keep the same descriptions for both versions. However, for complex themes like VS Code, it doesn't work. So I separated the descriptions into 3 sections:

- Light Theme (Cold): User interface
- Dark Theme (Dark): User interface
- Syntax Highlighting and some UI elements common to both versions

### Light Theme - UI

| Hex Code | Preview | Description | Denomination |
| :-: | :-: | --- | :-: |
| `#e3eaf2` | ![#e3eaf2][#e3eaf2] | **Default background** – Also used as foreground for Button & Badges. | `coldark00` |
| `#d0dae7` | ![#d0dae7][#d0dae7] | **Selection background** - Editor Gutter, Inputs, Line Highlight, Status bar (no folder). Also used as foreground for Activity bar. | `coldark01` |
| `#8da1b9` | ![#8da1b9][#8da1b9] | **Darker background** - Code block, Secondary buttons, Some highlighting. Also used for Borders. | `coldark02` |
| `#3c526d` | ![#3c526d][#3c526d] | **Comments** - Invisible, Ignored, Placeholder. | `coldark03` |
| `#213043` | ![#213043][#213043] | **Lighter foreground** – Inputs, Status bar (no folder), Embedded modals & Widgets. | `coldark04` |
| `#111b27` | ![#111b27][#111b27] | **Default foreground** - Also used as Shadow and for most of Punctuation. | `coldark05` |
| `#0b121b` | ![#0b121b][#0b121b] | **Darker foreground** – Also used as background for Activity bar. | `coldark06` |
| `#f0f4f8` | ![#f0f4f8][#f0f4f8] | **Lighter background** – Tab active, Embedded modals, Widgets. | `coldark07` |

### Dark Theme - UI

| Hex Code | Preview | Description | Denomination |
| :-: | :-: | --- | :-: |
| `#111b27` | ![#111b27][#111b27] | **Default background** – Also used as foreground for Button & Badges. | `coldark00` |
| `#213043` | ![#213043][#213043] | **Selection background** - Editor Gutter, Embedded modals, Widgets, Line Highlight, Tab active. | `coldark01` |
| `#3c526d` | ![#3c526d][#3c526d] | **Light background** - Code block, Secondary buttons, Some highlighting. | `coldark02` |
| `#8da1b9` | ![#8da1b9][#8da1b9] | **Comments** - Invisible, Ignored, Placeholder. | `coldark03` |
| `#d0dae7` | ![#d0dae7][#d0dae7] | **Dark foreground** – Activity bar, Inputs, Status bar (no folder), Embedded modals & Widgets. | `coldark04` |
| `#e3eaf2` | ![#e3eaf2][#e3eaf2] | **Default foreground** - Also used for most of Punctuation. | `coldark05` |
| `#f0f4f8` | ![#f0f4f8][#f0f4f8] | **Lighter foreground** – Menu, Tab hover. | `coldark06` |
| `#0b121b` | ![#0b121b][#0b121b] | **Dark background** - Activity bar, Inputs, Status bar (no folder). Also used for Borders. | `coldark07` |

### Syntax Highlighting & Some UI

| Light Theme | | Dark Theme | | Description | | | |
| --- | :-: | --- | :-: | --- | --- | --- | :-: |
| **Hex Code** | **Preview** | **Hex Code** | **Preview** | **Terminal** | **UI** | **Syntax** | **Denomination** |
| `#006d6d` | ![#006d6d][#006d6d] | `#66cccc` | ![#66cccc][#66cccc] | Cyan | Merge incoming content | Parameters, Tags, Support constant, CSS Variables, Markup inline raw, Punctuation Section Embedded (e.g. `<?php ?>`) | `coldark08` |
| `#755f00` | ![#755f00][#755f00] | `#e6d37a` | ![#e6d37a][#e6d37a] | Yellow | Modified, Hints | Integers, Boolean, Constants Language, Attribute Names, Shell Case Patterns, Markup Link URL | `coldark09` |
| `#005a8e` | ![#005a8e][#005a8e] | `#6cb8e6` | ![#6cb8e6][#6cb8e6] | Blue | Badges, Buttons, Find Match, Info, Merge current content, Selection (outside editor), Status bar (folder open) | Namespaces, Classes, Variables, Constants Other, Markup Headings, Property names | `coldark10` |
| `#116b00` | ![#116b00][#116b00] | `#91d076` | ![#91d076][#91d076] | Green | Added | Strings, CSS Colors, CSS Font names, Markup Link Text | `coldark11` |
| `#af00af` | ![#af00af][#af00af] | `#f4adf4` | ![#f4adf4][#f4adf4] | Magenta | Untracked, Token Expression value | Support, Regular Expressions, Escape Characters, Constant Characters, Storage Modifiers, Instances, Markup List Punctuation, CSS values | `coldark12` |
| `#7c00aa` | ![#7c00aa][#7c00aa] | `#c699e3` | ![#c699e3][#c699e3] | (Purple) | Unverified | Functions, CSS Classes & IDs | `coldark13` |
| `#a04900` | ![#a04900][#a04900] | `#e9ae7e` | ![#e9ae7e][#e9ae7e] | (Orange) | Warnings, Status bar (debugging) | Keywords, Storage, CSS Pseudo elements | `coldark14` |
| `#c70100` | ![#c70100][#c70100] | `#f57a73` | ![#f57a73][#f57a73] | Red | Errors, Deleted | Invalids, Deprecated | `coldark15` |

## Acknowledgements

Expand All @@ -91,3 +84,38 @@ Coldark is inspired by [base16](https://github.com/chriskempson/base16) and [Nor
## License

This project is open source and available under the [MIT License](https://github.com/ArmandPhilippot/coldark/blob/master/LICENSE).

<!-- REFERENCES -->

<!-- UI Colors -->

[#f0f4f8]: https://placehold.it/20/f0f4f8/000000?text=+
[#e3eaf2]: https://placehold.it/20/e3eaf2/000000?text=+
[#d0dae7]: https://placehold.it/20/d0dae7/000000?text=+
[#8da1b9]: https://placehold.it/20/8da1b9/000000?text=+
[#3c526d]: https://placehold.it/20/3c526d/000000?text=+
[#213043]: https://placehold.it/20/213043/000000?text=+
[#111b27]: https://placehold.it/20/111b27/000000?text=+
[#0b121b]: https://placehold.it/20/0b121b/000000?text=+

<!-- Syntax - Light Theme Colors -->

[#c70100]: https://placehold.it/20/c70100/000000?text=+
[#116b00]: https://placehold.it/20/116b00/000000?text=+
[#755f00]: https://placehold.it/20/755f00/000000?text=+
[#005a8e]: https://placehold.it/20/005a8e/000000?text=+
[#af00af]: https://placehold.it/20/af00af/000000?text=+
[#006d6d]: https://placehold.it/20/006d6d/000000?text=+
[#7c00aa]: https://placehold.it/20/7c00aa/000000?text=+
[#a04900]: https://placehold.it/20/a04900/000000?text=+

<!-- Syntax - Dark Theme Colors -->

[#f57a73]: https://placehold.it/20/f57a73/000000?text=+
[#91d076]: https://placehold.it/20/91d076/000000?text=+
[#e6d37a]: https://placehold.it/20/e6d37a/000000?text=+
[#6cb8e6]: https://placehold.it/20/6cb8e6/000000?text=+
[#f4adf4]: https://placehold.it/20/f4adf4/000000?text=+
[#66cccc]: https://placehold.it/20/66cccc/000000?text=+
[#c699e3]: https://placehold.it/20/c699e3/000000?text=+
[#e9ae7e]: https://placehold.it/20/e9ae7e/000000?text=+
Binary file modified assets/coldark-banner.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 1bc2c46

Please sign in to comment.