From 9ca308c5b64e1f6e848fe9c8ef8a7566c33f7cb7 Mon Sep 17 00:00:00 2001
From: fuwaa <ohayo@fuwa.sh>
Date: Mon, 11 Jul 2022 16:29:47 +0800
Subject: [PATCH] implementation: options ui

---
 public/background.js                   | 797 ++++++++++++-------------
 public/pint-css.css                    |  18 +
 src/App.tsx                            |   2 +-
 src/components/global/CardTitle.tsx    |   7 +-
 src/components/options/ChangeCard.tsx  |  77 +++
 src/components/options/Converter.tsx   |  37 ++
 src/components/options/Header.tsx      |   2 +-
 src/components/options/QuickChange.tsx |  35 ++
 src/components/popup/QuickChange.tsx   | 135 +++--
 src/components/popup/QuickSettings.tsx |   2 +-
 src/methods/helper.js                  |  20 +
 src/methods/predefined/githubdark.js   |   0
 src/methods/quickScheme.js             | 235 ++++++++
 src/methods/schemeGen.js               |  76 +++
 src/methods/settings.js                | 450 ++++++++++++++
 src/views/Options.tsx                  |  50 +-
 16 files changed, 1478 insertions(+), 465 deletions(-)
 create mode 100644 src/components/options/ChangeCard.tsx
 create mode 100644 src/components/options/Converter.tsx
 create mode 100644 src/components/options/QuickChange.tsx
 create mode 100644 src/methods/predefined/githubdark.js
 create mode 100644 src/methods/quickScheme.js
 create mode 100644 src/methods/schemeGen.js
 create mode 100644 src/methods/settings.js

diff --git a/public/background.js b/public/background.js
index e66fbf2..f7c463d 100644
--- a/public/background.js
+++ b/public/background.js
@@ -1,66 +1,221 @@
 defaultColorScheme = {
+    "__color_accent_emphasis" : "#1f6feb",
+    "__color_accent_fg" : "#58a6ff",
+    "__color_accent_muted" : "rgba(56, 139, 253, 0.4)",
+    "__color_accent_subtle" : "rgba(56, 139, 253, 0.15)",
+    "__color_action_list_item_danger_active_bg" : "rgba(248, 81, 73, 0.24)",
+    "__color_action_list_item_danger_hover_bg" : "rgba(248, 81, 73, 0.16)",
+    "__color_action_list_item_danger_hover_text" : "#ff7b72",
+    "__color_action_list_item_default_active_bg" : "rgba(177, 186, 196, 0.2)",
+    "__color_action_list_item_default_active_border" : "rgba(0, 0, 0, 0)",
+    "__color_action_list_item_default_hover_bg" : "rgba(177, 186, 196, 0.12)",
+    "__color_action_list_item_default_hover_border" : "rgba(0, 0, 0, 0)",
+    "__color_action_list_item_default_selected_bg" : "rgba(177, 186, 196, 0.08)",
+    "__color_action_list_item_inline_divider" : "rgba(48, 54, 61, 0.48)",
+    "__color_ans_Iblack_bright" : "#6e7681",
+    "__color_ans_Iblack" : "#484f58",
+    "__color_ans_Iblue_bright" : "#79c0ff",
+    "__color_ans_Iblue" : "#58a6ff",
+    "__color_ans_Icyan_bright" : "#56d4dd",
+    "__color_ans_Icyan" : "#39c5cf",
+    "__color_ans_Igray" : "#6e7681",
+    "__color_ans_Igreen_bright" : "#56d364",
+    "__color_ans_Igreen" : "#3fb950",
+    "__color_ans_Imagenta_bright" : "#d2a8ff",
+    "__color_ans_Imagenta" : "#bc8cff",
+    "__color_ans_Ired_bright" : "#ffa198",
+    "__color_ans_Ired" : "#ff7b72",
+    "__color_ans_Iwhite_bright" : "#ffffff",
+    "__color_ans_Iwhite" : "#b1bac4",
+    "__color_ans_Iyellow_bright" : "#e3b341",
+    "__color_ans_Iyellow" : "#d29922",
+    "__color_attention_emphasis" : "#9e6a03",
+    "__color_attention_fg" : "#d29922",
+    "__color_attention_muted" : "rgba(187, 128, 9, 0.4)",
+    "__color_attention_subtle" : "rgba(187, 128, 9, 0.15)",
+    "__color_avatar_bg" : "rgba(255, 255, 255, 0.1)",
+    "__color_avatar_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_avatar_child_shadow" : "_2px _2px 0 #0d1117",
+    "__color_avatar_stack_fade_more" : "#21262d",
+    "__color_avatar_stack_fade" : "#30363d",
+    "__color_border_default" : "#30363d",
+    "__color_border_muted" : "#21262d",
+    "__color_border_subtle" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_active_bg" : "hsla(212, 12%, 18%, 1)",
+    "__color_btn_active_border" : "#6e7681",
+    "__color_btn_bg" : "#21262d",
+    "__color_btn_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_counter_bg" : "#30363d",
+    "__color_btn_danger_counter_bg" : "rgba(218, 54, 51, 0.1)",
+    "__color_btn_danger_disabled_bg" : "#0d1117",
+    "__color_btn_danger_disabled_counter_bg" : "rgba(218, 54, 51, 0.05)",
+    "__color_btn_danger_disabled_text" : "rgba(248, 81, 73, 0.5)",
+    "__color_btn_danger_focus_border" : "#f85149",
+    "__color_btn_danger_focus_shadow" : "0 0 0 3px rgba(248, 81, 73, 0.4)",
+    "__color_btn_danger_hover_bg" : "#da3633",
+    "__color_btn_danger_hover_border" : "#f85149",
+    "__color_btn_danger_hover_counter_bg" : "rgba(255, 255, 255, 0.2)",
+    "__color_btn_danger_hover_icon" : "#ffffff",
+    "__color_btn_danger_hover_inset_shadow" : "0 0 transparent",
+    "__color_btn_danger_hover_shadow" : "0 0 transparent",
+    "__color_btn_danger_hover_text" : "#ffffff",
+    "__color_btn_danger_icon" : "#f85149",
+    "__color_btn_danger_selected_bg" : "#b62324",
+    "__color_btn_danger_selected_border" : "#ff7b72",
+    "__color_btn_danger_selected_shadow" : "0 0 transparent",
+    "__color_btn_danger_selected_text" : "#ffffff",
+    "__color_btn_danger_text" : "#f85149",
+    "__color_btn_focus_bg" : "#21262d",
+    "__color_btn_focus_border" : "#8b949e",
+    "__color_btn_focus_shadow" : "0 0 0 3px rgba(139, 148, 158, 0.3)",
+    "__color_btn_hover_bg" : "#30363d",
+    "__color_btn_hover_border" : "#8b949e",
+    "__color_btn_inset_shadow" : "0 0 transparent",
+    "__color_btn_outline_counter_bg" : "rgba(31, 111, 235, 0.1)",
+    "__color_btn_outline_disabled_bg" : "#0d1117",
+    "__color_btn_outline_disabled_counter_bg" : "rgba(31, 111, 235, 0.05)",
+    "__color_btn_outline_disabled_text" : "rgba(88, 166, 255, 0.5)",
+    "__color_btn_outline_focus_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_outline_focus_shadow" : "0 0 0 3px rgba(17, 88, 199, 0.4)",
+    "__color_btn_outline_hover_bg" : "#30363d",
+    "__color_btn_outline_hover_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_outline_hover_counter_bg" : "rgba(255, 255, 255, 0.2)",
+    "__color_btn_outline_hover_inset_shadow" :  "inset 0 1px 0 rgba(255, 255, 255, 0.03)",
+    "__color_btn_outline_hover_shadow" : "0 1px 0 rgba(1, 4, 9, 0.1)",
+    "__color_btn_outline_hover_text" : "#58a6ff",
+    "__color_btn_outline_selected_bg" : "#0d419d",
+    "__color_btn_outline_selected_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_outline_selected_shadow" : "0 0 transparent",
+    "__color_btn_outline_selected_text" : "#ffffff",
+    "__color_btn_outline_text" : "#58a6ff",
+    "__color_btn_primary_bg" : "#238636",
+    "__color_btn_primary_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_primary_counter_bg" : "rgba(255, 255, 255, 0.2)",
+    "__color_btn_primary_disabled_bg" : "rgba(35, 134, 54, 0.6)",
+    "__color_btn_primary_disabled_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_primary_disabled_text" : "rgba(255, 255, 255, 0.5)",
+    "__color_btn_primary_focus_bg" : "#238636",
+    "__color_btn_primary_focus_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_primary_focus_shadow" : "0 0 0 3px rgba(46, 164, 79, 0.4)",
+    "__color_btn_primary_hover_bg" : "#2ea043",
+    "__color_btn_primary_hover_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_primary_icon" : "#ffffff",
+    "__color_btn_primary_inset_shadow" : "0 0 transparent",
+    "__color_btn_primary_selected_bg" : "#238636",
+    "__color_btn_primary_selected_shadow" : "0 0 transparent",
+    "__color_btn_primary_shadow" : "0 0 transparent",
+    "__color_btn_primary_text" : "#ffffff",
+    "__color_btn_selected_bg" : "#161b22",
+    "__color_btn_shadow_active" : "inset 0 0.15em 0.3em rgba(1, 4, 9, 0.15)",
+    "__color_btn_shadow_input_focus" : "0 0 0 0.2em rgba(31, 111, 235, 0.3)",
+    "__color_btn_shadow" : "0 0 transparent",
+    "__color_btn_text" : "#c9d1d9",
+    "__color_calendar_graph_day_bg" : "rgba(0,0,0,0.1)",
+    "__color_calendar_graph_day_border" : "rgba(27, 31, 35, 0.06)",
+    "__color_calendar_graph_day_L1_bg" : "#0e4429",
+    "__color_calendar_graph_day_L1_border" : "rgba(255, 255, 255, 0.05)",
+    "__color_calendar_graph_day_L2_bg" : "#006d32",
+    "__color_calendar_graph_day_L2_border" : "rgba(255, 255, 255, 0.05)",
+    "__color_calendar_graph_day_L3_bg" : "#26a641",
+    "__color_calendar_graph_day_L3_border" : "rgba(255, 255, 255, 0.05)",
+    "__color_calendar_graph_day_L4_bg" : "#39d353",
+    "__color_calendar_graph_day_L4_border" : "rgba(255, 255, 255, 0.05)",
+    "__color_calendar_halloween_graph_day_L1_bg" : "#631c03",
+    "__color_calendar_halloween_graph_day_L2_bg" : "#bd561d",
+    "__color_calendar_halloween_graph_day_L3_bg" : "#fa7a18",
+    "__color_calendar_halloween_graph_day_L4_bg" : "#fddf68",
     "__color_canvas_default_transparent" : "rgba(13, 17, 23, 0)",
-    "__color_page_header_bg" : "#0d1117",
-    "__color_marketing_icon_primary" : "#79c0ff",
-    "__color_marketing_icon_secondary" : "#1f6feb",
-    "__color_diff_blob_addition_num_text" : "#c9d1d9",
-    "__color_diff_blob_addition_fg" : "#c9d1d9",
-    "__color_diff_blob_addition_num_bg" : "rgba(63, 185, 80, 0.3)",
-    "__color_diff_blob_addition_line_bg" : "rgba(46, 160, 67, 0.15)",
-    "__color_diff_blob_addition_word_bg" : "rgba(46, 160, 67, 0.4)",
-    "__color_diff_blob_deletion_num_text" : "#c9d1d9",
-    "__color_diff_blob_deletion_fg" : "#c9d1d9",
-    "__color_diff_blob_deletion_num_bg" : "rgba(248, 81, 73, 0.3)",
-    "__color_diff_blob_deletion_line_bg" : "rgba(248, 81, 73, 0.15)",
-    "__color_diff_blob_deletion_word_bg" : "rgba(248, 81, 73, 0.4)",
-    "__color_diff_blob_hunk_num_bg" : "rgba(56, 139, 253, 0.4)",
-    "__color_diff_blob_expander_icon" : "#8b949e",
-    "__color_diff_blob_selected_line_highlight_mix_blend_mode" : "screen",
-    "__color_diffstat_deletion_border" : "rgba(240, 246, 252, 0.1)",
-    "__color_diffstat_addition_border" : "rgba(240, 246, 252, 0.1)",
-    "__color_diffstat_addition_bg" : "#3fb950",
-    "__color_search_keyword_hl" : "rgba(210, 153, 34, 0.4)",
-    "__color_prettylights_syntax_comment" : "#8b949e",
-    "__color_prettylights_syntax_constant" : "#79c0ff",
-    "__color_prettylights_syntax_entity" : "#d2a8ff",
-    "__color_prettylights_syntax_storage_modifier_import" : "#c9d1d9",
-    "__color_prettylights_syntax_entity_tag" : "#7ee787",
-    "__color_prettylights_syntax_keyword" : "#ff7b72",
-    "__color_prettylights_syntax_string" : "#a5d6ff",
-    "__color_prettylights_syntax_variable" : "#ffa657",
-    "__color_prettylights_syntax_brackethighlighter_unmatched" : "#f85149",
-    "__color_prettylights_syntax_invalid_illegal_text" : "#f0f6fc",
-    "__color_prettylights_syntax_invalid_illegal_bg" : "#8e1519",
-    "__color_prettylights_syntax_carriage_return_text" : "#f0f6fc",
-    "__color_prettylights_syntax_carriage_return_bg" : "#b62324",
-    "__color_prettylights_syntax_string_regexp" : "#7ee787",
-    "__color_prettylights_syntax_markup_list" : "#f2cc60",
-    "__color_prettylights_syntax_markup_heading" : "#1f6feb",
-    "__color_prettylights_syntax_markup_italic" : "#c9d1d9",
-    "__color_prettylights_syntax_markup_bold" : "#c9d1d9",
-    "__color_prettylights_syntax_markup_deleted_text" : "#ffdcd7",
-    "__color_prettylights_syntax_markup_deleted_bg" : "#67060c",
-    "__color_prettylights_syntax_markup_inserted_text" : "#aff5b4",
-    "__color_prettylights_syntax_markup_inserted_bg" : "#033a16",
-    "__color_prettylights_syntax_markup_changed_text" : "#ffdfb6",
-    "__color_prettylights_syntax_markup_changed_bg" : "#5a1e02",
-    "__color_prettylights_syntax_markup_ignored_text" : "#c9d1d9",
-    "__color_prettylights_syntax_markup_ignored_bg" : "#1158c7",
-    "__color_prettylights_syntax_meta_diff_range" : "#d2a8ff",
-    "__color_prettylights_syntax_brackethighlighter_angle" : "#8b949e",
-    "__color_prettylights_syntax_sublimelinter_gutter_mark" : "#484f58",
-    "__color_prettylights_syntax_constant_other_reference_link" : "#a5d6ff",
-    "__color_codemirror_text" : "#c9d1d9",
-    "__color_codemirror_bg" : "#0d1117",
-    "__color_codemirror_gutters_bg" : "#0d1117",
-    "__color_codemirror_guttermarker_text" : "#0d1117",
-    "__color_codemirror_guttermarker_subtle_text" : "#6e7681",
-    "__color_codemirror_linenumber_text" : "#8b949e",
-    "__color_codemirror_cursor" : "#c9d1d9",
-    "__color_codemirror_selection_bg" : "rgba(56, 139, 253, 0.4)",
+    "__color_canvas_default" : "#0d1117",
+    "__color_canvas_inset" : "#010409",
+    "__color_canvas_overlay" : "#161b22",
+    "__color_canvas_subtle" : "#161b22",
+    "__color_checks_ans_Iblack_bright" : "#161b22",
+    "__color_checks_ans_Iblack" : "#0d1117",
+    "__color_checks_ans_Iblue_bright" : "#79c0ff",
+    "__color_checks_ans_Iblue" : "#58a6ff",
+    "__color_checks_ans_Icyan_bright" : "#b3f0ff",
+    "__color_checks_ans_Icyan" : "#76e3ea",
+    "__color_checks_ans_Igray" : "#6e7681",
+    "__color_checks_ans_Igreen_bright" : "#56d364",
+    "__color_checks_ans_Igreen" : "#3fb950",
+    "__color_checks_ans_Imagenta_bright" : "#d2a8ff",
+    "__color_checks_ans_Imagenta" : "#bc8cff",
+    "__color_checks_ans_Ired_bright" : "#ffa198",
+    "__color_checks_ans_Ired" : "#ff7b72",
+    "__color_checks_ans_Iwhite_bright" : "#b1bac4",
+    "__color_checks_ans_Iwhite" : "#b1bac4",
+    "__color_checks_ans_Iyellow_bright" : "#e3b341",
+    "__color_checks_ans_Iyellow" : "#d29922",
+    "__color_checks_bg" : "#010409",
+    "__color_checks_btn_hover_bg" : "rgba(110, 118, 129, 0.1)",
+    "__color_checks_btn_hover_icon" : "#c9d1d9",
+    "__color_checks_btn_icon" : "#8b949e",
+    "__color_checks_container_border_width" : "1px",
+    "__color_checks_donut_error" : "#f85149",
+    "__color_checks_donut_neutral" : "#8b949e",
+    "__color_checks_donut_pending" : "#d29922",
+    "__color_checks_donut_success" : "#2ea043",
+    "__color_checks_dropdown_bg" : "#161b22",
+    "__color_checks_dropdown_border" : "#30363d",
+    "__color_checks_dropdown_btn_hover_bg" : "rgba(110, 118, 129, 0.1)",
+    "__color_checks_dropdown_btn_hover_text" : "#c9d1d9",
+    "__color_checks_dropdown_hover_bg" : "rgba(110, 118, 129, 0.1)",
+    "__color_checks_dropdown_hover_text" : "#c9d1d9",
+    "__color_checks_dropdown_shadow" : "rgba(1, 4, 9, 0.3)",
+    "__color_checks_dropdown_text" : "#c9d1d9",
+    "__color_checks_gate_bg" : "rgba(187, 128, 9, 0.15)",
+    "__color_checks_gate_text" : "#8b949e",
+    "__color_checks_gate_waiting_text" : "#d29922",
+    "__color_checks_header_border" : "#21262d",
+    "__color_checks_header_icon" : "#8b949e",
+    "__color_checks_header_label_open_text" : "#c9d1d9",
+    "__color_checks_header_label_text" : "#8b949e",
+    "__color_checks_input_bg" : "#161b22",
+    "__color_checks_input_focus_text" : "#c9d1d9",
+    "__color_checks_input_placeholder_text" : "#6e7681",
+    "__color_checks_input_shadow" : "0 0 0 1px (obj) => get_1.default(obj,  path)",
+    "__color_checks_input_text" : "#8b949e",
+    "__color_checks_line_dt_fm_bg" : "#9e6a03",
+    "__color_checks_line_dt_fm_text" : "#ffffff",
+    "__color_checks_line_hover_bg" : "rgba(110, 118, 129, 0.1)",
+    "__color_checks_line_num_text" : "#6e7681",
+    "__color_checks_line_selected_bg" : "rgba(56, 139, 253, 0.15)",
+    "__color_checks_line_selected_num_text" : "#58a6ff",
+    "__color_checks_line_text" : "#8b949e",
+    "__color_checks_line_timestamp_text" : "#6e7681",
+    "__color_checks_logline_command_text" : "#58a6ff",
+    "__color_checks_logline_debug_text" : "#a371f7",
+    "__color_checks_logline_error_bg" : "rgba(248, 81, 73, 0.15)",
+    "__color_checks_logline_error_num_text" : "#6e7681",
+    "__color_checks_logline_error_text" : "#8b949e",
+    "__color_checks_logline_num_text" : "#6e7681",
+    "__color_checks_logline_section_text" : "#3fb950",
+    "__color_checks_logline_text" : "#8b949e",
+    "__color_checks_logline_warning_bg" : "rgba(187, 128, 9, 0.15)",
+    "__color_checks_logline_warning_num_text" : "#d29922",
+    "__color_checks_logline_warning_text" : "#8b949e",
+    "__color_checks_run_border_width" : "1px",
+    "__color_checks_scrollbar_thumb_bg" : "rgba(110, 118, 129, 0.4)",
+    "__color_checks_step_error_text" : "#f85149",
+    "__color_checks_step_header_open_bg" : "#161b22",
+    "__color_checks_step_warning_text" : "#d29922",
+    "__color_checks_text_link" : "#58a6ff",
+    "__color_checks_text_primary" : "#c9d1d9",
+    "__color_checks_text_secondary" : "#8b949e",
+    "__color_closed_emphasis" : "#da3633",
+    "__color_closed_fg" : "#f85149",
+    "__color_closed_muted" : "rgba(248, 81, 73, 0.4)",
+    "__color_closed_subtle" : "rgba(248, 81, 73, 0.15)",
     "__color_codemirror_activeline_bg" : "rgba(110, 118, 129, 0.1)",
-    "__color_codemirror_matchingbracket_text" : "#c9d1d9",
+    "__color_codemirror_bg" : "#0d1117",
+    "__color_codemirror_cursor" : "#c9d1d9",
+    "__color_codemirror_guttermarker_subtle_text" : "#6e7681",
+    "__color_codemirror_guttermarker_text" : "#0d1117",
+    "__color_codemirror_gutters_bg" : "#0d1117",
+    "__color_codemirror_linenumber_text" : "#8b949e",
     "__color_codemirror_lines_bg" : "#0d1117",
+    "__color_codemirror_matchingbracket_text" : "#c9d1d9",
+    "__color_codemirror_selection_bg" : "rgba(56, 139, 253, 0.4)",
     "__color_codemirror_syntax_comment" : "#8b949e",
     "__color_codemirror_syntax_constant" : "#79c0ff",
     "__color_codemirror_syntax_entity" : "#d2a8ff",
@@ -69,291 +224,104 @@ defaultColorScheme = {
     "__color_codemirror_syntax_string" : "#a5d6ff",
     "__color_codemirror_syntax_support" : "#79c0ff",
     "__color_codemirror_syntax_variable" : "#ffa657",
-    "__color_checks_bg" : "#010409",
-    "__color_checks_run_border_width" : "1px",
-    "__color_checks_container_border_width" : "1px",
-    "__color_checks_text_primary" : "#c9d1d9",
-    "__color_checks_text_secondary" : "#8b949e",
-    "__color_checks_text_link" : "#58a6ff",
-    "__color_checks_btn_icon" : "#8b949e",
-    "__color_checks_btn_hover_icon" : "#c9d1d9",
-    "__color_checks_btn_hover_bg" : "rgba(110, 118, 129, 0.1)",
-    "__color_checks_input_text" : "#8b949e",
-    "__color_checks_input_placeholder_text" : "#6e7681",
-    "__color_checks_input_focus_text" : "#c9d1d9",
-    "__color_checks_input_bg" : "#161b22",
-    "__color_checks_input_shadow" : "0 0 0 1px (obj) => get_1.default(obj,  path)",
-    "__color_checks_donut_error" : "#f85149",
-    "__color_checks_donut_pending" : "#d29922",
-    "__color_checks_donut_success" : "#2ea043",
-    "__color_checks_donut_neutral" : "#8b949e",
-    "__color_checks_dropdown_text" : "#c9d1d9",
-    "__color_checks_dropdown_bg" : "#161b22",
-    "__color_checks_dropdown_border" : "#30363d",
-    "__color_checks_dropdown_shadow" : "rgba(1, 4, 9, 0.3)",
-    "__color_checks_dropdown_hover_text" : "#c9d1d9",
-    "__color_checks_dropdown_hover_bg" : "rgba(110, 118, 129, 0.1)",
-    "__color_checks_dropdown_btn_hover_text" : "#c9d1d9",
-    "__color_checks_dropdown_btn_hover_bg" : "rgba(110, 118, 129, 0.1)",
-    "__color_checks_scrollbar_thumb_bg" : "rgba(110, 118, 129, 0.4)",
-    "__color_checks_header_label_text" : "#8b949e",
-    "__color_checks_header_label_open_text" : "#c9d1d9",
-    "__color_checks_header_border" : "#21262d",
-    "__color_checks_header_icon" : "#8b949e",
-    "__color_checks_line_text" : "#8b949e",
-    "__color_checks_line_num_text" : "#6e7681",
-    "__color_checks_line_timestamp_text" : "#6e7681",
-    "__color_checks_line_hover_bg" : "rgba(110, 118, 129, 0.1)",
-    "__color_checks_line_selected_bg" : "rgba(56, 139, 253, 0.15)",
-    "__color_checks_line_selected_num_text" : "#58a6ff",
-    "__color_checks_line_dt_fm_text" : "#ffffff",
-    "__color_checks_line_dt_fm_bg" : "#9e6a03",
-    "__color_checks_gate_bg" : "rgba(187, 128, 9, 0.15)",
-    "__color_checks_gate_text" : "#8b949e",
-    "__color_checks_gate_waiting_text" : "#d29922",
-    "__color_checks_step_header_open_bg" : "#161b22",
-    "__color_checks_step_error_text" : "#f85149",
-    "__color_checks_step_warning_text" : "#d29922",
-    "__color_checks_logline_text" : "#8b949e",
-    "__color_checks_logline_num_text" : "#6e7681",
-    "__color_checks_logline_debug_text" : "#a371f7",
-    "__color_checks_logline_error_text" : "#8b949e",
-    "__color_checks_logline_error_num_text" : "#6e7681",
-    "__color_checks_logline_error_bg" : "rgba(248, 81, 73, 0.15)",
-    "__color_checks_logline_warning_text" : "#8b949e",
-    "__color_checks_logline_warning_num_text" : "#d29922",
-    "__color_checks_logline_warning_bg" : "rgba(187, 128, 9, 0.15)",
-    "__color_checks_logline_command_text" : "#58a6ff",
-    "__color_checks_logline_section_text" : "#3fb950",
-    "__color_checks_ans_Iblack" : "#0d1117",
-    "__color_checks_ans_Iblack_bright" : "#161b22",
-    "__color_checks_ans_Iwhite" : "#b1bac4",
-    "__color_checks_ans_Iwhite_bright" : "#b1bac4",
-    "__color_checks_ans_Igray" : "#6e7681",
-    "__color_checks_ans_Ired" : "#ff7b72",
-    "__color_checks_ans_Ired_bright" : "#ffa198",
-    "__color_checks_ans_Igreen" : "#3fb950",
-    "__color_checks_ans_Igreen_bright" : "#56d364",
-    "__color_checks_ans_Iyellow" : "#d29922",
-    "__color_checks_ans_Iyellow_bright" : "#e3b341",
-    "__color_checks_ans_Iblue" : "#58a6ff",
-    "__color_checks_ans_Iblue_bright" : "#79c0ff",
-    "__color_checks_ans_Imagenta" : "#bc8cff",
-    "__color_checks_ans_Imagenta_bright" : "#d2a8ff",
-    "__color_checks_ans_Icyan" : "#76e3ea",
-    "__color_checks_ans_Icyan_bright" : "#b3f0ff",
-    "__color_project_header_bg" : "#0d1117",
-    "__color_project_sidebar_bg" : "#161b22",
-    "__color_project_gradient_in" : "#161b22",
-    "__color_project_gradient_out" : "rgba(22, 27, 34, 0)",
-    "__color_mktg_btn_bg" : "#f6f8fa",
-    "__color_mktg_btn_shadow_outline" : "rgb(255 255 255 / 25%) 0 0 0 1px inset",
-    "__color_mktg_btn_shadow_focus" : "rgb(255 255 255 / 25%) 0 0 0 4px",
-    "__color_mktg_btn_shadow_hover" :
-      "0 4px 7px rgba(0,  0,  0,  0.15),  0 100px 80px rgba(255,  255,  255,  0.02),  0 42px 33px rgba(255,  255,  255,  0.024),  0 22px 18px rgba(255,  255,  255,  0.028),  0 12px 10px rgba(255,  255,  255,  0.034),  0 7px 5px rgba(255,  255,  255,  0.04),  0 3px 2px rgba(255,  255,  255,  0.07)",
-    "__color_mktg_btn_shadow_hover_muted" : "rgb(255 255 255) 0 0 0 2px inset",
-    "__color_avatar_bg" : "rgba(255, 255, 255, 0.1)",
-    "__color_avatar_border" : "rgba(240, 246, 252, 0.1)",
-    "__color_avatar_stack_fade" : "#30363d",
-    "__color_avatar_stack_fade_more" : "#21262d",
-    "__color_avatar_child_shadow" : "_2px _2px 0 #0d1117",
-    "__color_topic_tag_border" : "rgba(0, 0, 0, 0)",
+    "__color_codemirror_text" : "#c9d1d9",
     "__color_counter_border" : "rgba(0, 0, 0, 0)",
-    "__color_select_menu_backdrop_border" : "#484f58",
-    "__color_select_menu_tap_highlight" : "rgba(48, 54, 61, 0.5)",
-    "__color_select_menu_tap_focus_bg" : "#0c2d6b",
-    "__color_overlay_shadow" : "0 0 0 1px #30363d,  0 16px 32px rgba(1, 4, 9, 0.85)",
-    "__color_header_text" : "rgba(255, 255, 255, 0.7)",
+    "__color_danger_emphasis" : "#da3633",
+    "__color_danger_fg" : "#f85149",
+    "__color_danger_muted" : "rgba(248, 81, 73, 0.4)",
+    "__color_danger_subtle" : "rgba(248, 81, 73, 0.15)",
+    "__color_diff_blob_addition_fg" : "#c9d1d9",
+    "__color_diff_blob_addition_line_bg" : "rgba(46, 160, 67, 0.15)",
+    "__color_diff_blob_addition_num_bg" : "rgba(63, 185, 80, 0.3)",
+    "__color_diff_blob_addition_num_text" : "#c9d1d9",
+    "__color_diff_blob_addition_word_bg" : "rgba(46, 160, 67, 0.4)",
+    "__color_diff_blob_deletion_fg" : "#c9d1d9",
+    "__color_diff_blob_deletion_line_bg" : "rgba(248, 81, 73, 0.15)",
+    "__color_diff_blob_deletion_num_bg" : "rgba(248, 81, 73, 0.3)",
+    "__color_diff_blob_deletion_num_text" : "#c9d1d9",
+    "__color_diff_blob_deletion_word_bg" : "rgba(248, 81, 73, 0.4)",
+    "__color_diff_blob_expander_icon" : "#8b949e",
+    "__color_diff_blob_hunk_num_bg" : "rgba(56, 139, 253, 0.4)",
+    "__color_diff_blob_selected_line_highlight_mix_blend_mode" : "screen",
+    "__color_diffstat_addition_bg" : "#3fb950",
+    "__color_diffstat_addition_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_diffstat_deletion_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_done_emphasis" : "#8957e5",
+    "__color_done_fg" : "#a371f7",
+    "__color_done_muted" : "rgba(163, 113, 247, 0.4)",
+    "__color_done_subtle" : "rgba(163, 113, 247, 0.15)",
+    "__color_fg_default" : "#c9d1d9",
+    "__color_fg_muted" : "#8b949e",
+    "__color_fg_on_emphasis" : "#ffffff",
+    "__color_fg_subtle" : "#6e7681",
     "__color_header_bg" : "#161b22",
     "__color_header_divider" : "#8b949e",
     "__color_header_logo" : "#f0f6fc",
     "__color_header_search_bg" : "#0d1117",
     "__color_header_search_border" : "#30363d",
-    "__color_sidenav_selected_bg" : "#21262d",
-    "__color_menu_bg_active" : "#161b22",
+    "__color_header_text" : "rgba(255, 255, 255, 0.7)",
     "__color_input_disabled_bg" : "rgba(110, 118, 129, 0)",
-    "__color_timeline_badge_bg" : "#21262d",
-    "__color_ans_Iblack" : "#484f58",
-    "__color_ans_Iblack_bright" : "#6e7681",
-    "__color_ans_Iwhite" : "#b1bac4",
-    "__color_ans_Iwhite_bright" : "#ffffff",
-    "__color_ans_Igray" : "#6e7681",
-    "__color_ans_Ired" : "#ff7b72",
-    "__color_ans_Ired_bright" : "#ffa198",
-    "__color_ans_Igreen" : "#3fb950",
-    "__color_ans_Igreen_bright" : "#56d364",
-    "__color_ans_Iyellow" : "#d29922",
-    "__color_ans_Iyellow_bright" : "#e3b341",
-    "__color_ans_Iblue" : "#58a6ff",
-    "__color_ans_Iblue_bright" : "#79c0ff",
-    "__color_ans_Imagenta" : "#bc8cff",
-    "__color_ans_Imagenta_bright" : "#d2a8ff",
-    "__color_ans_Icyan" : "#39c5cf",
-    "__color_ans_Icyan_bright" : "#56d4dd",
-    "__color_btn_text" : "#c9d1d9",
-    "__color_btn_bg" : "#21262d",
-    "__color_btn_border" : "rgba(240, 246, 252, 0.1)",
-    "__color_btn_shadow" : "0 0 transparent",
-    "__color_btn_inset_shadow" : "0 0 transparent",
-    "__color_btn_hover_bg" : "#30363d",
-    "__color_btn_hover_border" : "#8b949e",
-    "__color_btn_active_bg" : "hsla(212, 12%, 18%, 1)",
-    "__color_btn_active_border" : "#6e7681",
-    "__color_btn_selected_bg" : "#161b22",
-    "__color_btn_focus_bg" : "#21262d",
-    "__color_btn_focus_border" : "#8b949e",
-    "__color_btn_focus_shadow" : "0 0 0 3px rgba(139, 148, 158, 0.3)",
-    "__color_btn_shadow_active" : "inset 0 0.15em 0.3em rgba(1, 4, 9, 0.15)",
-    "__color_btn_shadow_input_focus" : "0 0 0 0.2em rgba(31, 111, 235, 0.3)",
-    "__color_btn_counter_bg" : "#30363d",
-    "__color_btn_primary_text" : "#ffffff",
-    "__color_btn_primary_bg" : "#238636",
-    "__color_btn_primary_border" : "rgba(240, 246, 252, 0.1)",
-    "__color_btn_primary_shadow" : "0 0 transparent",
-    "__color_btn_primary_inset_shadow" : "0 0 transparent",
-    "__color_btn_primary_hover_bg" : "#2ea043",
-    "__color_btn_primary_hover_border" : "rgba(240, 246, 252, 0.1)",
-    "__color_btn_primary_selected_bg" : "#238636",
-    "__color_btn_primary_selected_shadow" : "0 0 transparent",
-    "__color_btn_primary_disabled_text" : "rgba(255, 255, 255, 0.5)",
-    "__color_btn_primary_disabled_bg" : "rgba(35, 134, 54, 0.6)",
-    "__color_btn_primary_disabled_border" : "rgba(240, 246, 252, 0.1)",
-    "__color_btn_primary_focus_bg" : "#238636",
-    "__color_btn_primary_focus_border" : "rgba(240, 246, 252, 0.1)",
-    "__color_btn_primary_focus_shadow" : "0 0 0 3px rgba(46, 164, 79, 0.4)",
-    "__color_btn_primary_icon" : "#ffffff",
-    "__color_btn_primary_counter_bg" : "rgba(255, 255, 255, 0.2)",
-    "__color_btn_outline_text" : "#58a6ff",
-    "__color_btn_outline_hover_text" : "#58a6ff",
-    "__color_btn_outline_hover_bg" : "#30363d",
-    "__color_btn_outline_hover_border" : "rgba(240, 246, 252, 0.1)",
-    "__color_btn_outline_hover_shadow" : "0 1px 0 rgba(1, 4, 9, 0.1)",
-    "__color_btn_outline_hover_inset_shadow" :
-      "inset 0 1px 0 rgba(255, 255, 255, 0.03)",
-    "__color_btn_outline_hover_counter_bg" : "rgba(255, 255, 255, 0.2)",
-    "__color_btn_outline_selected_text" : "#ffffff",
-    "__color_btn_outline_selected_bg" : "#0d419d",
-    "__color_btn_outline_selected_border" : "rgba(240, 246, 252, 0.1)",
-    "__color_btn_outline_selected_shadow" : "0 0 transparent",
-    "__color_btn_outline_disabled_text" : "rgba(88, 166, 255, 0.5)",
-    "__color_btn_outline_disabled_bg" : "#0d1117",
-    "__color_btn_outline_disabled_counter_bg" : "rgba(31, 111, 235, 0.05)",
-    "__color_btn_outline_focus_border" : "rgba(240, 246, 252, 0.1)",
-    "__color_btn_outline_focus_shadow" : "0 0 0 3px rgba(17, 88, 199, 0.4)",
-    "__color_btn_outline_counter_bg" : "rgba(31, 111, 235, 0.1)",
-    "__color_btn_danger_text" : "#f85149",
-    "__color_btn_danger_hover_text" : "#ffffff",
-    "__color_btn_danger_hover_bg" : "#da3633",
-    "__color_btn_danger_hover_border" : "#f85149",
-    "__color_btn_danger_hover_shadow" : "0 0 transparent",
-    "__color_btn_danger_hover_inset_shadow" : "0 0 transparent",
-    "__color_btn_danger_hover_icon" : "#ffffff",
-    "__color_btn_danger_hover_counter_bg" : "rgba(255, 255, 255, 0.2)",
-    "__color_btn_danger_selected_text" : "#ffffff",
-    "__color_btn_danger_selected_bg" : "#b62324",
-    "__color_btn_danger_selected_border" : "#ff7b72",
-    "__color_btn_danger_selected_shadow" : "0 0 transparent",
-    "__color_btn_danger_disabled_text" : "rgba(248, 81, 73, 0.5)",
-    "__color_btn_danger_disabled_bg" : "#0d1117",
-    "__color_btn_danger_disabled_counter_bg" : "rgba(218, 54, 51, 0.05)",
-    "__color_btn_danger_focus_border" : "#f85149",
-    "__color_btn_danger_focus_shadow" : "0 0 0 3px rgba(248, 81, 73, 0.4)",
-    "__color_btn_danger_counter_bg" : "rgba(218, 54, 51, 0.1)",
-    "__color_btn_danger_icon" : "#f85149",
-    "__color_underlinenav_icon" : "#6e7681",
-    "__color_underlinenav_border_hover" : "rgba(110, 118, 129, 0.4)",
-    "__color_action_list_item_inline_divider" : "rgba(48, 54, 61, 0.48)",
-    "__color_action_list_item_default_hover_bg" : "rgba(177, 186, 196, 0.12)",
-    "__color_action_list_item_default_hover_border" : "rgba(0, 0, 0, 0)",
-    "__color_action_list_item_default_active_bg" : "rgba(177, 186, 196, 0.2)",
-    "__color_action_list_item_default_active_border" : "rgba(0, 0, 0, 0)",
-    "__color_action_list_item_default_selected_bg" : "rgba(177, 186, 196, 0.08)",
-    "__color_action_list_item_danger_hover_bg" : "rgba(248, 81, 73, 0.16)",
-    "__color_action_list_item_danger_active_bg" : "rgba(248, 81, 73, 0.24)",
-    "__color_action_list_item_danger_hover_text" : "#ff7b72",
-    "__color_switch_track_bg" : "#010409",
-    "__color_switch_track_border" : "#6e7681",
-    "__color_switch_track_checked_bg" : "rgba(31, 111, 235, 0.35)",
-    "__color_switch_track_checked_hover_bg" : "rgba(31, 111, 235, 0.5)",
-    "__color_switch_track_checked_active_bg" : "rgba(31, 111, 235, 0.65)",
-    "__color_switch_track_checked_border" : "#58a6ff",
-    "__color_switch_knob_checked_bg" : "#1f6feb",
-    "__color_switch_knob_checked_disabled_bg" : "#484f58",
-    "__color_fg_default" : "#c9d1d9",
-    "__color_fg_muted" : "#8b949e",
-    "__color_fg_subtle" : "#6e7681",
-    "__color_fg_on_emphasis" : "#ffffff",
-    "__color_canvas_default" : "#0d1117",
-    "__color_canvas_overlay" : "#161b22",
-    "__color_canvas_inset" : "#010409",
-    "__color_canvas_subtle" : "#161b22",
-    "__color_border_default" : "#30363d",
-    "__color_border_muted" : "#21262d",
-    "__color_border_subtle" : "rgba(240, 246, 252, 0.1)",
-    "__color_shadow_small" : "0 0 transparent",
-    "__color_shadow_medium" : "0 3px 6px #010409",
-    "__color_shadow_large" : "0 8px 24px #010409",
-    "__color_shadow_extra_large" : "0 12px 48px #010409",
+    "__color_marketing_icon_primary" : "#79c0ff",
+    "__color_marketing_icon_secondary" : "#1f6feb",
+    "__color_menu_bg_active" : "#161b22",
+    "__color_mktg_btn_bg" : "#f6f8fa",
+    "__color_mktg_btn_shadow_focus" : "rgb(255 255 255 / 25%) 0 0 0 4px",
+    "__color_mktg_btn_shadow_hover_muted" : "rgb(255 255 255) 0 0 0 2px inset",
+    "__color_mktg_btn_shadow_hover" :  "0 4px 7px rgba(0,  0,  0,  0.15),  0 100px 80px rgba(255,  255,  255,  0.02),  0 42px 33px rgba(255,  255,  255,  0.024),  0 22px 18px rgba(255,  255,  255,  0.028),  0 12px 10px rgba(255,  255,  255,  0.034),  0 7px 5px rgba(255,  255,  255,  0.04),  0 3px 2px rgba(255,  255,  255,  0.07)",
+    "__color_mktg_btn_shadow_outline" : "rgb(255 255 255 / 25%) 0 0 0 1px inset",
     "__color_neutral_emphasis_plus" : "#6e7681",
     "__color_neutral_emphasis" : "#6e7681",
     "__color_neutral_muted" : "rgba(110, 118, 129, 0.4)",
     "__color_neutral_subtle" : "rgba(110, 118, 129, 0.1)",
-    "__color_accent_fg" : "#58a6ff",
-    "__color_accent_emphasis" : "#1f6feb",
-    "__color_accent_muted" : "rgba(56, 139, 253, 0.4)",
-    "__color_accent_subtle" : "rgba(56, 139, 253, 0.15)",
-    "__color_success_fg" : "#3fb950",
-    "__color_success_emphasis" : "#238636",
-    "__color_success_muted" : "rgba(46, 160, 67, 0.4)",
-    "__color_success_subtle" : "rgba(46, 160, 67, 0.15)",
-    "__color_attention_fg" : "#d29922",
-    "__color_attention_emphasis" : "#9e6a03",
-    "__color_attention_muted" : "rgba(187, 128, 9, 0.4)",
-    "__color_attention_subtle" : "rgba(187, 128, 9, 0.15)",
-    "__color_severe_fg" : "#db6d28",
-    "__color_severe_emphasis" : "#bd561d",
-    "__color_severe_muted" : "rgba(219, 109, 40, 0.4)",
-    "__color_severe_subtle" : "rgba(219, 109, 40, 0.15)",
-    "__color_danger_fg" : "#f85149",
-    "__color_danger_emphasis" : "#da3633",
-    "__color_danger_muted" : "rgba(248, 81, 73, 0.4)",
-    "__color_danger_subtle" : "rgba(248, 81, 73, 0.15)",
-    "__color_open_fg" : "#3fb950",
     "__color_open_emphasis" : "#238636",
+    "__color_open_fg" : "#3fb950",
     "__color_open_muted" : "rgba(46, 160, 67, 0.4)",
     "__color_open_subtle" : "rgba(46, 160, 67, 0.15)",
-    "__color_closed_fg" : "#f85149",
-    "__color_closed_emphasis" : "#da3633",
-    "__color_closed_muted" : "rgba(248, 81, 73, 0.4)",
-    "__color_closed_subtle" : "rgba(248, 81, 73, 0.15)",
-    "__color_done_fg" : "#a371f7",
-    "__color_done_emphasis" : "#8957e5",
-    "__color_done_muted" : "rgba(163, 113, 247, 0.4)",
-    "__color_done_subtle" : "rgba(163, 113, 247, 0.15)",
-    "__color_sponsors_fg" : "#db61a2",
-    "__color_sponsors_emphasis" : "#bf4b8a",
-    "__color_sponsors_muted" : "rgba(219, 97, 162, 0.4)",
-    "__color_sponsors_subtle" : "rgba(219, 97, 162, 0.15)",
-    "__color_primer_fg_disabled" : "#484f58",
-    "__color_primer_canvas_backdrop" : "rgba(1, 4, 9, 0.8)",
-    "__color_primer_canvas_sticky" : "rgba(13, 17, 23, 0.95)",
+    "__color_overlay_shadow" : "0 0 0 1px #30363d,  0 16px 32px rgba(1, 4, 9, 0.85)",
+    "__color_page_header_bg" : "#0d1117",
+    "__color_prettylights_syntax_brackethighlighter_angle" : "#8b949e",
+    "__color_prettylights_syntax_brackethighlighter_unmatched" : "#f85149",
+    "__color_prettylights_syntax_carriage_return_bg" : "#b62324",
+    "__color_prettylights_syntax_carriage_return_text" : "#f0f6fc",
+    "__color_prettylights_syntax_comment" : "#8b949e",
+    "__color_prettylights_syntax_constant_other_reference_link" : "#a5d6ff",
+    "__color_prettylights_syntax_constant" : "#79c0ff",
+    "__color_prettylights_syntax_entity_tag" : "#7ee787",
+    "__color_prettylights_syntax_entity" : "#d2a8ff",
+    "__color_prettylights_syntax_invalid_illegal_bg" : "#8e1519",
+    "__color_prettylights_syntax_invalid_illegal_text" : "#f0f6fc",
+    "__color_prettylights_syntax_keyword" : "#ff7b72",
+    "__color_prettylights_syntax_markup_bold" : "#c9d1d9",
+    "__color_prettylights_syntax_markup_changed_bg" : "#5a1e02",
+    "__color_prettylights_syntax_markup_changed_text" : "#ffdfb6",
+    "__color_prettylights_syntax_markup_deleted_bg" : "#67060c",
+    "__color_prettylights_syntax_markup_deleted_text" : "#ffdcd7",
+    "__color_prettylights_syntax_markup_heading" : "#1f6feb",
+    "__color_prettylights_syntax_markup_ignored_bg" : "#1158c7",
+    "__color_prettylights_syntax_markup_ignored_text" : "#c9d1d9",
+    "__color_prettylights_syntax_markup_inserted_bg" : "#033a16",
+    "__color_prettylights_syntax_markup_inserted_text" : "#aff5b4",
+    "__color_prettylights_syntax_markup_italic" : "#c9d1d9",
+    "__color_prettylights_syntax_markup_list" : "#f2cc60",
+    "__color_prettylights_syntax_meta_diff_range" : "#d2a8ff",
+    "__color_prettylights_syntax_storage_modifier_import" : "#c9d1d9",
+    "__color_prettylights_syntax_string_regexp" : "#7ee787",
+    "__color_prettylights_syntax_string" : "#a5d6ff",
+    "__color_prettylights_syntax_sublimelinter_gutter_mark" : "#484f58",
+    "__color_prettylights_syntax_variable" : "#ffa657",
     "__color_primer_border_active" : "#F78166",
     "__color_primer_border_contrast" : "rgba(255, 255, 255, 0.2)",
+    "__color_primer_canvas_backdrop" : "rgba(1, 4, 9, 0.8)",
+    "__color_primer_canvas_sticky" : "rgba(13, 17, 23, 0.95)",
+    "__color_primer_fg_disabled" : "#484f58",
+    "__color_primer_shadow_focus" : "0 0 0 3px #0c2d6b",
     "__color_primer_shadow_highlight" : "0 0 transparent",
     "__color_primer_shadow_inset" : "0 0 transparent",
-    "__color_primer_shadow_focus" : "0 0 0 3px #0c2d6b",
+    "__color_project_gradient_in" : "#161b22",
+    "__color_project_gradient_out" : "rgba(22, 27, 34, 0)",
+    "__color_project_header_bg" : "#0d1117",
+    "__color_project_sidebar_bg" : "#161b22",
     "__color_scale_black" : "#010409",
-    "__color_scale_white" : "#ffffff",
-    "__color_scale_gray_0" : "#f0f6fc",
-    "__color_scale_gray_1" : "#c9d1d9",
-    "__color_scale_gray_2" : "#b1bac4",
-    "__color_scale_gray_3" : "#8b949e",
-    "__color_scale_gray_4" : "#6e7681",
-    "__color_scale_gray_5" : "#484f58",
-    "__color_scale_gray_6" : "#30363d",
-    "__color_scale_gray_7" : "#21262d",
-    "__color_scale_gray_8" : "#161b22",
-    "__color_scale_gray_9" : "#0d1117",
     "__color_scale_blue_0" : "#cae8ff",
     "__color_scale_blue_1" : "#a5d6ff",
     "__color_scale_blue_2" : "#79c0ff",
@@ -364,66 +332,6 @@ defaultColorScheme = {
     "__color_scale_blue_7" : "#0d419d",
     "__color_scale_blue_8" : "#0c2d6b",
     "__color_scale_blue_9" : "#051d4d",
-    "__color_scale_green_0" : "#aff5b4",
-    "__color_scale_green_1" : "#7ee787",
-    "__color_scale_green_2" : "#56d364",
-    "__color_scale_green_3" : "#3fb950",
-    "__color_scale_green_4" : "#2ea043",
-    "__color_scale_green_5" : "#238636",
-    "__color_scale_green_6" : "#196c2e",
-    "__color_scale_green_7" : "#0f5323",
-    "__color_scale_green_8" : "#033a16",
-    "__color_scale_green_9" : "#04260f",
-    "__color_scale_yellow_0" : "#f8e3a1",
-    "__color_scale_yellow_1" : "#f2cc60",
-    "__color_scale_yellow_2" : "#e3b341",
-    "__color_scale_yellow_3" : "#d29922",
-    "__color_scale_yellow_4" : "#bb8009",
-    "__color_scale_yellow_5" : "#9e6a03",
-    "__color_scale_yellow_6" : "#845306",
-    "__color_scale_yellow_7" : "#693e00",
-    "__color_scale_yellow_8" : "#4b2900",
-    "__color_scale_yellow_9" : "#341a00",
-    "__color_scale_orange_0" : "#ffdfb6",
-    "__color_scale_orange_1" : "#ffc680",
-    "__color_scale_orange_2" : "#ffa657",
-    "__color_scale_orange_3" : "#f0883e",
-    "__color_scale_orange_4" : "#db6d28",
-    "__color_scale_orange_5" : "#bd561d",
-    "__color_scale_orange_6" : "#9b4215",
-    "__color_scale_orange_7" : "#762d0a",
-    "__color_scale_orange_8" : "#5a1e02",
-    "__color_scale_orange_9" : "#3d1300",
-    "__color_scale_red_0" : "#ffdcd7",
-    "__color_scale_red_1" : "#ffc1ba",
-    "__color_scale_red_2" : "#ffa198",
-    "__color_scale_red_3" : "#ff7b72",
-    "__color_scale_red_4" : "#f85149",
-    "__color_scale_red_5" : "#da3633",
-    "__color_scale_red_6" : "#b62324",
-    "__color_scale_red_7" : "#8e1519",
-    "__color_scale_red_8" : "#67060c",
-    "__color_scale_red_9" : "#490202",
-    "__color_scale_purple_0" : "#eddeff",
-    "__color_scale_purple_1" : "#e2c5ff",
-    "__color_scale_purple_2" : "#d2a8ff",
-    "__color_scale_purple_3" : "#bc8cff",
-    "__color_scale_purple_4" : "#a371f7",
-    "__color_scale_purple_5" : "#8957e5",
-    "__color_scale_purple_6" : "#6e40c9",
-    "__color_scale_purple_7" : "#553098",
-    "__color_scale_purple_8" : "#3c1e70",
-    "__color_scale_purple_9" : "#271052",
-    "__color_scale_pink_0" : "#ffdaec",
-    "__color_scale_pink_1" : "#ffbedd",
-    "__color_scale_pink_2" : "#ff9bce",
-    "__color_scale_pink_3" : "#f778ba",
-    "__color_scale_pink_4" : "#db61a2",
-    "__color_scale_pink_5" : "#bf4b8a",
-    "__color_scale_pink_6" : "#9e3670",
-    "__color_scale_pink_7" : "#7d2457",
-    "__color_scale_pink_8" : "#5e103e",
-    "__color_scale_pink_9" : "#42062a",
     "__color_scale_coral_0" : "#FFDDD2",
     "__color_scale_coral_1" : "#FFC2B2",
     "__color_scale_coral_2" : "#FFA28B",
@@ -434,20 +342,111 @@ defaultColorScheme = {
     "__color_scale_coral_7" : "#872012",
     "__color_scale_coral_8" : "#640D04",
     "__color_scale_coral_9" : "#460701",
-    "__color_workflow_card_header_shadow" : "rgba(27, 31, 35, 0.04)",
-    "__color_calendar_halloween_graph_day_L1_bg" : "#631c03",
-    "__color_calendar_halloween_graph_day_L2_bg" : "#bd561d",
-    "__color_calendar_halloween_graph_day_L3_bg" : "#fa7a18",
-    "__color_calendar_halloween_graph_day_L4_bg" : "#fddf68",
-    "__color_calendar_graph_day_border" : "rgba(27, 31, 35, 0.06)",
-    "__color_calendar_graph_day_L1_bg" : "#0e4429",
-    "__color_calendar_graph_day_L2_bg" : "#006d32",
-    "__color_calendar_graph_day_L3_bg" : "#26a641",
-    "__color_calendar_graph_day_L4_bg" : "#39d353",
-    "__color_calendar_graph_day_L1_border" : "rgba(255, 255, 255, 0.05)",
-    "__color_calendar_graph_day_L2_border" : "rgba(255, 255, 255, 0.05)",
-    "__color_calendar_graph_day_L3_border" : "rgba(255, 255, 255, 0.05)",
-    "__color_calendar_graph_day_L4_border" : "rgba(255, 255, 255, 0.05)"
+    "__color_scale_gray_0" : "#f0f6fc",
+    "__color_scale_gray_1" : "#c9d1d9",
+    "__color_scale_gray_2" : "#b1bac4",
+    "__color_scale_gray_3" : "#8b949e",
+    "__color_scale_gray_4" : "#6e7681",
+    "__color_scale_gray_5" : "#484f58",
+    "__color_scale_gray_6" : "#30363d",
+    "__color_scale_gray_7" : "#21262d",
+    "__color_scale_gray_8" : "#161b22",
+    "__color_scale_gray_9" : "#0d1117",
+    "__color_scale_green_0" : "#aff5b4",
+    "__color_scale_green_1" : "#7ee787",
+    "__color_scale_green_2" : "#56d364",
+    "__color_scale_green_3" : "#3fb950",
+    "__color_scale_green_4" : "#2ea043",
+    "__color_scale_green_5" : "#238636",
+    "__color_scale_green_6" : "#196c2e",
+    "__color_scale_green_7" : "#0f5323",
+    "__color_scale_green_8" : "#033a16",
+    "__color_scale_green_9" : "#04260f",
+    "__color_scale_orange_0" : "#ffdfb6",
+    "__color_scale_orange_1" : "#ffc680",
+    "__color_scale_orange_2" : "#ffa657",
+    "__color_scale_orange_3" : "#f0883e",
+    "__color_scale_orange_4" : "#db6d28",
+    "__color_scale_orange_5" : "#bd561d",
+    "__color_scale_orange_6" : "#9b4215",
+    "__color_scale_orange_7" : "#762d0a",
+    "__color_scale_orange_8" : "#5a1e02",
+    "__color_scale_orange_9" : "#3d1300",
+    "__color_scale_pink_0" : "#ffdaec",
+    "__color_scale_pink_1" : "#ffbedd",
+    "__color_scale_pink_2" : "#ff9bce",
+    "__color_scale_pink_3" : "#f778ba",
+    "__color_scale_pink_4" : "#db61a2",
+    "__color_scale_pink_5" : "#bf4b8a",
+    "__color_scale_pink_6" : "#9e3670",
+    "__color_scale_pink_7" : "#7d2457",
+    "__color_scale_pink_8" : "#5e103e",
+    "__color_scale_pink_9" : "#42062a",
+    "__color_scale_purple_0" : "#eddeff",
+    "__color_scale_purple_1" : "#e2c5ff",
+    "__color_scale_purple_2" : "#d2a8ff",
+    "__color_scale_purple_3" : "#bc8cff",
+    "__color_scale_purple_4" : "#a371f7",
+    "__color_scale_purple_5" : "#8957e5",
+    "__color_scale_purple_6" : "#6e40c9",
+    "__color_scale_purple_7" : "#553098",
+    "__color_scale_purple_8" : "#3c1e70",
+    "__color_scale_purple_9" : "#271052",
+    "__color_scale_red_0" : "#ffdcd7",
+    "__color_scale_red_1" : "#ffc1ba",
+    "__color_scale_red_2" : "#ffa198",
+    "__color_scale_red_3" : "#ff7b72",
+    "__color_scale_red_4" : "#f85149",
+    "__color_scale_red_5" : "#da3633",
+    "__color_scale_red_6" : "#b62324",
+    "__color_scale_red_7" : "#8e1519",
+    "__color_scale_red_8" : "#67060c",
+    "__color_scale_red_9" : "#490202",
+    "__color_scale_white" : "#ffffff",
+    "__color_scale_yellow_0" : "#f8e3a1",
+    "__color_scale_yellow_1" : "#f2cc60",
+    "__color_scale_yellow_2" : "#e3b341",
+    "__color_scale_yellow_3" : "#d29922",
+    "__color_scale_yellow_4" : "#bb8009",
+    "__color_scale_yellow_5" : "#9e6a03",
+    "__color_scale_yellow_6" : "#845306",
+    "__color_scale_yellow_7" : "#693e00",
+    "__color_scale_yellow_8" : "#4b2900",
+    "__color_scale_yellow_9" : "#341a00",
+    "__color_search_keyword_hl" : "rgba(210, 153, 34, 0.4)",
+    "__color_select_menu_backdrop_border" : "#484f58",
+    "__color_select_menu_tap_focus_bg" : "#0c2d6b",
+    "__color_select_menu_tap_highlight" : "rgba(48, 54, 61, 0.5)",
+    "__color_severe_emphasis" : "#bd561d",
+    "__color_severe_fg" : "#db6d28",
+    "__color_severe_muted" : "rgba(219, 109, 40, 0.4)",
+    "__color_severe_subtle" : "rgba(219, 109, 40, 0.15)",
+    "__color_shadow_extra_large" : "0 12px 48px #010409",
+    "__color_shadow_large" : "0 8px 24px #010409",
+    "__color_shadow_medium" : "0 3px 6px #010409",
+    "__color_shadow_small" : "0 0 transparent",
+    "__color_sidenav_selected_bg" : "#21262d",
+    "__color_sponsors_emphasis" : "#bf4b8a",
+    "__color_sponsors_fg" : "#db61a2",
+    "__color_sponsors_muted" : "rgba(219, 97, 162, 0.4)",
+    "__color_sponsors_subtle" : "rgba(219, 97, 162, 0.15)",
+    "__color_success_emphasis" : "#238636",
+    "__color_success_fg" : "#3fb950",
+    "__color_success_muted" : "rgba(46, 160, 67, 0.4)",
+    "__color_success_subtle" : "rgba(46, 160, 67, 0.15)",
+    "__color_switch_knob_checked_bg" : "#1f6feb",
+    "__color_switch_knob_checked_disabled_bg" : "#484f58",
+    "__color_switch_track_bg" : "#010409",
+    "__color_switch_track_border" : "#6e7681",
+    "__color_switch_track_checked_active_bg" : "rgba(31, 111, 235, 0.65)",
+    "__color_switch_track_checked_bg" : "rgba(31, 111, 235, 0.35)",
+    "__color_switch_track_checked_border" : "#58a6ff",
+    "__color_switch_track_checked_hover_bg" : "rgba(31, 111, 235, 0.5)",
+    "__color_timeline_badge_bg" : "#21262d",
+    "__color_topic_tag_border" : "rgba(0, 0, 0, 0)",
+    "__color_underlinenav_border_hover" : "rgba(110, 118, 129, 0.4)",
+    "__color_underlinenav_icon" : "#6e7681",
+    "__color_workflow_card_header_shadow" : "rgba(27, 31, 35, 0.04)"
   };
   
 initialSettings = Object.keys(defaultColorScheme);
diff --git a/public/pint-css.css b/public/pint-css.css
index 6c0baee..f4fd2ca 100644
--- a/public/pint-css.css
+++ b/public/pint-css.css
@@ -440,6 +440,7 @@
     --color-calendar-halloween-graph-day-L4-bg: initial !important;
     --color-calendar-graph-day-bg: initial !important;
     --color-calendar-graph-day-border: initial !important;
+    --color-calendar-graph-day-bg : initial !important;
     --color-calendar-graph-day-L1-bg: initial !important;
     --color-calendar-graph-day-L2-bg: initial !important;
     --color-calendar-graph-day-L3-bg: initial !important;
@@ -452,4 +453,21 @@
 
 html, body {
     visibility: hidden !important
+}
+
+.Progress-item {
+    background-color: var(--color-calendar-graph-day-L4-bg) !important;
+}
+
+.js-highlight-blob {
+    fill:  var(--color-calendar-graph-day-L3-bg) !important;
+    stroke: var(--color-calendar-graph-day-L4-bg) !important;
+}
+
+a,p {
+    color: var(--color-scale-gray-1) !important;
+}
+
+span {
+    color: var(--color-scale-gray-0) !important;
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index db508bd..d123fae 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,7 +9,7 @@ export default function App() {
   const [isOptionsUi, setOptionsUI] = useState(window.innerWidth > 375);
 
   const updateMedia = () => {
-    setOptionsUI(window.innerWidth > 375);
+    setOptionsUI(window.innerWidth > 475);
   };
 
   useEffect(() => {
diff --git a/src/components/global/CardTitle.tsx b/src/components/global/CardTitle.tsx
index cef9b6b..f6fd637 100644
--- a/src/components/global/CardTitle.tsx
+++ b/src/components/global/CardTitle.tsx
@@ -4,13 +4,14 @@ import "../../assets/styles/App.css";
 interface Props {
     name: string,
     color?: string,
+    textcolor?: string | "#ffffff",
 }
 
 export default function CardTitle(props: Props) {
-    const { name,color } = props;
+    const { name,color, textcolor } = props;
    return(
-    <div className="flex-start align-left text-l p-1">
-          <p>{name} {color}</p>
+    <div style={{ backgroundColor: textcolor }} className="flex-start align-left text-l p-1 rounded-t-lg">
+          <p className="text-bold">{name} {color}</p>
         </div>
    );  
 }
\ No newline at end of file
diff --git a/src/components/options/ChangeCard.tsx b/src/components/options/ChangeCard.tsx
new file mode 100644
index 0000000..fffdd5a
--- /dev/null
+++ b/src/components/options/ChangeCard.tsx
@@ -0,0 +1,77 @@
+import react, { MouseEventHandler } from "react";
+import "../../assets/styles/App.css";
+import { HexColorInput, HexColorPicker } from "react-colorful";
+import { TextField } from "@mui/material";
+import { IoIosBrush } from "react-icons/io";
+import Preview from "../global/Preview";
+import CardTitle from "../global/CardTitle";
+import {
+  pintSet,
+  pintSetNoReload,
+  updateMultiple,
+  pintGetUpdate,
+} from "../../methods/helper";
+import * as quickScheme from "../../methods/quickScheme";
+import {
+  bgGen,
+  generateAccent,
+  updateViaQuickScheme,
+} from "../../methods/schemeGen";
+import { bgcolor } from "@mui/system";
+
+var defaultValue = "#c0ffee";
+
+interface Props {
+  settingName: string;
+  colorPickerColor: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+  };
+}
+
+export default function ChangeCard(props: Props) {
+  const { settingName, colorPickerColor } = props;
+
+  var settingReadable = settingName
+    .replace(/_/g, " ")
+    .replace(/color/g, "")
+    .trim();
+
+  react.useLayoutEffect(() => {
+    pintGetUpdate(settingName, setCurrent);
+  });
+
+  const [current, setCurrent] = react.useState(`${defaultValue}`);
+
+  function updateColor() {
+    setCurrent(JSON.stringify(colorPickerColor));
+    pintSetNoReload(settingName, colorPickerColor);
+  }
+
+  function updateColorExplicitly(value: string) {
+    setCurrent(value);
+    pintSetNoReload(settingName, value);
+  }
+
+  return (
+    <div className="pint flex flex-row w-[260px] text-center">
+      <div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
+        <CardTitle name={current} textcolor={current} />
+        <CardTitle name={settingReadable} />
+            <div className="flex flex-row justify-center justify-items-center">
+              <div className="flex align-middle justify-content p-1">
+                <input id="aaa" type="text" className="p-2 text-center w-full" placeholder="insert replacement value" onChange={(e) => updateColorExplicitly(e.target.value)}  />
+              </div>
+          <button
+            className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mx-2 my-1 rounded-full text-white"
+            onClick={updateColor}
+          >
+            <IoIosBrush className="text-xl p-1 text-white" />
+          </button>
+            </div>
+          </div>
+        </div>
+  );
+}
diff --git a/src/components/options/Converter.tsx b/src/components/options/Converter.tsx
new file mode 100644
index 0000000..66934da
--- /dev/null
+++ b/src/components/options/Converter.tsx
@@ -0,0 +1,37 @@
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  NativeSelect,
+  Select,
+  Switch,
+} from "@mui/material";
+import react from "react";
+import "../../assets/styles/App.css";
+import Preview from "../global/Preview";
+
+export default function Converter() {
+  return (
+    <div className="flex flex-col rounded-lg mt-2 mx-3 p-1 bg-white">
+      <div className=" bg-whiteflex-start align-left text-l p-1">
+        <p>hex-rgba converter</p>
+        <div className="flex-col">
+          <div className="flex flex-row justify-between items-center">
+            <p className="flex-start my-1">view global user pints?</p>
+            <Switch defaultChecked size="small" />
+          </div>
+            <form className="flex flex-row justify-between items-center" action="#">
+              <label>select color scheme: </label>
+              <div>
+                <select name="colorschemes" id="lang" defaultValue="1">
+                  <option value="0">Solarized Dark</option>
+                  <option value="1">Github Dark</option>
+                  <option value="2">Github Light</option>
+                </select>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+  );
+}
diff --git a/src/components/options/Header.tsx b/src/components/options/Header.tsx
index f12c0e5..c3aa4ea 100644
--- a/src/components/options/Header.tsx
+++ b/src/components/options/Header.tsx
@@ -5,7 +5,7 @@ import { IoMdSettings } from "react-icons/io";
 
 export default function Header() {
   return (
-          <div className="flex flex-row rounded-lg mb-1 m-2 mx-3 p-1  justify-between items-center">
+          <div className="flex flex-row rounded-lg mb-1 m-2 mx-3 p-1 justify-between items-center">
               <div className="flex flex-row">
                 <img src={logo} className="flex-none w-12" alt="logo" />
                 <div className="flex-col p-1 text-white">
diff --git a/src/components/options/QuickChange.tsx b/src/components/options/QuickChange.tsx
new file mode 100644
index 0000000..55bbca2
--- /dev/null
+++ b/src/components/options/QuickChange.tsx
@@ -0,0 +1,35 @@
+import react, { MouseEventHandler } from "react";
+import "../../assets/styles/App.css";
+import { HexColorInput, HexColorPicker } from "react-colorful";
+import { TextField } from "@mui/material";
+import { IoIosBrush } from "react-icons/io";
+import Preview from "../global/Preview";
+import CardTitle from "../global/CardTitle";
+import { pintSet, pintSetNoReload, updateMultiple, pintGetUpdate } from "../../methods/helper";
+import * as quickScheme from "../../methods/quickScheme";
+import { bgGen, generateAccent, updateViaQuickScheme, } from "../../methods/schemeGen";
+import { bgcolor } from "@mui/system";
+
+var defaultValue = "#c0ffee" 
+
+export default function QuickChange() {
+
+  react.useLayoutEffect(() => {
+  }) 
+
+  const [color, setColor] = react.useState(`${defaultValue}`);
+
+  return (
+    <div className="pint flex flex-row  mb-2 mt-1 mx-2 text-center">
+      <div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
+      <div className="flex flex-row justify-content text-center justify-center">
+          <CardTitle name="color picker - " />
+          <HexColorInput style={{ width: 40, textAlign: "center"}} color={color} onChange={setColor} />
+        </div>
+        <div className="flex justify-content p-1">
+          <HexColorPicker style={{ width: 258, height: 258 }} color={color} onChange={setColor} />
+        </div>
+      </div>
+      </div>
+  );
+}
diff --git a/src/components/popup/QuickChange.tsx b/src/components/popup/QuickChange.tsx
index 8e23531..bd926b2 100644
--- a/src/components/popup/QuickChange.tsx
+++ b/src/components/popup/QuickChange.tsx
@@ -1,103 +1,136 @@
 import react, { MouseEventHandler } from "react";
 import "../../assets/styles/App.css";
-import { HexColorPicker } from "react-colorful";
+import { HexColorPicker, HexColorInput } from "react-colorful";
 import { TextField } from "@mui/material";
 import { IoIosBrush } from "react-icons/io";
 import Preview from "../global/Preview";
 import CardTitle from "../global/CardTitle";
-import { pintSet } from "../../methods/helper";
+import { pintSet, pintSetNoReload, updateMultiple, pintGetUpdate } from "../../methods/helper";
+import * as quickScheme from "../../methods/quickScheme";
+import { bgGen, generateAccent, updateViaQuickScheme, } from "../../methods/schemeGen";
+import { bgcolor } from "@mui/system";
 
-var ac = "#ffffff" 
-var bc = "#ffffff";
+var defaultValue = "#c0ffee" 
 
 export default function QuickChange() {
-  
-  function withEvent(func: Function): React.ChangeEventHandler<any> {
-    return (event: React.ChangeEvent<any>) => {
-      const { target } = event;
-      func(target.value);
-    };
-  }
-  
 
-  function pintGet(setting: string, func: Function) {
-    chrome.storage.local.get([`${setting}`], function (result) {
-      func(result[`${setting}`]);
-    })
-  }
-
-  
   react.useLayoutEffect(() => {
-    pintGet("__color_calendar_graph_day_L4_bg", setAColor);
-    pintGet("__color_canvas_default", setBgColor);
-    // pintGet("__color_canvas_default");
+    pintGetUpdate("__color_canvas_default", setBgColor);
+    pintGetUpdate("__color_calendar_graph_day_L4_bg", setL4)
+    pintGetUpdate("__color_calendar_graph_day_L3_bg", setL3)
+    pintGetUpdate("__color_calendar_graph_day_L2_bg", setL2)
+    pintGetUpdate("__color_calendar_graph_day_L1_bg", setL1)
+    pintGetUpdate("__color_accent_emphasis", setAccentEmphasis)
+    pintGetUpdate("__color_btn_primary_bg", setButtonPrimary)
+    pintGetUpdate("__color_btn_primary_hover_bg", setHoverButton)
+    pintGetUpdate("__color_btn_primary_active_bg", setActiveButton)
+    pintGetUpdate("__color_btn_primary_focus_bg", setClickedButton)
+    pintGetUpdate("__color_btn_primary_disabled_bg", setDisabledButton)
   }) 
 
-  const [aColor, setAColor] = react.useState(`${ac}`);
-  const [bgColor, setBgColor] = react.useState(`${bc}`);
-  const [color, setColor] = react.useState(`${ac}`);
+  const [bgColor, setBgColor] = react.useState(`${defaultValue}`);
+  const [color, setColor] = react.useState(`${defaultValue}`);
+
+  // l1-l4 and other used shit
+  const [l1, setL1] = react.useState(`${defaultValue}`);
+  const [l2, setL2] = react.useState(`${defaultValue}`);
+  const [l3, setL3] = react.useState(`${defaultValue}`);
+  const [l4, setL4] = react.useState(`${defaultValue}`);
+  const [activeButton, setActiveButton] = react.useState(`${defaultValue}`);
+  const [buttonPrimary, setButtonPrimary] = react.useState(`${defaultValue}`);
+  const [accentEmphasis, setAccentEmphasis] = react.useState(`${defaultValue}`);
+  const [disabledButton, setDisabledButton] = react.useState(`${defaultValue}`);
+  const [hoverButton, setHoverButton] = react.useState(`${defaultValue}`);
+  const [clickedButton, setClickedButton] = react.useState(`${defaultValue}`);
 
   function paintAccent() {
-    setAColor(color);
-    pintSet("__color_calendar_graph_day_L4_bg", color);
+    updateViaQuickScheme(color);
+    setL4(color);
   }
+
   function paintBg() {
     setBgColor(color);
-    pintSet("__color_canvas_default", color);
+    bgGen(color);
   }
 
   return (
     <div className="pint flex flex-row  mb-2 mt-1 mx-2">
       <div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
-        <CardTitle name="color picker - " color={color} />
+        <div className="flex flex-row justify-content text-center justify-center">
+          <CardTitle name="color picker - " />
+          <HexColorInput style={{ width: 40, textAlign: "center"}} color={color} onChange={setColor} />
+        </div>
         <div className="flex justify-content p-1">
           <HexColorPicker color={color} onChange={setColor} />
         </div>
-        <div className="flex-start flex flex-row items-center text-l my-2 p-1">
+      </div>
+      <div className="flex-grow flex-col rounded-lg m-1 p-1 bg-white">
+        <CardTitle name="theme painter" />
+        <div className="flex-start flex flex-row -center text-l mt-2 mb-1 w-[165px] p-1">
           <TextField
-            id="aColorHex"
+            id="acentColor"
             label="accent color"
-            value={aColor}
-            onChange={withEvent(setAColor)}
+            disabled={true}
+            value={l4}
             variant="outlined"
             size="small"
           />
           <button
-            className="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-5 m-2 rounded-full"
+            className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mb-2 mx-2 rounded-full"
             onClick={paintAccent}
           >
             <IoIosBrush className="text-xl p-0 text-white" />
           </button>
         </div>
-        <div className="flex-start flex flex-row -center text-l mt-2 mb-1 w-[210px] p-1">
+        <div className="flex-start flex flex-row -center text-l mt-2 mb-1 w-[165px] p-1">
           <TextField
             id="bgColorHex"
-            label="background color"
+            label="background"
+            disabled={true}
             value={bgColor}
-            onChange={withEvent(setBgColor)}
             variant="outlined"
             size="small"
           />
           <button
-            className="bg-violet-500 hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-5 mx-2 rounded-full"
+            className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mb-2 mx-2 rounded-full"
             onClick={paintBg}
           >
             <IoIosBrush className="text-xl p-0 text-white" />
           </button>
         </div>
-      </div>
-      <div className="flex-grow flex-col rounded-lg m-1 p-1 bg-white">
-        <CardTitle name="theme preview" />
-        <Preview name="main accent" color={aColor} />
-        <Preview name="graph L2" color={aColor} modifier="99" />
-        <Preview name="graph L3" color={aColor} modifier="66" />
-        <Preview name="graph L4" color={aColor} modifier="33" />
-        <Preview name="hover" color={aColor} modifier="88" />
-        <Preview name="disabled" color={aColor} modifier="77" />
-        <Preview name="clicked" color={aColor} modifier="44" />
-        <Preview name="active" color={aColor} modifier="55" />
-        <Preview name="background" color={bgColor} />
-        <Preview name="bg-accent" color={bgColor} modifier="99" />
+        <div className="flex-start flex flex-row -center text-l mt-2 mb-1 w-[165px] p-1">
+          <TextField
+            id="textColorHex"
+            label="text color"
+            disabled={true}
+            value={bgColor}
+            variant="outlined"
+            size="small"
+          />
+          <button
+            className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mb-2 mx-2 rounded-full"
+            onClick={paintBg}
+          >
+            <IoIosBrush className="text-xl p-0 text-white" />
+          </button>
+        </div>
+        {/* <div className="flex flex-row justify-center">
+        <div
+        style={{ backgroundColor: activeButton }}
+        className="w-5 h-5 p-1 m-1 rounded-full"
+      ></div>
+        <div
+        style={{ backgroundColor: accentEmphasis }}
+        className="w-5 h-5 p-1 m-1 rounded-full"
+      ></div>
+      <div
+        style={{ backgroundColor: bgColor }}
+        className="w-5 h-5 p-1 m-1 rounded-full"
+      ></div>
+        </div> */}
+        <div className="flex flex-row justify-center">
+          <p className="text-center">Made with ❤️ - fuwa</p>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/popup/QuickSettings.tsx b/src/components/popup/QuickSettings.tsx
index 1f86dad..41ad057 100644
--- a/src/components/popup/QuickSettings.tsx
+++ b/src/components/popup/QuickSettings.tsx
@@ -23,7 +23,7 @@ export default function QuickSettings() {
             <form className="flex flex-row justify-between items-center" action="#">
               <label>select color scheme: </label>
               <div>
-                <select name="colorschemes" id="lang" value="1">
+                <select name="colorschemes" id="lang" defaultValue="1">
                   <option value="0">Solarized Dark</option>
                   <option value="1">Github Dark</option>
                   <option value="2">Github Light</option>
diff --git a/src/methods/helper.js b/src/methods/helper.js
index 3617be1..0c47231 100644
--- a/src/methods/helper.js
+++ b/src/methods/helper.js
@@ -8,6 +8,14 @@ export function pintSet( setting, value ) {
     chrome.tabs.reload();
 }
 
+export function pintSetNoReload( setting, value ) {
+  var pintKey = {};
+  pintKey[`${setting}`] = value;
+  var settingVar = setting.replace(/_/g, "-");
+  chrome.storage.local.set(pintKey);
+}
+
+
 export function pintGet(setting, cb) {
   var output = "";
   chrome.storage.local.get([`${setting}`], function (result) {
@@ -15,6 +23,18 @@ export function pintGet(setting, cb) {
     cb(output);
   })
 }
+
+export function pintGetUpdate(setting, func) {
+  chrome.storage.local.get([`${setting}`], function (result) {
+    func(result[`${setting}`]);
+  })
+}
+
+export function updateMultiple(array, color) {
+  for (var i = 0; i < array.length; i++) {
+    pintSetNoReload(array[i], color);
+  }
+}
 // export function pintGet(setting) {
 //   pintGetInner(setting, finalReturn);
 //   alert(`returned value: ${value}`);
diff --git a/src/methods/predefined/githubdark.js b/src/methods/predefined/githubdark.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/methods/quickScheme.js b/src/methods/quickScheme.js
new file mode 100644
index 0000000..7381b56
--- /dev/null
+++ b/src/methods/quickScheme.js
@@ -0,0 +1,235 @@
+// background
+
+export var ScaleBlack = [
+    "__color_checks_bg",
+    "__color_switch_track_bg",
+    "__color_canvas_inset",
+    "__color_shadow_medium",
+    "__color_shadow_large",
+    "__color_shadow_extra_large",
+    "__color_scale_black",
+  ];
+
+export var BG9 = [
+  "__color_page_header_bg",
+  "__color_codemirror_bg",
+  "__color_codemirror_gutters_bg",
+  "__color_codemirror_guttermarker_text",
+  "__color_codemirror_lines_bg",
+  "_color_codemirror_lines_bg",
+  "__color_checks_ans_Iblack",
+  "__color_project_header_bg",
+  "__color_avatar_child_shadow",
+  "__color_header_search_bg",
+  "__color_btn_outline_disabled_bg",
+  "__color_btn_danger_disabled_bg",
+  "__color_canvas_default",
+  "__color_scale_gray_9",
+];
+
+export var BG8 = [
+  "__color_checks_input_bg",
+  "__color_checks_dropdown_bg",
+  "__color_checks_step_header_open_bg",
+  "__color_checks_ans_Iblack_bright",
+  "__color_project_sidebar_bg",
+  "__color_project_gradient_in",
+  "__color_header_bg",
+  "__color_menu_bg_active",
+  "__color_btn_selected_bg",
+  "__color_canvas_overlay",
+  "__color_canvas_subtle",
+  "__color_scale_gray_8",
+];
+
+export var BG7 = [
+  "__color_checks_header_border",
+  "__color_avatar_stack_fade_more",
+  "__color_sidenav_selected_bg",
+  "__color_timeline_badge_bg",
+  "__color_btn_bg",
+  "__color_btn_focus_bg",
+  "__color_border_muted",
+  "__color_scale_gray_7",
+];
+
+export var BG6 = [
+  "__color_checks_dropdown_border",
+  "__color_avatar_stack_fade",
+  "__color_overlay_shadow",
+  "__color_header_search_border",
+  "__color_btn_hover_bg",
+  "__color_btn_counter_bg",
+  "__color_btn_outline_hover_bg",
+  "__color_border_default",
+  "__color_scale_gray_6",
+];
+
+export var BG5 = [
+"__color_prettylights_syntax_sublimelinter_gutter_mark",
+"__color_select_menu_backdrop_border",
+"__color_ans_Iblack",
+"__color_switch_knob_checked_disabled_bg",
+"__color_primer_fg_disabled",
+"__color_scale_gray_5",
+]
+
+export var BG4 = [
+"__color_codemirror_guttermarker_subtle_text",
+"__color_checks_input_placeholder_text",
+"__color_checks_line_num_text",
+"__color_checks_line_timestamp_text",
+"__color_checks_logline_num_text",
+"__color_checks_logline_error_num_text",
+"__color_checks_ans_Igray",
+"__color_ans_Iblack_bright",
+"__color_ans_Igray",
+"__color_btn_active_border",
+"__color_underlinenav_icon",
+"__color_switch_track_border",
+"__color_fg_subtle",
+"__color_neutral_emphasis_plus",
+"__color_neutral_emphasis",
+"__color_scale_gray_4",
+]
+
+export var BG3 = [
+    "__color_diff_blob_expander_icon",
+    "__color_prettylights_syntax_comment",
+    "__color_prettylights_syntax_brackethighlighter_angle",
+    "__color_codemirror_linenumber_text",
+    "__color_codemirror_syntax_comment",
+    "__color_checks_text_secondary",
+    "__color_checks_btn_icon",
+    "__color_checks_input_text",
+    "__color_checks_donut_neutral",
+    "__color_checks_header_label_text",
+    "__color_checks_header_icon",
+    "__color_checks_line_text",
+    "__color_checks_gate_text",
+    "__color_checks_logline_text",
+    "__color_checks_logline_error_text",
+    "__color_checks_logline_warning_text",
+    "__color_header_divider",
+    "__color_btn_hover_border",
+    "__color_btn_focus_border",
+    "__color_fg_muted",
+    "__color_scale_gray_3",
+]
+
+export var BG2 = [
+    "__color_checks_ans_Iwhite",
+    "__color_checks_ans_Iwhite_bright",
+    "__color_ans_Iwhite",
+    "__color_scale_gray_2",
+]
+
+export var BG1 = [
+    "__color_diff_blob_addition_num_text",
+    "__color_diff_blob_addition_fg",
+    "__color_diff_blob_deletion_num_text",
+    "__color_diff_blob_deletion_fg",
+    "__color_prettylights_syntax_storage_modifier_import",
+    "__color_prettylights_syntax_markup_italic",
+    "__color_prettylights_syntax_markup_bold",
+    "__color_prettylights_syntax_markup_ignored_text",
+    "__color_codemirror_text",
+    "__color_codemirror_cursor",
+    "__color_codemirror_matchingbracket_text",
+    "__color_checks_text_primary",
+    "__color_checks_btn_hover_icon",
+    "__color_checks_input_focus_text",
+    "__color_checks_dropdown_text",
+    "__color_checks_dropdown_hover_text",
+    "__color_checks_dropdown_btn_hover_text",
+    "__color_checks_header_label_open_text",
+    "__color_btn_text",
+    "__color_fg_default",
+    "__color_scale_gray_1",
+]
+
+export var BG0 = [
+    "__color_prettylights_syntax_invalid_illegal_text",
+    "__color_prettylights_syntax_carriage_return_text",
+    "__color_header_logo",
+    "__color_scale_gray_0",
+]
+
+// possibly text color/icon?
+
+export var ScaleWhite = [
+    "__color_checks_line_dt_fm_text",
+    "__color_ans_Iwhite_bright",
+    "__color_btn_primary_text",
+    "__color_btn_primary_icon",
+    "__color_btn_outline_selected_text",
+    "__color_btn_danger_hover_text",
+    "__color_btn_danger_hover_icon",
+    "__color_btn_danger_selected_text",
+    "__color_fg_on_emphasis",
+    "__color_scale_white",
+]
+
+// text color
+
+export var TextColor = [
+    "__color_scale_coral_9",
+]
+
+// accents
+
+// // blue_1
+// __color_prettylights_syntax_string
+// __color_prettylights_syntax_constant_other_reference_link
+// __color_codemirror_syntax_string
+// __color_scale_blue_1
+
+// // blue 2
+// __color_marketing_icon_primary
+// __color_prettylights_syntax_constant
+// __color_codemirror_syntax_constant
+// __color_codemirror_syntax_support
+// __color_checks_ans_Iblue_bright
+// __color_ans_Iblue_bright
+// __color_scale_blue_2
+
+// //blue 3
+// __color_checks_text_link
+// __color_checks_line_selected_num_text
+// __color_checks_logline_command_text
+// __color_checks_ans_Iblue
+// __color_ans_Iblue
+// __color_btn_outline_text
+// __color_btn_outline_hover_text
+// __color_switch_track_checked_border
+// __color_accent_fg
+// __color_scale_blue_3
+
+// // blue 5
+// __color_marketing_icon_secondary
+// __color_prettylights_syntax_markup_heading
+// __color_switch_knob_checked_bg
+// __color_accent_emphasis
+// __color_scale_blue_5
+
+// // blue 6
+// __color_prettylights_syntax_markup_ignored_bg
+// __color_scale_blue_6
+
+// // blue 7
+// __color_btn_outline_selected_bg
+// __color_scale_blue_7
+
+// // blue 8 
+// __color_select_menu_tap_focus_bg
+// __color_primer_shadow_focus
+// __color_scale_blue_8
+
+// // red 3
+// __color_scale_red_3
+// __color_action_list_item_danger_hover_text
+// __color_btn_danger_selected_border
+// __color_ans_Ired
+// __color_codemirror_syntax_keyword
+// __color_codemirror_syntax_storage
+// __color_prettylights_syntax_keyword
\ No newline at end of file
diff --git a/src/methods/schemeGen.js b/src/methods/schemeGen.js
new file mode 100644
index 0000000..9eede18
--- /dev/null
+++ b/src/methods/schemeGen.js
@@ -0,0 +1,76 @@
+/*global chrome*/
+import { pintGet, pintSet, pintGetUpdate, pintSetNoReload, updateMultiple } from './helper.js';
+import * as qs from './quickScheme.js';
+
+// function to convert hex to rgb
+export function hexToRgb(hex) {
+  var takenResult = hex;
+  var result = takenResult.replace(/#/g, "").match(/.{1,2}/g);
+  return result
+    ? {
+        r: parseInt(result[0], 16),
+        g: parseInt(result[1], 16),
+        b: parseInt(result[2], 16),
+      }
+    : null;
+}
+
+// function to convert rgb to hex
+export function rgbToHex(r, g, b) {
+  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+
+// generate array of hex color gradients given a single hex color
+export function generateHexGradients(hex) {
+  var rgb = hexToRgb(hex);
+  var hexGradients = [];
+  for (var i = 0; i < 6; i++) {
+    var r = rgb.r - i * 10;
+    var g = rgb.g - i * 10;
+    var b = rgb.b - i * 10;
+    hexGradients.push(rgbToHex(r, g, b));
+  }
+  return hexGradients;
+}
+
+export function generateAccent(hex, modifier) {
+  var rgb = hexToRgb(hex);
+  var r = rgb.r - modifier;
+  var b = rgb.b - modifier;
+  var g = rgb.g - modifier;
+  return rgbToHex(r, g, b);
+}
+
+export function updateViaQuickScheme(color) {
+  var gradient = generateHexGradients(color);
+  pintSetNoReload("__color_calendar_graph_day_L4_bg", `${gradient[0]}` + "ff");
+  pintSetNoReload("__color_calendar_graph_day_L3_bg", `${gradient[0]}` + "c5");
+  pintSetNoReload("__color_calendar_graph_day_L2_bg", `${gradient[0]}` + "8a");
+  pintSetNoReload("__color_calendar_graph_day_L1_bg", `${gradient[0]}` + "54");
+  pintSetNoReload("__color_accent_emphasis", gradient[4]);
+  pintSetNoReload("__color_btn_primary_bg", gradient[5]);
+  pintSetNoReload("__color_btn_primary_hover_bg", gradient[4]);
+  pintSetNoReload("__color_btn_primary_active_bg", gradient[4]);
+  pintSetNoReload("__color_btn_primary_focus_bg", gradient[4]);
+  pintSetNoReload("__color_btn_primary_disabled_bg", gradient[4]);
+  chrome.tabs.reload();
+}
+
+export function bgGen(color) {
+  updateMultiple(qs.BG9, color);
+  updateMultiple(qs.ScaleBlack, generateAccent(color, 10))
+  updateMultiple(qs.BG8, generateAccent(color, -10))
+  updateMultiple(qs.BG7, generateAccent(color, -20))
+  updateMultiple(qs.BG6, generateAccent(color, -30))
+  updateMultiple(qs.BG5, generateAccent(color, -50))
+  updateMultiple(qs.BG4, generateAccent(color, -70))
+  updateMultiple(qs.BG3, generateAccent(color, -90))
+  updateMultiple(qs.BG2, generateAccent(color, -110))
+  updateMultiple(qs.BG1, generateAccent("#ffffff", 0))
+  updateMultiple(qs.BG0, generateAccent(color, -130))
+  chrome.tabs.reload();
+}
+
+export function accentGen(color)  {
+
+}
\ No newline at end of file
diff --git a/src/methods/settings.js b/src/methods/settings.js
new file mode 100644
index 0000000..5c1b559
--- /dev/null
+++ b/src/methods/settings.js
@@ -0,0 +1,450 @@
+export const settings = {
+    "__color_accent_emphasis" : "#1f6feb",
+    "__color_accent_fg" : "#58a6ff",
+    "__color_accent_muted" : "rgba(56, 139, 253, 0.4)",
+    "__color_accent_subtle" : "rgba(56, 139, 253, 0.15)",
+    "__color_action_list_item_danger_active_bg" : "rgba(248, 81, 73, 0.24)",
+    "__color_action_list_item_danger_hover_bg" : "rgba(248, 81, 73, 0.16)",
+    "__color_action_list_item_danger_hover_text" : "#ff7b72",
+    "__color_action_list_item_default_active_bg" : "rgba(177, 186, 196, 0.2)",
+    "__color_action_list_item_default_active_border" : "rgba(0, 0, 0, 0)",
+    "__color_action_list_item_default_hover_bg" : "rgba(177, 186, 196, 0.12)",
+    "__color_action_list_item_default_hover_border" : "rgba(0, 0, 0, 0)",
+    "__color_action_list_item_default_selected_bg" : "rgba(177, 186, 196, 0.08)",
+    "__color_action_list_item_inline_divider" : "rgba(48, 54, 61, 0.48)",
+    "__color_ans_Iblack_bright" : "#6e7681",
+    "__color_ans_Iblack" : "#484f58",
+    "__color_ans_Iblue_bright" : "#79c0ff",
+    "__color_ans_Iblue" : "#58a6ff",
+    "__color_ans_Icyan_bright" : "#56d4dd",
+    "__color_ans_Icyan" : "#39c5cf",
+    "__color_ans_Igray" : "#6e7681",
+    "__color_ans_Igreen_bright" : "#56d364",
+    "__color_ans_Igreen" : "#3fb950",
+    "__color_ans_Imagenta_bright" : "#d2a8ff",
+    "__color_ans_Imagenta" : "#bc8cff",
+    "__color_ans_Ired_bright" : "#ffa198",
+    "__color_ans_Ired" : "#ff7b72",
+    "__color_ans_Iwhite_bright" : "#ffffff",
+    "__color_ans_Iwhite" : "#b1bac4",
+    "__color_ans_Iyellow_bright" : "#e3b341",
+    "__color_ans_Iyellow" : "#d29922",
+    "__color_attention_emphasis" : "#9e6a03",
+    "__color_attention_fg" : "#d29922",
+    "__color_attention_muted" : "rgba(187, 128, 9, 0.4)",
+    "__color_attention_subtle" : "rgba(187, 128, 9, 0.15)",
+    "__color_avatar_bg" : "rgba(255, 255, 255, 0.1)",
+    "__color_avatar_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_avatar_child_shadow" : "_2px _2px 0 #0d1117",
+    "__color_avatar_stack_fade_more" : "#21262d",
+    "__color_avatar_stack_fade" : "#30363d",
+    "__color_border_default" : "#30363d",
+    "__color_border_muted" : "#21262d",
+    "__color_border_subtle" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_active_bg" : "hsla(212, 12%, 18%, 1)",
+    "__color_btn_active_border" : "#6e7681",
+    "__color_btn_bg" : "#21262d",
+    "__color_btn_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_counter_bg" : "#30363d",
+    "__color_btn_danger_counter_bg" : "rgba(218, 54, 51, 0.1)",
+    "__color_btn_danger_disabled_bg" : "#0d1117",
+    "__color_btn_danger_disabled_counter_bg" : "rgba(218, 54, 51, 0.05)",
+    "__color_btn_danger_disabled_text" : "rgba(248, 81, 73, 0.5)",
+    "__color_btn_danger_focus_border" : "#f85149",
+    "__color_btn_danger_focus_shadow" : "0 0 0 3px rgba(248, 81, 73, 0.4)",
+    "__color_btn_danger_hover_bg" : "#da3633",
+    "__color_btn_danger_hover_border" : "#f85149",
+    "__color_btn_danger_hover_counter_bg" : "rgba(255, 255, 255, 0.2)",
+    "__color_btn_danger_hover_icon" : "#ffffff",
+    "__color_btn_danger_hover_inset_shadow" : "0 0 transparent",
+    "__color_btn_danger_hover_shadow" : "0 0 transparent",
+    "__color_btn_danger_hover_text" : "#ffffff",
+    "__color_btn_danger_icon" : "#f85149",
+    "__color_btn_danger_selected_bg" : "#b62324",
+    "__color_btn_danger_selected_border" : "#ff7b72",
+    "__color_btn_danger_selected_shadow" : "0 0 transparent",
+    "__color_btn_danger_selected_text" : "#ffffff",
+    "__color_btn_danger_text" : "#f85149",
+    "__color_btn_focus_bg" : "#21262d",
+    "__color_btn_focus_border" : "#8b949e",
+    "__color_btn_focus_shadow" : "0 0 0 3px rgba(139, 148, 158, 0.3)",
+    "__color_btn_hover_bg" : "#30363d",
+    "__color_btn_hover_border" : "#8b949e",
+    "__color_btn_inset_shadow" : "0 0 transparent",
+    "__color_btn_outline_counter_bg" : "rgba(31, 111, 235, 0.1)",
+    "__color_btn_outline_disabled_bg" : "#0d1117",
+    "__color_btn_outline_disabled_counter_bg" : "rgba(31, 111, 235, 0.05)",
+    "__color_btn_outline_disabled_text" : "rgba(88, 166, 255, 0.5)",
+    "__color_btn_outline_focus_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_outline_focus_shadow" : "0 0 0 3px rgba(17, 88, 199, 0.4)",
+    "__color_btn_outline_hover_bg" : "#30363d",
+    "__color_btn_outline_hover_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_outline_hover_counter_bg" : "rgba(255, 255, 255, 0.2)",
+    "__color_btn_outline_hover_inset_shadow" :  "inset 0 1px 0 rgba(255, 255, 255, 0.03)",
+    "__color_btn_outline_hover_shadow" : "0 1px 0 rgba(1, 4, 9, 0.1)",
+    "__color_btn_outline_hover_text" : "#58a6ff",
+    "__color_btn_outline_selected_bg" : "#0d419d",
+    "__color_btn_outline_selected_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_outline_selected_shadow" : "0 0 transparent",
+    "__color_btn_outline_selected_text" : "#ffffff",
+    "__color_btn_outline_text" : "#58a6ff",
+    "__color_btn_primary_bg" : "#238636",
+    "__color_btn_primary_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_primary_counter_bg" : "rgba(255, 255, 255, 0.2)",
+    "__color_btn_primary_disabled_bg" : "rgba(35, 134, 54, 0.6)",
+    "__color_btn_primary_disabled_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_primary_disabled_text" : "rgba(255, 255, 255, 0.5)",
+    "__color_btn_primary_focus_bg" : "#238636",
+    "__color_btn_primary_focus_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_primary_focus_shadow" : "0 0 0 3px rgba(46, 164, 79, 0.4)",
+    "__color_btn_primary_hover_bg" : "#2ea043",
+    "__color_btn_primary_hover_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_btn_primary_icon" : "#ffffff",
+    "__color_btn_primary_inset_shadow" : "0 0 transparent",
+    "__color_btn_primary_selected_bg" : "#238636",
+    "__color_btn_primary_selected_shadow" : "0 0 transparent",
+    "__color_btn_primary_shadow" : "0 0 transparent",
+    "__color_btn_primary_text" : "#ffffff",
+    "__color_btn_selected_bg" : "#161b22",
+    "__color_btn_shadow_active" : "inset 0 0.15em 0.3em rgba(1, 4, 9, 0.15)",
+    "__color_btn_shadow_input_focus" : "0 0 0 0.2em rgba(31, 111, 235, 0.3)",
+    "__color_btn_shadow" : "0 0 transparent",
+    "__color_btn_text" : "#c9d1d9",
+    "__color_calendar_graph_day_bg" : "rgba(0,0,0,0.1)",
+    "__color_calendar_graph_day_border" : "rgba(27, 31, 35, 0.06)",
+    "__color_calendar_graph_day_L1_bg" : "#0e4429",
+    "__color_calendar_graph_day_L1_border" : "rgba(255, 255, 255, 0.05)",
+    "__color_calendar_graph_day_L2_bg" : "#006d32",
+    "__color_calendar_graph_day_L2_border" : "rgba(255, 255, 255, 0.05)",
+    "__color_calendar_graph_day_L3_bg" : "#26a641",
+    "__color_calendar_graph_day_L3_border" : "rgba(255, 255, 255, 0.05)",
+    "__color_calendar_graph_day_L4_bg" : "#39d353",
+    "__color_calendar_graph_day_L4_border" : "rgba(255, 255, 255, 0.05)",
+    "__color_calendar_halloween_graph_day_L1_bg" : "#631c03",
+    "__color_calendar_halloween_graph_day_L2_bg" : "#bd561d",
+    "__color_calendar_halloween_graph_day_L3_bg" : "#fa7a18",
+    "__color_calendar_halloween_graph_day_L4_bg" : "#fddf68",
+    "__color_canvas_default_transparent" : "rgba(13, 17, 23, 0)",
+    "__color_canvas_default" : "#0d1117",
+    "__color_canvas_inset" : "#010409",
+    "__color_canvas_overlay" : "#161b22",
+    "__color_canvas_subtle" : "#161b22",
+    "__color_checks_ans_Iblack_bright" : "#161b22",
+    "__color_checks_ans_Iblack" : "#0d1117",
+    "__color_checks_ans_Iblue_bright" : "#79c0ff",
+    "__color_checks_ans_Iblue" : "#58a6ff",
+    "__color_checks_ans_Icyan_bright" : "#b3f0ff",
+    "__color_checks_ans_Icyan" : "#76e3ea",
+    "__color_checks_ans_Igray" : "#6e7681",
+    "__color_checks_ans_Igreen_bright" : "#56d364",
+    "__color_checks_ans_Igreen" : "#3fb950",
+    "__color_checks_ans_Imagenta_bright" : "#d2a8ff",
+    "__color_checks_ans_Imagenta" : "#bc8cff",
+    "__color_checks_ans_Ired_bright" : "#ffa198",
+    "__color_checks_ans_Ired" : "#ff7b72",
+    "__color_checks_ans_Iwhite_bright" : "#b1bac4",
+    "__color_checks_ans_Iwhite" : "#b1bac4",
+    "__color_checks_ans_Iyellow_bright" : "#e3b341",
+    "__color_checks_ans_Iyellow" : "#d29922",
+    "__color_checks_bg" : "#010409",
+    "__color_checks_btn_hover_bg" : "rgba(110, 118, 129, 0.1)",
+    "__color_checks_btn_hover_icon" : "#c9d1d9",
+    "__color_checks_btn_icon" : "#8b949e",
+    "__color_checks_container_border_width" : "1px",
+    "__color_checks_donut_error" : "#f85149",
+    "__color_checks_donut_neutral" : "#8b949e",
+    "__color_checks_donut_pending" : "#d29922",
+    "__color_checks_donut_success" : "#2ea043",
+    "__color_checks_dropdown_bg" : "#161b22",
+    "__color_checks_dropdown_border" : "#30363d",
+    "__color_checks_dropdown_btn_hover_bg" : "rgba(110, 118, 129, 0.1)",
+    "__color_checks_dropdown_btn_hover_text" : "#c9d1d9",
+    "__color_checks_dropdown_hover_bg" : "rgba(110, 118, 129, 0.1)",
+    "__color_checks_dropdown_hover_text" : "#c9d1d9",
+    "__color_checks_dropdown_shadow" : "rgba(1, 4, 9, 0.3)",
+    "__color_checks_dropdown_text" : "#c9d1d9",
+    "__color_checks_gate_bg" : "rgba(187, 128, 9, 0.15)",
+    "__color_checks_gate_text" : "#8b949e",
+    "__color_checks_gate_waiting_text" : "#d29922",
+    "__color_checks_header_border" : "#21262d",
+    "__color_checks_header_icon" : "#8b949e",
+    "__color_checks_header_label_open_text" : "#c9d1d9",
+    "__color_checks_header_label_text" : "#8b949e",
+    "__color_checks_input_bg" : "#161b22",
+    "__color_checks_input_focus_text" : "#c9d1d9",
+    "__color_checks_input_placeholder_text" : "#6e7681",
+    "__color_checks_input_shadow" : "0 0 0 1px (obj) => get_1.default(obj,  path)",
+    "__color_checks_input_text" : "#8b949e",
+    "__color_checks_line_dt_fm_bg" : "#9e6a03",
+    "__color_checks_line_dt_fm_text" : "#ffffff",
+    "__color_checks_line_hover_bg" : "rgba(110, 118, 129, 0.1)",
+    "__color_checks_line_num_text" : "#6e7681",
+    "__color_checks_line_selected_bg" : "rgba(56, 139, 253, 0.15)",
+    "__color_checks_line_selected_num_text" : "#58a6ff",
+    "__color_checks_line_text" : "#8b949e",
+    "__color_checks_line_timestamp_text" : "#6e7681",
+    "__color_checks_logline_command_text" : "#58a6ff",
+    "__color_checks_logline_debug_text" : "#a371f7",
+    "__color_checks_logline_error_bg" : "rgba(248, 81, 73, 0.15)",
+    "__color_checks_logline_error_num_text" : "#6e7681",
+    "__color_checks_logline_error_text" : "#8b949e",
+    "__color_checks_logline_num_text" : "#6e7681",
+    "__color_checks_logline_section_text" : "#3fb950",
+    "__color_checks_logline_text" : "#8b949e",
+    "__color_checks_logline_warning_bg" : "rgba(187, 128, 9, 0.15)",
+    "__color_checks_logline_warning_num_text" : "#d29922",
+    "__color_checks_logline_warning_text" : "#8b949e",
+    "__color_checks_run_border_width" : "1px",
+    "__color_checks_scrollbar_thumb_bg" : "rgba(110, 118, 129, 0.4)",
+    "__color_checks_step_error_text" : "#f85149",
+    "__color_checks_step_header_open_bg" : "#161b22",
+    "__color_checks_step_warning_text" : "#d29922",
+    "__color_checks_text_link" : "#58a6ff",
+    "__color_checks_text_primary" : "#c9d1d9",
+    "__color_checks_text_secondary" : "#8b949e",
+    "__color_closed_emphasis" : "#da3633",
+    "__color_closed_fg" : "#f85149",
+    "__color_closed_muted" : "rgba(248, 81, 73, 0.4)",
+    "__color_closed_subtle" : "rgba(248, 81, 73, 0.15)",
+    "__color_codemirror_activeline_bg" : "rgba(110, 118, 129, 0.1)",
+    "__color_codemirror_bg" : "#0d1117",
+    "__color_codemirror_cursor" : "#c9d1d9",
+    "__color_codemirror_guttermarker_subtle_text" : "#6e7681",
+    "__color_codemirror_guttermarker_text" : "#0d1117",
+    "__color_codemirror_gutters_bg" : "#0d1117",
+    "__color_codemirror_linenumber_text" : "#8b949e",
+    "__color_codemirror_lines_bg" : "#0d1117",
+    "__color_codemirror_matchingbracket_text" : "#c9d1d9",
+    "__color_codemirror_selection_bg" : "rgba(56, 139, 253, 0.4)",
+    "__color_codemirror_syntax_comment" : "#8b949e",
+    "__color_codemirror_syntax_constant" : "#79c0ff",
+    "__color_codemirror_syntax_entity" : "#d2a8ff",
+    "__color_codemirror_syntax_keyword" : "#ff7b72",
+    "__color_codemirror_syntax_storage" : "#ff7b72",
+    "__color_codemirror_syntax_string" : "#a5d6ff",
+    "__color_codemirror_syntax_support" : "#79c0ff",
+    "__color_codemirror_syntax_variable" : "#ffa657",
+    "__color_codemirror_text" : "#c9d1d9",
+    "__color_counter_border" : "rgba(0, 0, 0, 0)",
+    "__color_danger_emphasis" : "#da3633",
+    "__color_danger_fg" : "#f85149",
+    "__color_danger_muted" : "rgba(248, 81, 73, 0.4)",
+    "__color_danger_subtle" : "rgba(248, 81, 73, 0.15)",
+    "__color_diff_blob_addition_fg" : "#c9d1d9",
+    "__color_diff_blob_addition_line_bg" : "rgba(46, 160, 67, 0.15)",
+    "__color_diff_blob_addition_num_bg" : "rgba(63, 185, 80, 0.3)",
+    "__color_diff_blob_addition_num_text" : "#c9d1d9",
+    "__color_diff_blob_addition_word_bg" : "rgba(46, 160, 67, 0.4)",
+    "__color_diff_blob_deletion_fg" : "#c9d1d9",
+    "__color_diff_blob_deletion_line_bg" : "rgba(248, 81, 73, 0.15)",
+    "__color_diff_blob_deletion_num_bg" : "rgba(248, 81, 73, 0.3)",
+    "__color_diff_blob_deletion_num_text" : "#c9d1d9",
+    "__color_diff_blob_deletion_word_bg" : "rgba(248, 81, 73, 0.4)",
+    "__color_diff_blob_expander_icon" : "#8b949e",
+    "__color_diff_blob_hunk_num_bg" : "rgba(56, 139, 253, 0.4)",
+    "__color_diff_blob_selected_line_highlight_mix_blend_mode" : "screen",
+    "__color_diffstat_addition_bg" : "#3fb950",
+    "__color_diffstat_addition_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_diffstat_deletion_border" : "rgba(240, 246, 252, 0.1)",
+    "__color_done_emphasis" : "#8957e5",
+    "__color_done_fg" : "#a371f7",
+    "__color_done_muted" : "rgba(163, 113, 247, 0.4)",
+    "__color_done_subtle" : "rgba(163, 113, 247, 0.15)",
+    "__color_fg_default" : "#c9d1d9",
+    "__color_fg_muted" : "#8b949e",
+    "__color_fg_on_emphasis" : "#ffffff",
+    "__color_fg_subtle" : "#6e7681",
+    "__color_header_bg" : "#161b22",
+    "__color_header_divider" : "#8b949e",
+    "__color_header_logo" : "#f0f6fc",
+    "__color_header_search_bg" : "#0d1117",
+    "__color_header_search_border" : "#30363d",
+    "__color_header_text" : "rgba(255, 255, 255, 0.7)",
+    "__color_input_disabled_bg" : "rgba(110, 118, 129, 0)",
+    "__color_marketing_icon_primary" : "#79c0ff",
+    "__color_marketing_icon_secondary" : "#1f6feb",
+    "__color_menu_bg_active" : "#161b22",
+    "__color_mktg_btn_bg" : "#f6f8fa",
+    "__color_mktg_btn_shadow_focus" : "rgb(255 255 255 / 25%) 0 0 0 4px",
+    "__color_mktg_btn_shadow_hover_muted" : "rgb(255 255 255) 0 0 0 2px inset",
+    "__color_mktg_btn_shadow_hover" :  "0 4px 7px rgba(0,  0,  0,  0.15),  0 100px 80px rgba(255,  255,  255,  0.02),  0 42px 33px rgba(255,  255,  255,  0.024),  0 22px 18px rgba(255,  255,  255,  0.028),  0 12px 10px rgba(255,  255,  255,  0.034),  0 7px 5px rgba(255,  255,  255,  0.04),  0 3px 2px rgba(255,  255,  255,  0.07)",
+    "__color_mktg_btn_shadow_outline" : "rgb(255 255 255 / 25%) 0 0 0 1px inset",
+    "__color_neutral_emphasis_plus" : "#6e7681",
+    "__color_neutral_emphasis" : "#6e7681",
+    "__color_neutral_muted" : "rgba(110, 118, 129, 0.4)",
+    "__color_neutral_subtle" : "rgba(110, 118, 129, 0.1)",
+    "__color_open_emphasis" : "#238636",
+    "__color_open_fg" : "#3fb950",
+    "__color_open_muted" : "rgba(46, 160, 67, 0.4)",
+    "__color_open_subtle" : "rgba(46, 160, 67, 0.15)",
+    "__color_overlay_shadow" : "0 0 0 1px #30363d,  0 16px 32px rgba(1, 4, 9, 0.85)",
+    "__color_page_header_bg" : "#0d1117",
+    "__color_prettylights_syntax_brackethighlighter_angle" : "#8b949e",
+    "__color_prettylights_syntax_brackethighlighter_unmatched" : "#f85149",
+    "__color_prettylights_syntax_carriage_return_bg" : "#b62324",
+    "__color_prettylights_syntax_carriage_return_text" : "#f0f6fc",
+    "__color_prettylights_syntax_comment" : "#8b949e",
+    "__color_prettylights_syntax_constant_other_reference_link" : "#a5d6ff",
+    "__color_prettylights_syntax_constant" : "#79c0ff",
+    "__color_prettylights_syntax_entity_tag" : "#7ee787",
+    "__color_prettylights_syntax_entity" : "#d2a8ff",
+    "__color_prettylights_syntax_invalid_illegal_bg" : "#8e1519",
+    "__color_prettylights_syntax_invalid_illegal_text" : "#f0f6fc",
+    "__color_prettylights_syntax_keyword" : "#ff7b72",
+    "__color_prettylights_syntax_markup_bold" : "#c9d1d9",
+    "__color_prettylights_syntax_markup_changed_bg" : "#5a1e02",
+    "__color_prettylights_syntax_markup_changed_text" : "#ffdfb6",
+    "__color_prettylights_syntax_markup_deleted_bg" : "#67060c",
+    "__color_prettylights_syntax_markup_deleted_text" : "#ffdcd7",
+    "__color_prettylights_syntax_markup_heading" : "#1f6feb",
+    "__color_prettylights_syntax_markup_ignored_bg" : "#1158c7",
+    "__color_prettylights_syntax_markup_ignored_text" : "#c9d1d9",
+    "__color_prettylights_syntax_markup_inserted_bg" : "#033a16",
+    "__color_prettylights_syntax_markup_inserted_text" : "#aff5b4",
+    "__color_prettylights_syntax_markup_italic" : "#c9d1d9",
+    "__color_prettylights_syntax_markup_list" : "#f2cc60",
+    "__color_prettylights_syntax_meta_diff_range" : "#d2a8ff",
+    "__color_prettylights_syntax_storage_modifier_import" : "#c9d1d9",
+    "__color_prettylights_syntax_string_regexp" : "#7ee787",
+    "__color_prettylights_syntax_string" : "#a5d6ff",
+    "__color_prettylights_syntax_sublimelinter_gutter_mark" : "#484f58",
+    "__color_prettylights_syntax_variable" : "#ffa657",
+    "__color_primer_border_active" : "#F78166",
+    "__color_primer_border_contrast" : "rgba(255, 255, 255, 0.2)",
+    "__color_primer_canvas_backdrop" : "rgba(1, 4, 9, 0.8)",
+    "__color_primer_canvas_sticky" : "rgba(13, 17, 23, 0.95)",
+    "__color_primer_fg_disabled" : "#484f58",
+    "__color_primer_shadow_focus" : "0 0 0 3px #0c2d6b",
+    "__color_primer_shadow_highlight" : "0 0 transparent",
+    "__color_primer_shadow_inset" : "0 0 transparent",
+    "__color_project_gradient_in" : "#161b22",
+    "__color_project_gradient_out" : "rgba(22, 27, 34, 0)",
+    "__color_project_header_bg" : "#0d1117",
+    "__color_project_sidebar_bg" : "#161b22",
+    "__color_scale_black" : "#010409",
+    "__color_scale_blue_0" : "#cae8ff",
+    "__color_scale_blue_1" : "#a5d6ff",
+    "__color_scale_blue_2" : "#79c0ff",
+    "__color_scale_blue_3" : "#58a6ff",
+    "__color_scale_blue_4" : "#388bfd",
+    "__color_scale_blue_5" : "#1f6feb",
+    "__color_scale_blue_6" : "#1158c7",
+    "__color_scale_blue_7" : "#0d419d",
+    "__color_scale_blue_8" : "#0c2d6b",
+    "__color_scale_blue_9" : "#051d4d",
+    "__color_scale_coral_0" : "#FFDDD2",
+    "__color_scale_coral_1" : "#FFC2B2",
+    "__color_scale_coral_2" : "#FFA28B",
+    "__color_scale_coral_3" : "#F78166",
+    "__color_scale_coral_4" : "#EA6045",
+    "__color_scale_coral_5" : "#CF462D",
+    "__color_scale_coral_6" : "#AC3220",
+    "__color_scale_coral_7" : "#872012",
+    "__color_scale_coral_8" : "#640D04",
+    "__color_scale_coral_9" : "#460701",
+    "__color_scale_gray_0" : "#f0f6fc",
+    "__color_scale_gray_1" : "#c9d1d9",
+    "__color_scale_gray_2" : "#b1bac4",
+    "__color_scale_gray_3" : "#8b949e",
+    "__color_scale_gray_4" : "#6e7681",
+    "__color_scale_gray_5" : "#484f58",
+    "__color_scale_gray_6" : "#30363d",
+    "__color_scale_gray_7" : "#21262d",
+    "__color_scale_gray_8" : "#161b22",
+    "__color_scale_gray_9" : "#0d1117",
+    "__color_scale_green_0" : "#aff5b4",
+    "__color_scale_green_1" : "#7ee787",
+    "__color_scale_green_2" : "#56d364",
+    "__color_scale_green_3" : "#3fb950",
+    "__color_scale_green_4" : "#2ea043",
+    "__color_scale_green_5" : "#238636",
+    "__color_scale_green_6" : "#196c2e",
+    "__color_scale_green_7" : "#0f5323",
+    "__color_scale_green_8" : "#033a16",
+    "__color_scale_green_9" : "#04260f",
+    "__color_scale_orange_0" : "#ffdfb6",
+    "__color_scale_orange_1" : "#ffc680",
+    "__color_scale_orange_2" : "#ffa657",
+    "__color_scale_orange_3" : "#f0883e",
+    "__color_scale_orange_4" : "#db6d28",
+    "__color_scale_orange_5" : "#bd561d",
+    "__color_scale_orange_6" : "#9b4215",
+    "__color_scale_orange_7" : "#762d0a",
+    "__color_scale_orange_8" : "#5a1e02",
+    "__color_scale_orange_9" : "#3d1300",
+    "__color_scale_pink_0" : "#ffdaec",
+    "__color_scale_pink_1" : "#ffbedd",
+    "__color_scale_pink_2" : "#ff9bce",
+    "__color_scale_pink_3" : "#f778ba",
+    "__color_scale_pink_4" : "#db61a2",
+    "__color_scale_pink_5" : "#bf4b8a",
+    "__color_scale_pink_6" : "#9e3670",
+    "__color_scale_pink_7" : "#7d2457",
+    "__color_scale_pink_8" : "#5e103e",
+    "__color_scale_pink_9" : "#42062a",
+    "__color_scale_purple_0" : "#eddeff",
+    "__color_scale_purple_1" : "#e2c5ff",
+    "__color_scale_purple_2" : "#d2a8ff",
+    "__color_scale_purple_3" : "#bc8cff",
+    "__color_scale_purple_4" : "#a371f7",
+    "__color_scale_purple_5" : "#8957e5",
+    "__color_scale_purple_6" : "#6e40c9",
+    "__color_scale_purple_7" : "#553098",
+    "__color_scale_purple_8" : "#3c1e70",
+    "__color_scale_purple_9" : "#271052",
+    "__color_scale_red_0" : "#ffdcd7",
+    "__color_scale_red_1" : "#ffc1ba",
+    "__color_scale_red_2" : "#ffa198",
+    "__color_scale_red_3" : "#ff7b72",
+    "__color_scale_red_4" : "#f85149",
+    "__color_scale_red_5" : "#da3633",
+    "__color_scale_red_6" : "#b62324",
+    "__color_scale_red_7" : "#8e1519",
+    "__color_scale_red_8" : "#67060c",
+    "__color_scale_red_9" : "#490202",
+    "__color_scale_white" : "#ffffff",
+    "__color_scale_yellow_0" : "#f8e3a1",
+    "__color_scale_yellow_1" : "#f2cc60",
+    "__color_scale_yellow_2" : "#e3b341",
+    "__color_scale_yellow_3" : "#d29922",
+    "__color_scale_yellow_4" : "#bb8009",
+    "__color_scale_yellow_5" : "#9e6a03",
+    "__color_scale_yellow_6" : "#845306",
+    "__color_scale_yellow_7" : "#693e00",
+    "__color_scale_yellow_8" : "#4b2900",
+    "__color_scale_yellow_9" : "#341a00",
+    "__color_search_keyword_hl" : "rgba(210, 153, 34, 0.4)",
+    "__color_select_menu_backdrop_border" : "#484f58",
+    "__color_select_menu_tap_focus_bg" : "#0c2d6b",
+    "__color_select_menu_tap_highlight" : "rgba(48, 54, 61, 0.5)",
+    "__color_severe_emphasis" : "#bd561d",
+    "__color_severe_fg" : "#db6d28",
+    "__color_severe_muted" : "rgba(219, 109, 40, 0.4)",
+    "__color_severe_subtle" : "rgba(219, 109, 40, 0.15)",
+    "__color_shadow_extra_large" : "0 12px 48px #010409",
+    "__color_shadow_large" : "0 8px 24px #010409",
+    "__color_shadow_medium" : "0 3px 6px #010409",
+    "__color_shadow_small" : "0 0 transparent",
+    "__color_sidenav_selected_bg" : "#21262d",
+    "__color_sponsors_emphasis" : "#bf4b8a",
+    "__color_sponsors_fg" : "#db61a2",
+    "__color_sponsors_muted" : "rgba(219, 97, 162, 0.4)",
+    "__color_sponsors_subtle" : "rgba(219, 97, 162, 0.15)",
+    "__color_success_emphasis" : "#238636",
+    "__color_success_fg" : "#3fb950",
+    "__color_success_muted" : "rgba(46, 160, 67, 0.4)",
+    "__color_success_subtle" : "rgba(46, 160, 67, 0.15)",
+    "__color_switch_knob_checked_bg" : "#1f6feb",
+    "__color_switch_knob_checked_disabled_bg" : "#484f58",
+    "__color_switch_track_bg" : "#010409",
+    "__color_switch_track_border" : "#6e7681",
+    "__color_switch_track_checked_active_bg" : "rgba(31, 111, 235, 0.65)",
+    "__color_switch_track_checked_bg" : "rgba(31, 111, 235, 0.35)",
+    "__color_switch_track_checked_border" : "#58a6ff",
+    "__color_switch_track_checked_hover_bg" : "rgba(31, 111, 235, 0.5)",
+    "__color_timeline_badge_bg" : "#21262d",
+    "__color_topic_tag_border" : "rgba(0, 0, 0, 0)",
+    "__color_underlinenav_border_hover" : "rgba(110, 118, 129, 0.4)",
+    "__color_underlinenav_icon" : "#6e7681",
+    "__color_workflow_card_header_shadow" : "rgba(27, 31, 35, 0.04)"
+  };
\ No newline at end of file
diff --git a/src/views/Options.tsx b/src/views/Options.tsx
index 6431595..48aeabd 100644
--- a/src/views/Options.tsx
+++ b/src/views/Options.tsx
@@ -1,21 +1,53 @@
 import React from 'react';
 import '../assets/styles/App.css';
 import Header from '../components/options/Header';
-import QuickChange from '../components/popup/QuickChange';
+import QuickChange from '../components/options/QuickChange';
 import QuickSettings from '../components/popup/QuickSettings';
+import '../methods/settings.js';
+import { settings } from '../methods/settings';
+import ChangeCard from '../components/options/ChangeCard';
+import Converter from '../components/options/Converter';
+import react from 'react';
+import { HexColorInput, HexColorPicker, RgbaColorPicker } from 'react-colorful';
+import CardTitle from '../components/global/CardTitle';
+
+var settingsList = Object.keys(settings);
+
+var defaultValue = { r: 200, g: 150, b: 35, a: 0.5 } 
 
 export default function Options() {
+
+  const [color, setColor] = react.useState(defaultValue);
+
   return (
-      <div className="flex flex-col align justify-center items-center">
+      <div className="relative flex flex-col align justify-center items-center">
         <div className="relative max-w-7xl flex flex-row">
-          <div className="w-[375px]">
+        <div className=" w-[300px]">
+          </div>
+          <div className=" fixed w-[300px]">
           <Header/>
           <QuickSettings/>
-          </div>
-          <div className="flex-grow">
-            <QuickChange/>
-          </div>
+          <Converter />
+          <div className="pint flex flex-row  mb-2 mt-1 mx-2 text-center">
+      <div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
+      <div className="flex flex-row justify-content text-center justify-center">
+          <CardTitle name="color picker - " />
+        </div>
+        <div className="flex justify-content p-1">
+          <RgbaColorPicker style={{ width: 258, height: 258 }} color={color} onChange={setColor} />
         </div>
       </div>
-  );
-}
+      </div>
+          </div>
+          <div className="flex flex-col">
+            <p className="text-3xl text-white p-1 mt-2">all settings</p>
+            <p className="text-l text-white p-1 mb-2">customise everything from every text to every div</p>
+            <div className="grid grid-cols-3 gap-1">
+             {settingsList.map((setting) => {
+                return <ChangeCard settingName={setting} colorPickerColor={color}/>
+             })}
+                    </div>
+          </div>
+      </div>
+      </div>
+      )};