feat(themes): add popular themes, remove redundant default
- Delete default.css (redundant with dracula.css) - Add snazzy, catppuccin_mocha, tokyonight, rose_pine, onedark themes - Update docs/static/style.css to import dracula.css - Update themes/README.md and syntax-highlighting.md Theme collection now contains 10 well-designed options.
This commit is contained in:
Timothy DeHerrera
@@ -192,12 +192,16 @@ sukr uses [lightningcss](https://lightningcss.dev/) which inlines `@import` rule
|
||||
|
||||
sukr includes several themes in the `themes/` directory:
|
||||
|
||||
- **default.css** — Dracula-inspired dark theme (batteries included)
|
||||
- **dracula.css** — Classic Dracula colors
|
||||
- **gruvbox.css** — Warm retro palette
|
||||
- **nord.css** — Cool arctic colors
|
||||
- **github_dark.css** — GitHub's dark mode
|
||||
- **github_light.css** — GitHub's light mode
|
||||
- **snazzy.css** — Vibrant modern colors
|
||||
- **catppuccin_mocha.css** — Warm pastel dark theme
|
||||
- **tokyonight.css** — Japanese-inspired dark theme
|
||||
- **rose_pine.css** — Elegant soho-inspired theme
|
||||
- **onedark.css** — Classic Atom editor theme
|
||||
|
||||
Copy the theme files to your project and import as shown above.
|
||||
|
||||
|
||||
2
docs/static/style.css
vendored
2
docs/static/style.css
vendored
@@ -1,5 +1,5 @@
|
||||
/* sukr docs — clean documentation theme */
|
||||
@import "../../themes/default.css";
|
||||
@import "../../themes/dracula.css";
|
||||
/* Syntax highlighting theme - lightningcss inlines this at build time */
|
||||
|
||||
:root {
|
||||
|
||||
@@ -4,14 +4,18 @@ This directory contains CSS themes for sukr's syntax highlighting system.
|
||||
|
||||
## Available Themes
|
||||
|
||||
| Theme | Description |
|
||||
| ------------------ | --------------------------- |
|
||||
| `default.css` | Dracula-inspired dark theme |
|
||||
| `dracula.css` | Classic Dracula colors |
|
||||
| `gruvbox.css` | Warm retro palette |
|
||||
| `nord.css` | Cool arctic colors |
|
||||
| `github_dark.css` | GitHub's dark mode |
|
||||
| `github_light.css` | GitHub's light mode |
|
||||
| Theme | Description |
|
||||
| ---------------------- | ---------------------------- |
|
||||
| `dracula.css` | Classic Dracula colors |
|
||||
| `gruvbox.css` | Warm retro palette |
|
||||
| `nord.css` | Cool arctic colors |
|
||||
| `github_dark.css` | GitHub's dark mode |
|
||||
| `github_light.css` | GitHub's light mode |
|
||||
| `snazzy.css` | Vibrant modern colors |
|
||||
| `catppuccin_mocha.css` | Warm pastel dark theme |
|
||||
| `tokyonight.css` | Japanese-inspired dark theme |
|
||||
| `rose_pine.css` | Elegant soho-inspired theme |
|
||||
| `onedark.css` | Classic Atom editor theme |
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -19,7 +23,7 @@ This directory contains CSS themes for sukr's syntax highlighting system.
|
||||
2. **Import it** in your main CSS file:
|
||||
|
||||
```css
|
||||
@import "themes/default.css";
|
||||
@import "themes/dracula.css";
|
||||
```
|
||||
|
||||
sukr uses [lightningcss](https://lightningcss.dev/) which bundles `@import` rules at build time—your final CSS will be a single minified file.
|
||||
@@ -29,7 +33,7 @@ sukr uses [lightningcss](https://lightningcss.dev/) which bundles `@import` rule
|
||||
Themes use CSS custom properties for easy customization. Override any variable in your own CSS:
|
||||
|
||||
```css
|
||||
@import "themes/default.css";
|
||||
@import "themes/dracula.css";
|
||||
|
||||
/* Override just the keyword color */
|
||||
:root {
|
||||
@@ -83,7 +87,7 @@ If a specific class isn't styled, highlighting falls back up the hierarchy.
|
||||
|
||||
## Creating Custom Themes
|
||||
|
||||
Start with `default.css` and modify the `:root` variables to create your own color scheme. The class rules reference these variables, so changing values updates the entire theme.
|
||||
Start with any theme (e.g., `dracula.css`) and modify the `:root` variables to create your own color scheme. The class rules reference these variables, so changing values updates the entire theme.
|
||||
|
||||
## Note
|
||||
|
||||
|
||||
357
themes/catppuccin_mocha.css
Normal file
357
themes/catppuccin_mocha.css
Normal file
@@ -0,0 +1,357 @@
|
||||
/**
|
||||
* Catppuccin Mocha Theme for sukr
|
||||
* A warm, pastel dark theme
|
||||
* Ported from Helix editor theme
|
||||
* Upstream: https://github.com/catppuccin/helix
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Catppuccin Mocha Palette */
|
||||
--hl-rosewater: #f5e0dc;
|
||||
--hl-flamingo: #f2cdcd;
|
||||
--hl-pink: #f5c2e7;
|
||||
--hl-mauve: #cba6f7;
|
||||
--hl-red: #f38ba8;
|
||||
--hl-maroon: #eba0ac;
|
||||
--hl-peach: #fab387;
|
||||
--hl-yellow: #f9e2af;
|
||||
--hl-green: #a6e3a1;
|
||||
--hl-teal: #94e2d5;
|
||||
--hl-sky: #89dceb;
|
||||
--hl-sapphire: #74c7ec;
|
||||
--hl-blue: #89b4fa;
|
||||
--hl-lavender: #b4befe;
|
||||
--hl-text: #cdd6f4;
|
||||
--hl-subtext1: #bac2de;
|
||||
--hl-subtext0: #a6adc8;
|
||||
--hl-overlay2: #9399b2;
|
||||
--hl-overlay1: #7f849c;
|
||||
--hl-overlay0: #6c7086;
|
||||
--hl-surface2: #585b70;
|
||||
--hl-surface1: #45475a;
|
||||
--hl-surface0: #313244;
|
||||
--hl-base: #1e1e2e;
|
||||
--hl-mantle: #181825;
|
||||
--hl-crust: #11111b;
|
||||
}
|
||||
|
||||
/* === Keywords === */
|
||||
.hl-keyword {
|
||||
color: var(--hl-mauve);
|
||||
}
|
||||
|
||||
.hl-keyword-control {
|
||||
color: var(--hl-mauve);
|
||||
}
|
||||
|
||||
.hl-keyword-control-conditional {
|
||||
color: var(--hl-mauve);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-keyword-control-repeat {
|
||||
color: var(--hl-mauve);
|
||||
}
|
||||
|
||||
.hl-keyword-control-import {
|
||||
color: var(--hl-mauve);
|
||||
}
|
||||
|
||||
.hl-keyword-control-return {
|
||||
color: var(--hl-mauve);
|
||||
}
|
||||
|
||||
.hl-keyword-control-exception {
|
||||
color: var(--hl-mauve);
|
||||
}
|
||||
|
||||
.hl-keyword-function {
|
||||
color: var(--hl-mauve);
|
||||
}
|
||||
|
||||
.hl-keyword-operator {
|
||||
color: var(--hl-sky);
|
||||
}
|
||||
|
||||
.hl-keyword-storage {
|
||||
color: var(--hl-mauve);
|
||||
}
|
||||
|
||||
.hl-keyword-storage-type {
|
||||
color: var(--hl-mauve);
|
||||
}
|
||||
|
||||
.hl-keyword-storage-modifier {
|
||||
color: var(--hl-mauve);
|
||||
}
|
||||
|
||||
/* === Functions === */
|
||||
.hl-function {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-function-builtin {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-function-method {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-function-macro {
|
||||
color: var(--hl-mauve);
|
||||
}
|
||||
|
||||
.hl-function-special {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
/* === Types === */
|
||||
.hl-type {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.hl-type-builtin {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.hl-type-enum-variant {
|
||||
color: var(--hl-teal);
|
||||
}
|
||||
|
||||
/* === Constants === */
|
||||
.hl-constant {
|
||||
color: var(--hl-peach);
|
||||
}
|
||||
|
||||
.hl-constant-builtin {
|
||||
color: var(--hl-peach);
|
||||
}
|
||||
|
||||
.hl-constant-builtin-boolean {
|
||||
color: var(--hl-peach);
|
||||
}
|
||||
|
||||
.hl-constant-character {
|
||||
color: var(--hl-teal);
|
||||
}
|
||||
|
||||
.hl-constant-character-escape {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
.hl-constant-numeric {
|
||||
color: var(--hl-peach);
|
||||
}
|
||||
|
||||
.hl-constant-numeric-integer {
|
||||
color: var(--hl-peach);
|
||||
}
|
||||
|
||||
.hl-constant-numeric-float {
|
||||
color: var(--hl-peach);
|
||||
}
|
||||
|
||||
/* === Strings === */
|
||||
.hl-string {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.hl-string-regexp {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
.hl-string-special {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-string-special-path {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-string-special-url {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-string-special-symbol {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
/* === Variables === */
|
||||
.hl-variable {
|
||||
color: var(--hl-text);
|
||||
}
|
||||
|
||||
.hl-variable-builtin {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-variable-parameter {
|
||||
color: var(--hl-maroon);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-variable-other {
|
||||
color: var(--hl-text);
|
||||
}
|
||||
|
||||
.hl-variable-other-member {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
/* === Comments === */
|
||||
.hl-comment {
|
||||
color: var(--hl-overlay2);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-line {
|
||||
color: var(--hl-overlay2);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-block {
|
||||
color: var(--hl-overlay2);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-block-documentation {
|
||||
color: var(--hl-overlay2);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-line-documentation {
|
||||
color: var(--hl-overlay2);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* === Punctuation === */
|
||||
.hl-punctuation {
|
||||
color: var(--hl-overlay2);
|
||||
}
|
||||
|
||||
.hl-punctuation-bracket {
|
||||
color: var(--hl-overlay2);
|
||||
}
|
||||
|
||||
.hl-punctuation-delimiter {
|
||||
color: var(--hl-overlay2);
|
||||
}
|
||||
|
||||
.hl-punctuation-special {
|
||||
color: var(--hl-sky);
|
||||
}
|
||||
|
||||
/* === Operators === */
|
||||
.hl-operator {
|
||||
color: var(--hl-sky);
|
||||
}
|
||||
|
||||
/* === Other === */
|
||||
.hl-attribute {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.hl-label {
|
||||
color: var(--hl-sapphire);
|
||||
}
|
||||
|
||||
.hl-namespace {
|
||||
color: var(--hl-yellow);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-constructor {
|
||||
color: var(--hl-sapphire);
|
||||
}
|
||||
|
||||
.hl-special {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-tag {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
/* === Markup === */
|
||||
.hl-markup-heading {
|
||||
color: var(--hl-red);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-heading-1 {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-markup-heading-2 {
|
||||
color: var(--hl-peach);
|
||||
}
|
||||
|
||||
.hl-markup-heading-3 {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.hl-markup-heading-4 {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.hl-markup-heading-5 {
|
||||
color: var(--hl-sapphire);
|
||||
}
|
||||
|
||||
.hl-markup-heading-6 {
|
||||
color: var(--hl-lavender);
|
||||
}
|
||||
|
||||
.hl-markup-bold {
|
||||
color: var(--hl-red);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-italic {
|
||||
color: var(--hl-red);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-markup-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.hl-markup-link-text {
|
||||
color: var(--hl-lavender);
|
||||
}
|
||||
|
||||
.hl-markup-link-url {
|
||||
color: var(--hl-blue);
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hl-markup-link-label {
|
||||
color: var(--hl-sapphire);
|
||||
}
|
||||
|
||||
.hl-markup-list {
|
||||
color: var(--hl-teal);
|
||||
}
|
||||
|
||||
.hl-markup-quote {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
.hl-markup-raw {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
/* === Diff === */
|
||||
.hl-diff-plus {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.hl-diff-minus {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-diff-delta {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
@@ -1,282 +1,319 @@
|
||||
/* Sukr Default Theme (Dracula-inspired)
|
||||
* Syntax highlighting for code blocks
|
||||
*
|
||||
* Use with: @import 'themes/default.css';
|
||||
* Or copy to your site's static/style.css
|
||||
/**
|
||||
* One Dark Theme for sukr
|
||||
* The classic Atom editor dark theme
|
||||
* Author: Gokul Soumya <gokulps15@gmail.com>
|
||||
* Ported from Helix editor theme
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Dracula Palette */
|
||||
--hl-bg: #282a36;
|
||||
--hl-fg: #f8f8f2;
|
||||
--hl-comment: #6272a4;
|
||||
--hl-cyan: #8be9fd;
|
||||
--hl-green: #50fa7b;
|
||||
--hl-orange: #ffb86c;
|
||||
--hl-pink: #ff79c6;
|
||||
--hl-purple: #bd93f9;
|
||||
--hl-red: #ff5555;
|
||||
--hl-yellow: #f1fa8c;
|
||||
/* One Dark Palette */
|
||||
--hl-yellow: #e5c07b;
|
||||
--hl-blue: #61afef;
|
||||
--hl-red: #e06c75;
|
||||
--hl-purple: #c678dd;
|
||||
--hl-green: #98c379;
|
||||
--hl-gold: #d19a66;
|
||||
--hl-cyan: #56b6c2;
|
||||
--hl-white: #abb2bf;
|
||||
--hl-black: #282c34;
|
||||
--hl-light-black: #2c323c;
|
||||
--hl-gray: #3e4452;
|
||||
--hl-faint-gray: #3b4048;
|
||||
--hl-light-gray: #5c6370;
|
||||
}
|
||||
|
||||
/* Keywords */
|
||||
/* === Keywords === */
|
||||
.hl-keyword {
|
||||
color: var(--hl-pink);
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-keyword-control {
|
||||
color: var(--hl-pink);
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
.hl-keyword-control-conditional {
|
||||
color: var(--hl-pink);
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
.hl-keyword-control-repeat {
|
||||
color: var(--hl-pink);
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
.hl-keyword-control-import {
|
||||
color: var(--hl-pink);
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-keyword-control-return {
|
||||
color: var(--hl-pink);
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
.hl-keyword-control-exception {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
.hl-keyword-operator {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
.hl-keyword-directive {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.hl-keyword-function {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
.hl-keyword-return {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
.hl-keyword-storage {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
.hl-keyword-storage-type {
|
||||
color: var(--hl-cyan);
|
||||
font-style: italic;
|
||||
}
|
||||
.hl-keyword-storage-modifier {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
.hl-keyword-storage-modifier-mut {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
.hl-keyword-storage-modifier-ref {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
.hl-keyword-special {
|
||||
color: var(--hl-pink);
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
/* Functions */
|
||||
.hl-keyword-operator {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
.hl-keyword-directive {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
.hl-keyword-storage {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
.hl-keyword-storage-type {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
.hl-keyword-storage-modifier {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
/* === Functions === */
|
||||
.hl-function {
|
||||
color: var(--hl-green);
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-function-builtin {
|
||||
color: var(--hl-green);
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
.hl-function-call {
|
||||
color: var(--hl-green);
|
||||
|
||||
.hl-function-method {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-function-macro {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
.hl-function-method {
|
||||
|
||||
.hl-function-special {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
/* === Types === */
|
||||
.hl-type {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.hl-type-builtin {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.hl-type-enum-variant {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
/* === Constants === */
|
||||
.hl-constant {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-constant-builtin {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-constant-builtin-boolean {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-constant-character {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-constant-character-escape {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-constant-numeric {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-constant-numeric-integer {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-constant-numeric-float {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
/* === Strings === */
|
||||
.hl-string {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
/* Types */
|
||||
.hl-type {
|
||||
color: var(--hl-cyan);
|
||||
font-style: italic;
|
||||
}
|
||||
.hl-type-builtin {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
.hl-type-parameter {
|
||||
color: var(--hl-cyan);
|
||||
font-style: italic;
|
||||
}
|
||||
.hl-type-enum-variant {
|
||||
color: var(--hl-fg);
|
||||
font-style: italic;
|
||||
}
|
||||
.hl-type-enum-variant-builtin {
|
||||
color: var(--hl-fg);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Constants */
|
||||
.hl-constant {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
.hl-constant-builtin {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
.hl-constant-builtin-boolean {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
.hl-constant-character {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
.hl-constant-character-escape {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
.hl-constant-macro {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
.hl-constant-numeric {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
.hl-constant-numeric-integer {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
.hl-constant-numeric-float {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
/* Strings */
|
||||
.hl-string {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
.hl-string-regexp {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.hl-string-special {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.hl-string-special-path {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.hl-string-special-url {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-string-special-symbol {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
/* === Variables === */
|
||||
.hl-variable {
|
||||
color: var(--hl-white);
|
||||
}
|
||||
|
||||
.hl-variable-builtin {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-variable-parameter {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
.hl-string-special {
|
||||
color: var(--hl-orange);
|
||||
|
||||
.hl-variable-other {
|
||||
color: var(--hl-white);
|
||||
}
|
||||
.hl-string-special-path {
|
||||
color: var(--hl-orange);
|
||||
|
||||
.hl-variable-other-member {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
.hl-string-special-symbol {
|
||||
|
||||
/* === Comments === */
|
||||
.hl-comment {
|
||||
color: var(--hl-light-gray);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-line {
|
||||
color: var(--hl-light-gray);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-block {
|
||||
color: var(--hl-light-gray);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-block-documentation {
|
||||
color: var(--hl-light-gray);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-line-documentation {
|
||||
color: var(--hl-light-gray);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* === Punctuation === */
|
||||
.hl-punctuation {
|
||||
color: var(--hl-white);
|
||||
}
|
||||
|
||||
.hl-punctuation-bracket {
|
||||
color: var(--hl-white);
|
||||
}
|
||||
|
||||
.hl-punctuation-delimiter {
|
||||
color: var(--hl-white);
|
||||
}
|
||||
|
||||
.hl-punctuation-special {
|
||||
color: var(--hl-white);
|
||||
}
|
||||
|
||||
/* === Operators === */
|
||||
.hl-operator {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
/* === Other === */
|
||||
.hl-attribute {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
/* Variables */
|
||||
.hl-variable {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
.hl-variable-builtin {
|
||||
color: var(--hl-purple);
|
||||
font-style: italic;
|
||||
}
|
||||
.hl-variable-parameter {
|
||||
color: var(--hl-orange);
|
||||
font-style: italic;
|
||||
}
|
||||
.hl-variable-other {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
.hl-variable-other-member {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
|
||||
/* Comments */
|
||||
.hl-comment {
|
||||
color: var(--hl-comment);
|
||||
}
|
||||
.hl-comment-line {
|
||||
color: var(--hl-comment);
|
||||
}
|
||||
.hl-comment-block {
|
||||
color: var(--hl-comment);
|
||||
}
|
||||
.hl-comment-block-documentation {
|
||||
color: var(--hl-comment);
|
||||
}
|
||||
.hl-comment-line-documentation {
|
||||
color: var(--hl-comment);
|
||||
}
|
||||
.hl-comment-unused {
|
||||
color: var(--hl-comment);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* Punctuation */
|
||||
.hl-punctuation {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
.hl-punctuation-bracket {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
.hl-punctuation-delimiter {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
.hl-punctuation-special {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
/* Operators */
|
||||
.hl-operator {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
|
||||
/* Other */
|
||||
.hl-attribute {
|
||||
color: var(--hl-green);
|
||||
font-style: italic;
|
||||
}
|
||||
.hl-label {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
.hl-namespace {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
.hl-constructor {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
.hl-special {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
.hl-tag {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
.hl-tag-attribute {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
.hl-tag-delimiter {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
|
||||
/* Markup (Markdown) */
|
||||
.hl-namespace {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-constructor {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-special {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-tag {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
/* === Markup === */
|
||||
.hl-markup-heading {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-markup-bold {
|
||||
color: var(--hl-orange);
|
||||
color: var(--hl-gold);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-italic {
|
||||
color: var(--hl-yellow);
|
||||
color: var(--hl-purple);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-markup-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.hl-markup-heading {
|
||||
color: var(--hl-purple);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-link-text {
|
||||
color: var(--hl-pink);
|
||||
}
|
||||
.hl-markup-link-url {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
.hl-markup-list {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
.hl-markup-quote {
|
||||
color: var(--hl-yellow);
|
||||
font-style: italic;
|
||||
}
|
||||
.hl-markup-raw {
|
||||
color: var(--hl-fg);
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
/* Unknown scope fallback */
|
||||
.hl-unknown {
|
||||
color: var(--hl-fg);
|
||||
.hl-markup-link-url {
|
||||
color: var(--hl-cyan);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hl-markup-link-label {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
.hl-markup-list {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-markup-quote {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.hl-markup-raw {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
/* === Diff === */
|
||||
.hl-diff-plus {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.hl-diff-minus {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-diff-delta {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
351
themes/rose_pine.css
Normal file
351
themes/rose_pine.css
Normal file
@@ -0,0 +1,351 @@
|
||||
/**
|
||||
* Rosé Pine Theme for sukr
|
||||
* An elegant, soho-inspired dark theme
|
||||
* Author: Rosé Pine <hi@rosepinetheme.com>
|
||||
* Ported from Helix editor theme
|
||||
* Upstream: https://github.com/rose-pine/helix
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Rosé Pine Palette */
|
||||
--hl-base: #191724;
|
||||
--hl-surface: #1f1d2e;
|
||||
--hl-overlay: #26233a;
|
||||
--hl-muted: #6e6a86;
|
||||
--hl-subtle: #908caa;
|
||||
--hl-text: #e0def4;
|
||||
--hl-love: #eb6f92;
|
||||
--hl-gold: #f6c177;
|
||||
--hl-rose: #ebbcba;
|
||||
--hl-pine: #31748f;
|
||||
--hl-foam: #9ccfd8;
|
||||
--hl-iris: #c4a7e7;
|
||||
--hl-highlight-low: #21202e;
|
||||
--hl-highlight-med: #403d52;
|
||||
--hl-highlight-high: #524f67;
|
||||
}
|
||||
|
||||
/* === Keywords === */
|
||||
.hl-keyword {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
.hl-keyword-control {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
.hl-keyword-control-conditional {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
.hl-keyword-control-repeat {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
.hl-keyword-control-import {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
.hl-keyword-control-return {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
.hl-keyword-control-exception {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
.hl-keyword-function {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
.hl-keyword-operator {
|
||||
color: var(--hl-subtle);
|
||||
}
|
||||
|
||||
.hl-keyword-storage {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
.hl-keyword-storage-type {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
.hl-keyword-storage-modifier {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
/* === Functions === */
|
||||
.hl-function {
|
||||
color: var(--hl-rose);
|
||||
}
|
||||
|
||||
.hl-function-builtin {
|
||||
color: var(--hl-love);
|
||||
}
|
||||
|
||||
.hl-function-method {
|
||||
color: var(--hl-rose);
|
||||
}
|
||||
|
||||
.hl-function-macro {
|
||||
color: var(--hl-rose);
|
||||
}
|
||||
|
||||
.hl-function-special {
|
||||
color: var(--hl-rose);
|
||||
}
|
||||
|
||||
/* === Types === */
|
||||
.hl-type {
|
||||
color: var(--hl-foam);
|
||||
}
|
||||
|
||||
.hl-type-builtin {
|
||||
color: var(--hl-foam);
|
||||
}
|
||||
|
||||
.hl-type-enum-variant {
|
||||
color: var(--hl-foam);
|
||||
}
|
||||
|
||||
/* === Constants === */
|
||||
.hl-constant {
|
||||
color: var(--hl-foam);
|
||||
}
|
||||
|
||||
.hl-constant-builtin {
|
||||
color: var(--hl-love);
|
||||
}
|
||||
|
||||
.hl-constant-builtin-boolean {
|
||||
color: var(--hl-rose);
|
||||
}
|
||||
|
||||
.hl-constant-character {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-constant-character-escape {
|
||||
color: var(--hl-pine);
|
||||
}
|
||||
|
||||
.hl-constant-numeric {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-constant-numeric-integer {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-constant-numeric-float {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
/* === Strings === */
|
||||
.hl-string {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-string-regexp {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-string-special {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-string-special-path {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-string-special-url {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
.hl-string-special-symbol {
|
||||
color: var(--hl-gold);
|
||||
}
|
||||
|
||||
/* === Variables === */
|
||||
.hl-variable {
|
||||
color: var(--hl-text);
|
||||
}
|
||||
|
||||
.hl-variable-builtin {
|
||||
color: var(--hl-love);
|
||||
}
|
||||
|
||||
.hl-variable-parameter {
|
||||
color: var(--hl-iris);
|
||||
}
|
||||
|
||||
.hl-variable-other {
|
||||
color: var(--hl-text);
|
||||
}
|
||||
|
||||
.hl-variable-other-member {
|
||||
color: var(--hl-foam);
|
||||
}
|
||||
|
||||
/* === Comments === */
|
||||
.hl-comment {
|
||||
color: var(--hl-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-line {
|
||||
color: var(--hl-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-block {
|
||||
color: var(--hl-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-block-documentation {
|
||||
color: var(--hl-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-line-documentation {
|
||||
color: var(--hl-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* === Punctuation === */
|
||||
.hl-punctuation {
|
||||
color: var(--hl-subtle);
|
||||
}
|
||||
|
||||
.hl-punctuation-bracket {
|
||||
color: var(--hl-subtle);
|
||||
}
|
||||
|
||||
.hl-punctuation-delimiter {
|
||||
color: var(--hl-subtle);
|
||||
}
|
||||
|
||||
.hl-punctuation-special {
|
||||
color: var(--hl-subtle);
|
||||
}
|
||||
|
||||
/* === Operators === */
|
||||
.hl-operator {
|
||||
color: var(--hl-subtle);
|
||||
}
|
||||
|
||||
/* === Other === */
|
||||
.hl-attribute {
|
||||
color: var(--hl-iris);
|
||||
}
|
||||
|
||||
.hl-label {
|
||||
color: var(--hl-foam);
|
||||
}
|
||||
|
||||
.hl-namespace {
|
||||
color: var(--hl-text);
|
||||
}
|
||||
|
||||
.hl-constructor {
|
||||
color: var(--hl-foam);
|
||||
}
|
||||
|
||||
.hl-special {
|
||||
color: var(--hl-rose);
|
||||
}
|
||||
|
||||
.hl-tag {
|
||||
color: var(--hl-foam);
|
||||
}
|
||||
|
||||
/* === Markup === */
|
||||
.hl-markup-heading {
|
||||
color: var(--hl-iris);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-heading-1 {
|
||||
color: var(--hl-iris);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-heading-2 {
|
||||
color: var(--hl-foam);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-heading-3 {
|
||||
color: var(--hl-rose);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-heading-4 {
|
||||
color: var(--hl-gold);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-heading-5 {
|
||||
color: var(--hl-pine);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-heading-6 {
|
||||
color: var(--hl-foam);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-markup-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.hl-markup-link {
|
||||
color: var(--hl-iris);
|
||||
}
|
||||
|
||||
.hl-markup-link-text {
|
||||
color: var(--hl-text);
|
||||
}
|
||||
|
||||
.hl-markup-link-url {
|
||||
color: var(--hl-iris);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hl-markup-link-label {
|
||||
color: var(--hl-subtle);
|
||||
}
|
||||
|
||||
.hl-markup-list {
|
||||
color: var(--hl-muted);
|
||||
}
|
||||
|
||||
.hl-markup-quote {
|
||||
color: var(--hl-subtle);
|
||||
}
|
||||
|
||||
.hl-markup-raw {
|
||||
color: var(--hl-subtle);
|
||||
}
|
||||
|
||||
/* === Diff === */
|
||||
.hl-diff-plus {
|
||||
color: var(--hl-foam);
|
||||
}
|
||||
|
||||
.hl-diff-minus {
|
||||
color: var(--hl-love);
|
||||
}
|
||||
|
||||
.hl-diff-delta {
|
||||
color: var(--hl-highlight-high);
|
||||
}
|
||||
332
themes/snazzy.css
Normal file
332
themes/snazzy.css
Normal file
@@ -0,0 +1,332 @@
|
||||
/**
|
||||
* Snazzy Theme for sukr
|
||||
* Author: Timothy DeHerrera <tim@nrdxp.dev>
|
||||
* Ported from Helix editor theme
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Snazzy Palette */
|
||||
--hl-bg: #282a36;
|
||||
--hl-bg-dark: #21222c;
|
||||
--hl-fg: #eff0eb;
|
||||
--hl-comment: #a39e9b;
|
||||
|
||||
/* Main colors */
|
||||
--hl-blue: #57c7ff;
|
||||
--hl-cyan: #9aedfe;
|
||||
--hl-green: #5af78e;
|
||||
--hl-magenta: #ff6ac1;
|
||||
--hl-purple: #bd93f9;
|
||||
--hl-red: #ff5c57;
|
||||
--hl-yellow: #f3f99d;
|
||||
|
||||
/* Aux colors */
|
||||
--hl-carnation: #f99fc6;
|
||||
--hl-coral: #f97c7c;
|
||||
--hl-lilac: #c9c5fb;
|
||||
--hl-olive: #b6d37c;
|
||||
--hl-opal: #b1d7c7;
|
||||
--hl-sand: #ffab6f;
|
||||
}
|
||||
|
||||
/* === Keywords === */
|
||||
.hl-keyword {
|
||||
color: var(--hl-magenta);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-keyword-control {
|
||||
color: var(--hl-carnation);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-keyword-control-exception {
|
||||
color: var(--hl-red);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-keyword-control-conditional {
|
||||
color: var(--hl-carnation);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-keyword-control-repeat {
|
||||
color: var(--hl-carnation);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-keyword-control-import {
|
||||
color: var(--hl-carnation);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-keyword-control-return {
|
||||
color: var(--hl-carnation);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-keyword-function {
|
||||
color: var(--hl-lilac);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-keyword-operator {
|
||||
color: var(--hl-coral);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-keyword-storage {
|
||||
color: var(--hl-coral);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-keyword-storage-type {
|
||||
color: var(--hl-coral);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-keyword-storage-modifier {
|
||||
color: var(--hl-coral);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* === Functions === */
|
||||
.hl-function {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.hl-function-builtin {
|
||||
color: var(--hl-sand);
|
||||
}
|
||||
|
||||
.hl-function-method {
|
||||
color: var(--hl-opal);
|
||||
}
|
||||
|
||||
.hl-function-macro {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-function-special {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
/* === Types === */
|
||||
.hl-type {
|
||||
color: var(--hl-opal);
|
||||
}
|
||||
|
||||
.hl-type-builtin {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.hl-type-enum-variant {
|
||||
color: var(--hl-sand);
|
||||
}
|
||||
|
||||
/* === Constants === */
|
||||
.hl-constant {
|
||||
color: var(--hl-purple);
|
||||
}
|
||||
|
||||
.hl-constant-builtin {
|
||||
color: var(--hl-olive);
|
||||
}
|
||||
|
||||
.hl-constant-builtin-boolean {
|
||||
color: var(--hl-olive);
|
||||
}
|
||||
|
||||
.hl-constant-character {
|
||||
color: var(--hl-carnation);
|
||||
}
|
||||
|
||||
.hl-constant-character-escape {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-constant-numeric {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-constant-numeric-integer {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-constant-numeric-float {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
/* === Strings === */
|
||||
.hl-string {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.hl-string-regexp {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-string-special {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-string-special-path {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-string-special-url {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-string-special-symbol {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
/* === Variables === */
|
||||
.hl-variable {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-variable-builtin {
|
||||
color: var(--hl-olive);
|
||||
}
|
||||
|
||||
.hl-variable-parameter {
|
||||
color: var(--hl-blue);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-variable-other {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-variable-other-member {
|
||||
color: var(--hl-lilac);
|
||||
}
|
||||
|
||||
/* === Comments === */
|
||||
.hl-comment {
|
||||
color: var(--hl-comment);
|
||||
}
|
||||
|
||||
.hl-comment-line {
|
||||
color: var(--hl-comment);
|
||||
}
|
||||
|
||||
.hl-comment-block {
|
||||
color: var(--hl-comment);
|
||||
}
|
||||
|
||||
.hl-comment-block-documentation {
|
||||
color: var(--hl-comment);
|
||||
}
|
||||
|
||||
.hl-comment-line-documentation {
|
||||
color: var(--hl-comment);
|
||||
}
|
||||
|
||||
/* === Punctuation === */
|
||||
.hl-punctuation {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-punctuation-bracket {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
|
||||
.hl-punctuation-delimiter {
|
||||
color: var(--hl-coral);
|
||||
}
|
||||
|
||||
.hl-punctuation-special {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
/* === Operators === */
|
||||
.hl-operator {
|
||||
color: var(--hl-coral);
|
||||
}
|
||||
|
||||
/* === Other === */
|
||||
.hl-attribute {
|
||||
color: var(--hl-opal);
|
||||
}
|
||||
|
||||
.hl-label {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-namespace {
|
||||
color: var(--hl-olive);
|
||||
}
|
||||
|
||||
.hl-constructor {
|
||||
color: var(--hl-sand);
|
||||
}
|
||||
|
||||
.hl-special {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-tag {
|
||||
color: var(--hl-carnation);
|
||||
}
|
||||
|
||||
/* === Markup === */
|
||||
.hl-markup-heading {
|
||||
color: var(--hl-purple);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-bold {
|
||||
color: var(--hl-blue);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-italic {
|
||||
color: var(--hl-yellow);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-markup-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.hl-markup-link-text {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-markup-link-url {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-markup-link-label {
|
||||
color: var(--hl-blue);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-markup-list {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-markup-quote {
|
||||
color: var(--hl-yellow);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-markup-raw {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
|
||||
/* === Diff === */
|
||||
.hl-diff-plus {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.hl-diff-minus {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-diff-delta {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
331
themes/tokyonight.css
Normal file
331
themes/tokyonight.css
Normal file
@@ -0,0 +1,331 @@
|
||||
/**
|
||||
* Tokyo Night Theme for sukr
|
||||
* A modern Japanese-inspired dark theme
|
||||
* Author: Paul Graydon
|
||||
* Ported from Helix editor theme
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* Tokyo Night Palette */
|
||||
--hl-red: #f7768e;
|
||||
--hl-orange: #ff9e64;
|
||||
--hl-yellow: #e0af68;
|
||||
--hl-light-green: #9ece6a;
|
||||
--hl-green: #73daca;
|
||||
--hl-aqua: #2ac3de;
|
||||
--hl-teal: #1abc9c;
|
||||
--hl-turquoise: #89ddff;
|
||||
--hl-light-cyan: #b4f9f8;
|
||||
--hl-cyan: #7dcfff;
|
||||
--hl-blue: #7aa2f7;
|
||||
--hl-purple: #9d7cd8;
|
||||
--hl-magenta: #bb9af7;
|
||||
--hl-comment: #565f89;
|
||||
--hl-fg: #c0caf5;
|
||||
--hl-fg-dark: #a9b1d6;
|
||||
--hl-bg: #1a1b26;
|
||||
--hl-bg-menu: #16161e;
|
||||
}
|
||||
|
||||
/* === Keywords === */
|
||||
.hl-keyword {
|
||||
color: var(--hl-purple);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-keyword-control {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-keyword-control-conditional {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-keyword-control-repeat {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-keyword-control-import {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-keyword-control-return {
|
||||
color: var(--hl-purple);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-keyword-control-exception {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-keyword-function {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-keyword-operator {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-keyword-directive {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-keyword-storage {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-keyword-storage-type {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-keyword-storage-modifier {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
/* === Functions === */
|
||||
.hl-function {
|
||||
color: var(--hl-blue);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-function-builtin {
|
||||
color: var(--hl-aqua);
|
||||
}
|
||||
|
||||
.hl-function-method {
|
||||
color: var(--hl-blue);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-function-macro {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-function-special {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
/* === Types === */
|
||||
.hl-type {
|
||||
color: var(--hl-aqua);
|
||||
}
|
||||
|
||||
.hl-type-builtin {
|
||||
color: var(--hl-aqua);
|
||||
}
|
||||
|
||||
.hl-type-enum-variant {
|
||||
color: var(--hl-orange);
|
||||
}
|
||||
|
||||
/* === Constants === */
|
||||
.hl-constant {
|
||||
color: var(--hl-orange);
|
||||
}
|
||||
|
||||
.hl-constant-builtin {
|
||||
color: var(--hl-aqua);
|
||||
}
|
||||
|
||||
.hl-constant-builtin-boolean {
|
||||
color: var(--hl-aqua);
|
||||
}
|
||||
|
||||
.hl-constant-character {
|
||||
color: var(--hl-light-green);
|
||||
}
|
||||
|
||||
.hl-constant-character-escape {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
.hl-constant-numeric {
|
||||
color: var(--hl-orange);
|
||||
}
|
||||
|
||||
.hl-constant-numeric-integer {
|
||||
color: var(--hl-orange);
|
||||
}
|
||||
|
||||
.hl-constant-numeric-float {
|
||||
color: var(--hl-orange);
|
||||
}
|
||||
|
||||
/* === Strings === */
|
||||
.hl-string {
|
||||
color: var(--hl-light-green);
|
||||
}
|
||||
|
||||
.hl-string-regexp {
|
||||
color: var(--hl-light-cyan);
|
||||
}
|
||||
|
||||
.hl-string-special {
|
||||
color: var(--hl-aqua);
|
||||
}
|
||||
|
||||
.hl-string-special-path {
|
||||
color: var(--hl-aqua);
|
||||
}
|
||||
|
||||
.hl-string-special-url {
|
||||
color: var(--hl-aqua);
|
||||
}
|
||||
|
||||
.hl-string-special-symbol {
|
||||
color: var(--hl-aqua);
|
||||
}
|
||||
|
||||
/* === Variables === */
|
||||
.hl-variable {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
|
||||
.hl-variable-builtin {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-variable-parameter {
|
||||
color: var(--hl-yellow);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-variable-other {
|
||||
color: var(--hl-fg);
|
||||
}
|
||||
|
||||
.hl-variable-other-member {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
/* === Comments === */
|
||||
.hl-comment {
|
||||
color: var(--hl-comment);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-line {
|
||||
color: var(--hl-comment);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-block {
|
||||
color: var(--hl-comment);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-comment-block-documentation {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
.hl-comment-line-documentation {
|
||||
color: var(--hl-yellow);
|
||||
}
|
||||
|
||||
/* === Punctuation === */
|
||||
.hl-punctuation {
|
||||
color: var(--hl-turquoise);
|
||||
}
|
||||
|
||||
.hl-punctuation-bracket {
|
||||
color: var(--hl-turquoise);
|
||||
}
|
||||
|
||||
.hl-punctuation-delimiter {
|
||||
color: var(--hl-turquoise);
|
||||
}
|
||||
|
||||
.hl-punctuation-special {
|
||||
color: var(--hl-turquoise);
|
||||
}
|
||||
|
||||
/* === Operators === */
|
||||
.hl-operator {
|
||||
color: var(--hl-turquoise);
|
||||
}
|
||||
|
||||
/* === Other === */
|
||||
.hl-attribute {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-label {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
|
||||
.hl-namespace {
|
||||
color: var(--hl-cyan);
|
||||
}
|
||||
|
||||
.hl-constructor {
|
||||
color: var(--hl-aqua);
|
||||
}
|
||||
|
||||
.hl-special {
|
||||
color: var(--hl-aqua);
|
||||
}
|
||||
|
||||
.hl-tag {
|
||||
color: var(--hl-magenta);
|
||||
}
|
||||
|
||||
/* === Markup === */
|
||||
.hl-markup-heading {
|
||||
color: var(--hl-blue);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hl-markup-strikethrough {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.hl-markup-link {
|
||||
color: var(--hl-blue);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hl-markup-link-text {
|
||||
color: var(--hl-teal);
|
||||
}
|
||||
|
||||
.hl-markup-link-url {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hl-markup-link-label {
|
||||
color: var(--hl-teal);
|
||||
}
|
||||
|
||||
.hl-markup-list {
|
||||
color: var(--hl-orange);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hl-markup-quote {
|
||||
color: var(--hl-teal);
|
||||
}
|
||||
|
||||
.hl-markup-raw {
|
||||
color: var(--hl-teal);
|
||||
}
|
||||
|
||||
/* === Diff === */
|
||||
.hl-diff-plus {
|
||||
color: var(--hl-green);
|
||||
}
|
||||
|
||||
.hl-diff-minus {
|
||||
color: var(--hl-red);
|
||||
}
|
||||
|
||||
.hl-diff-delta {
|
||||
color: var(--hl-blue);
|
||||
}
|
||||
Reference in New Issue
Block a user