From 3acbaa1f12f21ecede10bad4281248f4232b0100 Mon Sep 17 00:00:00 2001 From: dragonwocky Date: Sat, 24 Oct 2020 11:05:04 +1100 Subject: [PATCH] #146 dracula theme readability/contrast improvements --- mods/{dracula-theme => dracula}/mod.js | 0 mods/{dracula-theme => dracula}/styles.css | 44 ++++++++++++++-------- 2 files changed, 29 insertions(+), 15 deletions(-) rename mods/{dracula-theme => dracula}/mod.js (100%) rename mods/{dracula-theme => dracula}/styles.css (85%) diff --git a/mods/dracula-theme/mod.js b/mods/dracula/mod.js similarity index 100% rename from mods/dracula-theme/mod.js rename to mods/dracula/mod.js diff --git a/mods/dracula-theme/styles.css b/mods/dracula/styles.css similarity index 85% rename from mods/dracula-theme/styles.css rename to mods/dracula/styles.css index 67e9a74..4ba2ce2 100644 --- a/mods/dracula-theme/styles.css +++ b/mods/dracula/styles.css @@ -7,24 +7,26 @@ :root { --theme_dark--main: #282a36; - --theme_dark--sidebar: #282a36; + --theme_dark--sidebar: #21232c; --theme_dark--overlay: #282a36; - --theme_dark--dragarea: #282a36; + --theme_dark--dragarea: #20222b; --theme_dark--font_sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; - --theme_dark--scrollbar: #282a36; - --theme_dark--scrollbar_hover: #6272a4; + --theme_dark--scrollbar: #393c4d; + --theme_dark--scrollbar_hover: #576591; - --theme_dark--card: #6272a4; - --theme_dark--gallery: #282a36; - --theme_dark--table-border: #6272a4; - --theme_dark--interactive_hover: #282a36; + --theme_dark--card: #3c3f50; + --theme_dark--gallery: #323546; + --theme_dark--select_input: #474a5c; + --theme_dark--table-border: #484b59; + --theme_dark--ui-border: var(--theme_dark--table-border); + --theme_dark--interactive_hover: #3c3f50; --theme_dark--button_close: #ff5555; - --theme_dark--selected: #454158; + --theme_dark--selected: rgba(189, 147, 249, 0.3); --theme_dark--primary: #bd93f9; --theme_dark--primary_hover: #8be9fd; --theme_dark--primary_click: #bd93f9; @@ -40,7 +42,7 @@ --theme_dark--text_ui: #f8f8f2; --theme_dark--text_ui_info: #f8f8f2; - --theme_dark--text_gray: #454158; + --theme_dark--text_gray: #807e8d; --theme_dark--text_brown: #6272a4; --theme_dark--text_orange: #ffb86c; --theme_dark--text_yellow: #f1fa8c; @@ -52,7 +54,9 @@ --theme_dark--select-text: #000000; --theme_dark--select_gray: #454158; + --theme_dark--select_gray-text: #f5f5f5; --theme_dark--select_brown: #6272a4; + --theme_dark--select_brown-text: #f5f5f5; --theme_dark--select_orange: #ffb86c; --theme_dark--select_yellow: #f1fa8c; --theme_dark--select_green: #50fa7b; @@ -60,10 +64,13 @@ --theme_dark--select_purple: #bd93f9; --theme_dark--select_pink: #ff79c6; --theme_dark--select_red: #ff5555; + --theme_dark--select_red-text: #f5f5f5; --theme_dark--bg-text: var(--theme_dark--select-text); --theme_dark--bg_gray: var(--theme_dark--select_gray); + --theme_dark--bg_gray-text: #f5f5f5; --theme_dark--bg_brown: var(--theme_dark--select_brown); + --theme_dark--bg_brown-text: #f5f5f5; --theme_dark--bg_orange: var(--theme_dark--select_orange); --theme_dark--bg_yellow: var(--theme_dark--select_yellow); --theme_dark--bg_green: var(--theme_dark--select_green); @@ -71,10 +78,13 @@ --theme_dark--bg_purple: var(--theme_dark--select_purple); --theme_dark--bg_pink: var(--theme_dark--select_pink); --theme_dark--bg_red: var(--theme_dark--select_red); + --theme_dark--bg_red-text: #f5f5f5; --theme_dark--line-text: #000000; - --theme_dark--line_gray: #454158; + --theme_dark--line_gray: #3c3f50; + --theme_dark--line_gray-text: #f5f5f5; --theme_dark--line_brown: #6272a4; + --theme_dark--line_brown-text: #f5f5f5; --theme_dark--line_orange: #ffb86c; --theme_dark--line_yellow: #f1fa8c; --theme_dark--line_green: #50fa7b; @@ -82,10 +92,13 @@ --theme_dark--line_purple: #bd93f9; --theme_dark--line_pink: #ff79c6; --theme_dark--line_red: #ff5555; + --theme_dark--line_red-text: #f5f5f5; --theme_dark--callout-text: var(--theme_dark--line-text); --theme_dark--callout_gray: var(--theme_dark--line_gray); + --theme_dark--callout_gray-text: #f5f5f5; --theme_dark--callout_brown: var(--theme_dark--line_brown); + --theme_dark--callout_brown-text: #f5f5f5; --theme_dark--callout_orange: var(--theme_dark--line_orange); --theme_dark--callout_yellow: var(--theme_dark--line_yellow); --theme_dark--callout_green: var(--theme_dark--line_green); @@ -93,11 +106,12 @@ --theme_dark--callout_purple: var(--theme_dark--line_purple); --theme_dark--callout_pink: var(--theme_dark--line_pink); --theme_dark--callout_red: var(--theme_dark--line_red); + --theme_dark--callout_red-text: #f5f5f5; --theme_dark--code_inline-text: #50fa7b; - --theme_dark--code_inline-background: #44475a; + --theme_dark--code_inline-background: #3c3f50; --theme_dark--code-text: var(--theme_dark--text); - --theme_dark--code-background: #44475a; + --theme_dark--code-background: #3c3f50; --theme_dark--code_function: var(--theme_dark--text_blue); --theme_dark--code_keyword: var(--theme_dark--text_pink); --theme_dark--code_tag: var(--theme_dark--text_pink); @@ -107,8 +121,8 @@ --theme_dark--code_builtin: var(--theme_dark--text_yellow); --theme_dark--code_attr-name: var(--theme_dark--text_yellow); --theme_dark--code_comment: var(--theme_dark--text_ui); - --theme_dark--code_punctuation: var(--theme_dark--text_gray); - --theme_dark--code_doctype: var(--theme_dark--text_gray); + --theme_dark--code_punctuation: #d2d0dc; + --theme_dark--code_doctype: #d2d0dc; --theme_dark--code_number: var(--theme_dark--text_purple); --theme_dark--code_string: var(--theme_dark--text_orange); --theme_dark--code_attr-value: var(--theme_dark--text_orange);