From 5baf0b1baa8d68f8278a3614a62c4495d4d38adf Mon Sep 17 00:00:00 2001 From: revsuine Date: Sat, 14 Dec 2024 01:02:44 +0000 Subject: [PATCH] assets/css/prism.css: update to match theme --- assets/css/prism.css | 91 +++++++++++++++++++++++++++++++------------- 1 file changed, 64 insertions(+), 27 deletions(-) diff --git a/assets/css/prism.css b/assets/css/prism.css index 4367b25..9e98e00 100644 --- a/assets/css/prism.css +++ b/assets/css/prism.css @@ -1,16 +1,57 @@ /** - * Gruvbox dark theme * - * Adapted from a theme based on: - * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox) + * Gruvbox-material medium dark * - * @author Azat S. + * Adapted from a prismjs theme by Azat S. + * With an attempt to match colours from https://github.com/sainnhe/gruvbox-material/blob/master/colors/gruvbox-material.vim + * by sainnhe , with creative liberties according to my taste + * + * @author revsuine < pid1 at revsuine dot xyz > * @version 1.0 + * */ +/* COLOURS */ +pre[class*="language-"] { + /* gruvbox material medium dark https://github.com/sainnhe/gruvbox-material */ + --bg_dim: #1b1b1b; + --bg0: #282828; + --bg1: #32302f; + --bg2: #32302f; + --bg3: #45403d; + --bg4: #45403d; + --bg5: #5a524c; + --bg_statusline1: #32302f; + --bg_statusline2: #313735; + --bg_statusline3: #504945; + --bg_diff_green: #34381b; + --bg_visual_green: #3b4439; + --bg_diff_red: #402120; + --bg_visual_red: #4c3432; + --bg_diff_blue: #0e363e; + --bg_visual_blue: #373131; + --bg_visual_yellow: #4f422e; + --bg_current_word: #3c3836; + --fg0: #d4be98; + --fg1: #ddc7a1; + --red: #ea6962; + --orange: #e78a4e; + --yellow: #d8a657; + --green: #a9b665; + --aqua: #89b482; + --blue: #7daea3; + --purple: #d3869b; + --bg_red: #ea6962; + --bg_green: #a9b665; + --bg_yellow: #d8a657; + --grey0: #7c6f64; + --grey1: #928374; + --grey2: #a89984; +} + code[class*="language-"], pre[class*="language-"] { - color: #ebdbb2; /* fg1 / fg */ + color: var(--fg0); font-family: "Fira Code", "Ubuntu Mono", Consolas, Monaco, "Andale Mono", monospace; direction: ltr; text-align: left; @@ -33,16 +74,16 @@ pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { - color: #fbf1c7; /* fg0 */ - background: #7c6f64; /* bg4 */ + color: var(--fg0); + background: var(--bg3); } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { - color: #fbf1c7; /* fg0 */ - background: #7c6f64; /* bg4 */ + color: var(--fg0); + background: var(--bg3); } /* Code blocks */ @@ -54,19 +95,18 @@ pre[class*="language-"] { :not(pre) > code[class*="language-"], pre[class*="language-"] { - background: #1d2021; /* bg0_h */ + background: var(--bg_dim); } /* Inline code */ :not(pre) > code[class*="language-"] { padding: 0.1em; - border-radius: 0.3em; } .token.comment, .token.prolog, .token.cdata { - color: #a89984; /* fg4 / gray1 */ + color: var(--grey0); } .token.delimiter, @@ -75,55 +115,52 @@ pre[class*="language-"] { .token.selector, .token.important, .token.atrule { - color: #fb4934; /* red2 */ + color: var(--red); } .token.operator, .token.punctuation, .token.attr-name { - color: #a89984; /* fg4 / gray1 */ + color: var(--grey2); } .token.tag, .token.tag .punctuation, .token.doctype, .token.builtin { - color: #fabd2f; /* yellow2 */ + color: var(--yellow); } .token.entity, .token.number, .token.symbol { - color: #d3869b; /* purple2 */ + color: var(--aqua); } .token.property, .token.constant, .token.variable { - color: #fb4934; /* red2 */ + color: var(--blue); } .token.string, -.token.char { - color: #b8bb26; /* green2 */ -} - +.token.char, .token.attr-value, .token.attr-value .punctuation { - color: #a89984; /* fg4 / gray1 */ + color: var(--green); } .token.url { - color: #b8bb26; /* green2 */ + color: var(--green); text-decoration: underline; } .token.function { - color: #fabd2f; /* yellow2 */ + color: var(--yellow); } .token.regex { - background: #b8bb26; /* green2 */ + background: var(--green); } .token.bold { @@ -135,11 +172,11 @@ pre[class*="language-"] { } .token.inserted { - background: #a89984; /* fg4 / gray1 */ + background: var(--bg_diff_green); } .token.deleted { - background: #fb4934; /* red2 */ + background: var(--bg_diff_red); } /* css for hover button from https://github.com/panr/hugo-theme-terminal/blob/master/assets/css/prism.css */