From 8923b7479e8f07d511d4d961db96c072897aad89 Mon Sep 17 00:00:00 2001
From: dakedres <ramondolive@gmail.com>
Date: Tue, 10 Oct 2023 17:57:51 -0400
Subject: [PATCH] Initial commit

---
 .gitignore             |   3 +
 README.md              |  10 +
 compile.sh             |   2 +
 copy.sh                |   2 +
 dark.less              | 421 +++++++++++++++++++++++++++++++++++++++++
 generator/fromTheme.sh |   3 +
 generator/process.js   |  14 ++
 generator/tea.less     | 389 +++++++++++++++++++++++++++++++++++++
 light.less             | 400 +++++++++++++++++++++++++++++++++++++++
 themes/dark.css        | 377 ++++++++++++++++++++++++++++++++++++
 themes/light.css       | 377 ++++++++++++++++++++++++++++++++++++
 11 files changed, 1998 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 README.md
 create mode 100644 compile.sh
 create mode 100755 copy.sh
 create mode 100644 dark.less
 create mode 100755 generator/fromTheme.sh
 create mode 100644 generator/process.js
 create mode 100644 generator/tea.less
 create mode 100644 light.less
 create mode 100644 themes/dark.css
 create mode 100644 themes/light.css

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ab49180
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+.ignore
+generator/temp.less
+out.css
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0e05546
--- /dev/null
+++ b/README.md
@@ -0,0 +1,10 @@
+# The theme this website uses
+On some kinda Orca mood don't mind me
+
+The light theme is kinda weird I don't recommend it
+
+# Usage
+
+The shell scripts use [lessc](https://lesscss.org).  
+`copy.sh` copies a script to the clipboard that applies the theme, which is useful.
+`compile.sh` compiles both scripts to themes/
\ No newline at end of file
diff --git a/compile.sh b/compile.sh
new file mode 100644
index 0000000..c67b335
--- /dev/null
+++ b/compile.sh
@@ -0,0 +1,2 @@
+lessc dark.less themes/dark.css
+lessc light.less themes/light.css
\ No newline at end of file
diff --git a/copy.sh b/copy.sh
new file mode 100755
index 0000000..98c1458
--- /dev/null
+++ b/copy.sh
@@ -0,0 +1,2 @@
+lessc $1 out.css
+echo "document.head.innerHTML += \`<style>$(cat out.css)</style>\`" | xclip -selection c
\ No newline at end of file
diff --git a/dark.less b/dark.less
new file mode 100644
index 0000000..692d3b6
--- /dev/null
+++ b/dark.less
@@ -0,0 +1,421 @@
+// @background: #eff;
+// @f_high: #100;
+// @f_med: #211;
+// @f_low: #322;
+// @b_high: #bcc;
+// @b_med: #cdd;
+// @b_low: #dee;
+// @b_inv: #0aa;
+
+// @f_high: hsl(180, 100%, 95%);
+// @f_med: hsl(180, 90%, 90%);
+// @f_low: hsl(180, 75%, 85%);
+// @background: #111;
+// @b_high: #2f2f2f;
+// @b_med: #202020;
+// @b_low: #1f1f1f;
+// @b_high: #333;
+// @b_med: @b_low;
+// @b_low: #222;
+
+@hue: 180;
+// @hue: 240;
+// @hue: 115;
+
+// @f_high: hsl(@hue, 33%, 90%);
+// @f_med: hsl(@hue, 20%, 83%);
+// @f_low: hsl(@hue, 14%, 77%);
+
+@f_high: hsl(@hue, 30%, 90%);
+@f_med: hsl(@hue, 16%, 83%);
+@f_low: hsl(@hue, 10%, 77%);
+
+// // // Darker
+// // @b_high: hsl(0,0%,18%);
+// // @b_med: hsl(0,0%,12%);
+// // @b_low: hsl(0,0%,8%);
+// // @background: hsl(0,0%,6%);
+// @b_high: #2e2e2e;
+// @b_med: #1f1f1f;
+// @b_low: #141414;
+// @background: #0f0f0f;
+
+// @b_high: hsl(0, 0%, 20%);
+// @b_med: hsl(0,0%,14%);
+// @b_low: hsl(0,0%,10%);
+// @background: hsl(0,0%,6%);
+@b_high: #333333;
+@b_med: #242424;
+@b_low: #1a1a1a;
+@background: #0f0f0f;
+
+// @b_inv: #0aa;
+// @b_inv: #cd99b3;
+@b_inv: hsl(@hue, 42%, 70%); 
+// @b_inv: #f2a65a;
+
+@primary:     @b_inv; // primary color used in main texts
+// @primary:     @f_high;
+@secondary:   @f_high; // secondary color used in some texts and text based buttons
+@tertiary:    @f_med; // tertiary color used in other colored texts
+@fg:          @f_high;
+@bg0:         @background;
+@bg1:         @b_low;
+@bg2:         @b_med;
+@bg3:         @b_med;
+@bg4:         @b_high;
+@red:         #ec7279;
+@orange:      #deb974;
+@yellow:      #deb974;
+@green:       #a0c980;
+@cyan:        #5dbbc1;
+@blue:        #6cb6eb;
+@purple:      #d38aea;
+@grey:        #758094;
+@red-bg:      #55393d;
+@green-bg:    #394634;
+@blue-bg:     #354157;
+@yellow-bg:   #4e432f;
+@button1:     @b_inv;
+@button2:     @b_inv;
+@button-red:  @red;
+@key:         @red;
+@operator:    @purple;
+@string:      @green;
+@value:       @green;
+@type:        @yellow;
+@function:    @blue;
+@special:     @cyan;
+:root {
+  --is-dark-theme: true;
+  --color-primary: @primary;
+  --color-primary-contrast: @bg0;
+  --color-primary-dark-1: @primary;
+  --color-primary-dark-2: mix(@fg, @primary, 16.7%);
+  --color-primary-dark-3: mix(@fg, @primary, 33.3%);
+  --color-primary-dark-4: mix(@fg, @primary, 50%);
+  --color-primary-dark-5: mix(@fg, @primary, 66.6%);
+  --color-primary-dark-6: mix(@fg, @primary, 83.3%);
+  --color-primary-dark-7: @fg;
+  --color-primary-light-1: @primary;
+  --color-primary-light-2: mix(@bg2, @primary, 16.7%);
+  --color-primary-light-3: mix(@bg2, @primary, 33.3%);
+  --color-primary-light-4: mix(@bg2, @primary, 50%);
+  --color-primary-light-5: mix(@bg2, @primary, 66.6%);
+  --color-primary-light-6: mix(@bg2, @primary, 83.3%);
+  --color-primary-light-7: @bg2;
+  --color-primary-alpha-10: fade(@primary, 10%);
+  --color-primary-alpha-20: fade(@primary, 20%);
+  --color-primary-alpha-30: fade(@primary, 30%);
+  --color-primary-alpha-40: fade(@primary, 40%);
+  --color-primary-alpha-50: fade(@primary, 50%);
+  --color-primary-alpha-60: fade(@primary, 60%);
+  --color-primary-alpha-70: fade(@primary, 70%);
+  --color-primary-alpha-80: fade(@primary, 80%);
+  --color-primary-alpha-90: fade(@primary, 90%);
+  --color-secondary: @bg4;
+  --color-secondary-dark-1: @bg4;
+  --color-secondary-dark-2: mix(@fg, @bg4, 8.3%);
+  --color-secondary-dark-3: mix(@fg, @bg4, 16.7%);
+  --color-secondary-dark-4: mix(@fg, @bg4, 25%);
+  --color-secondary-dark-5: mix(@fg, @bg4, 33.3%);
+  --color-secondary-dark-6: mix(@fg, @bg4, 41.7%);
+  --color-secondary-dark-7: mix(@fg, @bg4, 50%);
+  --color-secondary-dark-8: mix(@fg, @bg4, 58.3%);
+  --color-secondary-dark-9: mix(@fg, @bg4, 66.7%);
+  --color-secondary-dark-10: mix(@fg, @bg4, 75%);
+  --color-secondary-dark-11: mix(@fg, @bg4, 83.3%);
+  --color-secondary-dark-12: mix(@fg, @bg4, 91.7%);
+  --color-secondary-dark-13: @fg;
+  --color-secondary-light-1: @bg4;
+  --color-secondary-light-2: @bg3;
+  --color-secondary-light-3: @bg2;
+  --color-secondary-light-4: @bg1;
+  --color-secondary-alpha-10: fade(@bg4, 10%);
+  --color-secondary-alpha-20: fade(@bg4, 20%);
+  --color-secondary-alpha-30: fade(@bg4, 30%);
+  --color-secondary-alpha-40: fade(@bg4, 40%);
+  --color-secondary-alpha-50: fade(@bg4, 50%);
+  --color-secondary-alpha-60: fade(@bg4, 60%);
+  --color-secondary-alpha-70: fade(@bg4, 70%);
+  --color-secondary-alpha-80: fade(@bg4, 80%);
+  --color-secondary-alpha-90: fade(@bg4, 90%);
+  /* colors */
+  --color-red: @red;
+  --color-orange: @orange;
+  --color-yellow: @yellow;
+  --color-olive: @green;
+  --color-green: @green;
+  --color-teal: @cyan;
+  --color-blue: @blue;
+  --color-violet: @purple;
+  --color-purple: @purple;
+  --color-pink: @purple;
+  --color-brown: @orange;
+  --color-grey: @grey;
+  /* light variants */
+  --color-red-light: @red;
+  --color-orange-light: @orange;
+  --color-yellow-light: @yellow;
+  --color-olive-light: @green;
+  --color-green-light: @green;
+  --color-teal-light: @cyan;
+  --color-blue-light: @blue;
+  --color-violet-light: @purple;
+  --color-purple-light: @purple;
+  --color-pink-light: @purple;
+  --color-brown-light: @orange;
+  --color-grey-light: @grey;
+  /* other colors */
+  --color-black: @bg2;
+  --color-gold: @orange;
+  --color-white: @f_high;
+  --color-diff-removed-word-bg: mix(@red-bg, @red, 70%);
+  --color-diff-added-word-bg: mix(@green-bg, @green, 70%);
+  --color-diff-removed-row-bg: @red-bg;
+  --color-diff-moved-row-bg: @blue-bg;
+  --color-diff-added-row-bg: @green-bg;
+  --color-diff-removed-row-border: mix(@red-bg, @red, 50%);
+  --color-diff-moved-row-border: mix(@blue-bg, @blue, 50%);
+  --color-diff-added-row-border: mix(@green-bg, @green, 50%);
+  --color-diff-inactive: @bg2;
+  --color-error-border: mix(@red-bg, @red, 50%);
+  --color-error-bg: @red-bg;
+  --color-error-text: @red;
+  --color-success-border: mix(@green-bg, @green, 50%);
+  --color-success-bg: @green-bg;
+  --color-success-text: @green;
+  --color-warning-border: mix(@yellow-bg, @yellow, 50%);
+  --color-warning-bg: @yellow-bg;
+  --color-warning-text: @yellow;
+  --color-info-border: mix(@blue-bg, @blue, 50%);
+  --color-info-bg: @blue-bg;
+  --color-info-text: @blue;
+  /* target-based colors */
+  --color-body: @bg0;
+  --color-box-header: @bg3;
+  // --color-box-header: @bg3;
+  --color-box-body: @bg1;
+  --color-box-body-highlight: @bg2;
+  --color-text-dark: @secondary;
+  --color-text: @fg;
+  --color-text-hover: fade(@fg, 80%);
+  --color-text-light: @tertiary;
+  --color-text-light-1: @tertiary;
+  --color-text-light-2: @secondary;
+  --color-text-light-3: @secondary;
+  --color-footer: @bg1;
+  --color-timeline: @bg4;
+  --color-input-text: @fg;
+  --color-input-background: @bg0;
+  --color-input-toggle-background: @bg1;
+  --color-input-border: @bg4;
+  --color-input-border-hover: mix(@bg4, @grey, 50%);
+  --color-navbar: @bg1;
+  --color-navbar-transparent: @bg1;
+  --color-nav-bg: @bg1;
+  --color-nav-hover-bg: @bg3;
+  --color-light: @bg1;
+  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
+  --color-light-border: @bg4;
+  --color-hover: fade(@bg4, 50%);
+  --color-active: fade(@bg4, 50%);
+  --color-menu: @bg1;
+  --color-card: @bg1;
+  --color-markup-table-row: @bg3;
+  --color-markup-code-block: @bg0;
+  --color-button: @bg3;
+  --color-code-bg: @bg0;
+  --color-code-sidebar-bg: @bg1;
+  --color-shadow: #00000060;
+  --color-secondary-bg: @bg1;
+  --color-text-focus: #fff;
+  --color-expand-button: @bg2;
+  --color-placeholder-text: @tertiary;
+  --color-editor-line-highlight: @bg1;
+  --color-project-board-bg: @bg0;
+  --color-project-board-light-label: @primary;
+  --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
+  --color-reaction-bg: #ffffff12;
+  --color-reaction-active-bg: var(--color-primary-alpha-40);
+  --color-header-bar: @bg1;
+  --color-label-bg: @bg4;
+  --color-label-text: @tertiary;
+  --color-label-active-bg: @bg4;
+  --color-accent: var(--color-primary-light-1);
+  --color-small-accent: var(--color-primary-light-5);
+  --color-active-line: @bg1;
+  --color-header-wrapper: @bg2;
+
+  accent-color: var(--color-accent);
+  color-scheme: dark;
+}
+
+.chroma .nx {
+  color: @fg;
+}
+.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .sd {
+  color: @grey;
+}
+.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr {
+  color: @key;
+}
+.chroma .o, .chroma .ow {
+  color: @operator;
+}
+.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .sh, .chroma .si, .chroma .sr, .chroma .ss, .chroma .sx, .chroma .nt, .chroma .cpf {
+  color: @string;
+}
+.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo, .chroma .nl {
+  color: @value;
+}
+.chroma .kt, .chroma .nc, .chroma .nn, .chroma .nv {
+  color: @type;
+}
+.chroma .nf, .chroma .nb, .chroma .na {
+  color: @function;
+}
+.chroma .bp, .chroma .cp, .chroma .ne, .chroma .nd, .chroma .se {
+  color: @special;
+}
+
+/* primary buttons */
+.ui.primary.button, .ui.primary.buttons .button {
+  background: @button1;
+  background-color: @button1 !important;
+  color: @bg0;
+}
+
+.ui.primary.button:hover, .ui.primary.buttons .button:hover {
+  background: fade(@button1, 80%);
+  background-color: fade(@button1, 80%) !important;
+  color: @bg0;
+}
+
+.ui.grey.labels .label, .ui.ui.ui.grey.label, .ui.grey.button, .ui.grey.buttons .button {
+  color: @bg0;
+  background-color: @button1;
+  border-color: @button1;
+}
+
+.ui.grey.labels .label:hover, .ui.ui.ui.grey.label:hover, .ui.grey.button:hover, .ui.grey.buttons .button:hover {
+  color: @bg0;
+  background-color: @button1;
+  border-color: @button1;
+}
+
+/* secondary buttons */
+.ui.green.buttons .button, .ui.green.button {
+  background: @button2;
+  background-color: @button2;
+  color: @bg0;
+}
+
+.ui.green.buttons .button:hover, .ui.green.button:hover {
+  background: fade(@button2, 80%);
+  background-color: fade(@button2, 80%);
+  color: @bg0;
+}
+
+/* text based buttons (purple) */
+.ui.labeled.button.disabled>.button, .ui.basic.buttons .button, .ui.basic.button {
+  color: @secondary;
+}
+
+.ui.labeled.button.disabled>.button:hover, .ui.basic.buttons .button:hover, .ui.basic.button:hover {
+  color: @secondary;
+}
+
+/* repo title && header */
+.repo-title {
+  color: @secondary;
+}
+
+/* star number && fork number */
+.repo-buttons button[disabled] ~ .label,
+.repo-buttons .ui.labeled.button.disabled > .label {
+  color: @primary;
+}
+
+.ui.basic.labels .label, .ui.basic.label {
+  color: @primary;
+}
+
+/* hover on commits, branch, tags in project home page */
+.repository .ui.segment.sub-menu .list .item a:hover,
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-hover);
+}
+
+/* commit label */
+.ui.primary.labels .label, .ui.ui.ui.primary.label {
+  color: @bg0;
+}
+
+/* issue label */
+.ui.green.labels .label, .ui.ui.ui.green.label {
+  color: @bg0;
+}
+
+/* grey button (rss feed button in repository home page) */
+i.grey.icon.icon.icon.icon {
+  color: @grey
+}
+
+/* scroll bar */
+* {
+  scrollbar-color: @secondary transparent !important;
+}
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+  border: 2px solid transparent;
+  border-radius: 5px !important;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+}
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* red buttons */
+.ui.red.labels .label, .ui.ui.ui.red.label, .ui.red.button, .ui.red.buttons .button {
+  background: @button-red;
+  background-color: @button-red;
+  color: @bg0;
+}
+
+.ui.red.labels .label:hover, .ui.ui.ui.red.label:hover, .ui.red.button:hover, .ui.red.buttons .button:hover {
+  background: fade(@button-red, 80%);
+  background-color: fade(@button-red, 80%);
+  color: @bg0;
+}
+
+/* grey buttons */
+.ui.labels a.label, a.ui.label {
+  background-color: @bg1;
+}
+
+.ui.labels a.label:hover, a.ui.label:hover {
+  background-color: @bg0;
+}
+
+/* orange buttons */
+.ui.orange.labels .label, .ui.ui.ui.orange.label, .ui.orange.button, .ui.orange.buttons .button {
+  background: @orange;
+  background-color: @orange;
+  color: @bg0;
+}
+
+.ui.orange.labels .label:hover, .ui.ui.ui.orange.label:hover, .ui.orange.button:hover, .ui.orange.buttons .button:hover {
+  background: fade(@orange, 80%);
+  background-color: fade(@orange, 80%);
+  color: @bg0;
+}
\ No newline at end of file
diff --git a/generator/fromTheme.sh b/generator/fromTheme.sh
new file mode 100755
index 0000000..5f64654
--- /dev/null
+++ b/generator/fromTheme.sh
@@ -0,0 +1,3 @@
+echo "$(node process.js $1)$(cat tea.less)" > temp.less
+lessc temp.less out.css
+echo "document.head.innerHTML += \`<style>$(cat out.css)</style>\`" | xclip -selection c
\ No newline at end of file
diff --git a/generator/process.js b/generator/process.js
new file mode 100644
index 0000000..c2ed8b8
--- /dev/null
+++ b/generator/process.js
@@ -0,0 +1,14 @@
+const Path = require('path')
+const fs = require('fs')
+
+let target = process.argv[2]
+
+let path = Path.isAbsolute(target) ? target : Path.join(process.cwd(), target)
+
+let out = fs.readFileSync(path).toString('utf-8').replaceAll(
+  /  <\w+ .*? id='([a-z_]+)' fill='#([A-Za-z0-9]+)'><\/\w+>/g,
+  '@$1: #$2;'
+)
+.split('\n').filter(line => line.startsWith('@')).join('\n')
+
+console.log(out)
\ No newline at end of file
diff --git a/generator/tea.less b/generator/tea.less
new file mode 100644
index 0000000..9acfc47
--- /dev/null
+++ b/generator/tea.less
@@ -0,0 +1,389 @@
+//   <circle .*? id='([a-z_]+)' fill='#([A-Za-z0-9]+)'></circle>
+// to 
+// @$1: #$2;
+
+// @background: #0A0F14;
+// @f_high: #FFFFFF;
+// @f_med: #98D1CE;
+// @f_low: #EDB54B;
+// @f_inv: #C33027;
+// @b_high: #093748;
+// @b_med: #081F2D;
+// @b_low: #10151B;
+// @b_inv: #8FAF9F;
+
+// @background: #E0B1CB;
+// @f_high: #231942;
+// @f_med: #48416d;
+// @f_low: #917296;
+// @f_inv: #E0B1CB;
+// @b_high: #5E548E;
+// @b_med: #FFFFFF;
+// @b_low: #BE95C4;
+// @b_inv: #9F86C0;
+
+@primary:     @f_high; // primary color used in main texts
+@secondary:   @f_med; // secondary color used in some texts and text based buttons
+@tertiary:    @f_med; // tertiary color used in other colored texts
+@fg:          @f_high;
+@bg0:         @background;
+@bg1:         @b_low;
+@bg2:         @b_med;
+@bg3:         @b_high;
+@bg4:         @b_high;
+@red:         #ec7279;
+@orange:      #deb974;
+@yellow:      #deb974;
+@green:       #a0c980;
+@cyan:        #5dbbc1;
+@blue:        #6cb6eb;
+@purple:      #d38aea;
+@grey:        #758094;
+@red-bg:      #55393d;
+@green-bg:    #394634;
+@blue-bg:     #354157;
+@yellow-bg:   #4e432f;
+@button1:     @b_inv;
+@button2:     @b_inv;
+@button-red:  @red;
+@key:         @red;
+@operator:    @purple;
+@string:      @green;
+@value:       @green;
+@type:        @yellow;
+@function:    @blue;
+@special:     @cyan;
+
+:root {
+  --is-dark-theme: true;
+  --color-primary: @primary;
+  --color-primary-contrast: @bg0;
+  --color-primary-dark-1: @primary;
+  --color-primary-dark-2: mix(@fg, @primary, 16.7%);
+  --color-primary-dark-3: mix(@fg, @primary, 33.3%);
+  --color-primary-dark-4: mix(@fg, @primary, 50%);
+  --color-primary-dark-5: mix(@fg, @primary, 66.6%);
+  --color-primary-dark-6: mix(@fg, @primary, 83.3%);
+  --color-primary-dark-7: @fg;
+  --color-primary-light-1: @primary;
+  --color-primary-light-2: mix(@bg2, @primary, 16.7%);
+  --color-primary-light-3: mix(@bg2, @primary, 33.3%);
+  --color-primary-light-4: mix(@bg2, @primary, 50%);
+  --color-primary-light-5: mix(@bg2, @primary, 66.6%);
+  --color-primary-light-6: mix(@bg2, @primary, 83.3%);
+  --color-primary-light-7: @bg2;
+  --color-primary-alpha-10: fade(@primary, 10%);
+  --color-primary-alpha-20: fade(@primary, 20%);
+  --color-primary-alpha-30: fade(@primary, 30%);
+  --color-primary-alpha-40: fade(@primary, 40%);
+  --color-primary-alpha-50: fade(@primary, 50%);
+  --color-primary-alpha-60: fade(@primary, 60%);
+  --color-primary-alpha-70: fade(@primary, 70%);
+  --color-primary-alpha-80: fade(@primary, 80%);
+  --color-primary-alpha-90: fade(@primary, 90%);
+  --color-secondary: @bg4;
+  --color-secondary-dark-1: @bg4;
+  --color-secondary-dark-2: mix(@fg, @bg4, 8.3%);
+  --color-secondary-dark-3: mix(@fg, @bg4, 16.7%);
+  --color-secondary-dark-4: mix(@fg, @bg4, 25%);
+  --color-secondary-dark-5: mix(@fg, @bg4, 33.3%);
+  --color-secondary-dark-6: mix(@fg, @bg4, 41.7%);
+  --color-secondary-dark-7: mix(@fg, @bg4, 50%);
+  --color-secondary-dark-8: mix(@fg, @bg4, 58.3%);
+  --color-secondary-dark-9: mix(@fg, @bg4, 66.7%);
+  --color-secondary-dark-10: mix(@fg, @bg4, 75%);
+  --color-secondary-dark-11: mix(@fg, @bg4, 83.3%);
+  --color-secondary-dark-12: mix(@fg, @bg4, 91.7%);
+  --color-secondary-dark-13: @fg;
+  --color-secondary-light-1: @bg4;
+  --color-secondary-light-2: @bg3;
+  --color-secondary-light-3: @bg2;
+  --color-secondary-light-4: @bg1;
+  --color-secondary-alpha-10: fade(@bg4, 10%);
+  --color-secondary-alpha-20: fade(@bg4, 20%);
+  --color-secondary-alpha-30: fade(@bg4, 30%);
+  --color-secondary-alpha-40: fade(@bg4, 40%);
+  --color-secondary-alpha-50: fade(@bg4, 50%);
+  --color-secondary-alpha-60: fade(@bg4, 60%);
+  --color-secondary-alpha-70: fade(@bg4, 70%);
+  --color-secondary-alpha-80: fade(@bg4, 80%);
+  --color-secondary-alpha-90: fade(@bg4, 90%);
+  /* colors */
+  --color-red: @red;
+  --color-orange: @orange;
+  --color-yellow: @yellow;
+  --color-olive: @green;
+  --color-green: @green;
+  --color-teal: @cyan;
+  --color-blue: @blue;
+  --color-violet: @purple;
+  --color-purple: @purple;
+  --color-pink: @purple;
+  --color-brown: @orange;
+  --color-grey: @grey;
+  /* light variants */
+  --color-red-light: @red;
+  --color-orange-light: @orange;
+  --color-yellow-light: @yellow;
+  --color-olive-light: @green;
+  --color-green-light: @green;
+  --color-teal-light: @cyan;
+  --color-blue-light: @blue;
+  --color-violet-light: @purple;
+  --color-purple-light: @purple;
+  --color-pink-light: @purple;
+  --color-brown-light: @orange;
+  --color-grey-light: @grey;
+  /* other colors */
+  --color-black: @bg2;
+  --color-gold: @orange;
+  --color-white: @bg0;
+  --color-diff-removed-word-bg: mix(@red-bg, @red, 70%);
+  --color-diff-added-word-bg: mix(@green-bg, @green, 70%);
+  --color-diff-removed-row-bg: @red-bg;
+  --color-diff-moved-row-bg: @blue-bg;
+  --color-diff-added-row-bg: @green-bg;
+  --color-diff-removed-row-border: mix(@red-bg, @red, 50%);
+  --color-diff-moved-row-border: mix(@blue-bg, @blue, 50%);
+  --color-diff-added-row-border: mix(@green-bg, @green, 50%);
+  --color-diff-inactive: @bg2;
+  --color-error-border: mix(@red-bg, @red, 50%);
+  --color-error-bg: @red-bg;
+  --color-error-text: @red;
+  --color-success-border: mix(@green-bg, @green, 50%);
+  --color-success-bg: @green-bg;
+  --color-success-text: @green;
+  --color-warning-border: mix(@yellow-bg, @yellow, 50%);
+  --color-warning-bg: @yellow-bg;
+  --color-warning-text: @yellow;
+  --color-info-border: mix(@blue-bg, @blue, 50%);
+  --color-info-bg: @blue-bg;
+  --color-info-text: @blue;
+  /* target-based colors */
+  --color-body: @bg0;
+  --color-box-header: @bg3;
+  // --color-box-header: @bg3;
+  --color-box-body: @bg1;
+  --color-box-body-highlight: @bg2;
+  --color-text-dark: @secondary;
+  --color-text: @fg;
+  --color-text-hover: fade(@fg, 80%);
+  --color-text-light: @tertiary;
+  --color-text-light-1: @tertiary;
+  --color-text-light-2: @secondary;
+  --color-text-light-3: @secondary;
+  --color-footer: @bg1;
+  --color-timeline: @bg4;
+  --color-input-text: @fg;
+  --color-input-background: @bg0;
+  --color-input-toggle-background: @bg1;
+  --color-input-border: @bg4;
+  --color-input-border-hover: mix(@bg4, @grey, 50%);
+  --color-navbar: @bg1;
+  --color-navbar-transparent: @bg1;
+  --color-nav-bg: @bg1;
+  --color-nav-hover-bg: @bg3;
+  --color-light: @bg1;
+  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
+  --color-light-border: @bg4;
+  --color-hover: fade(@bg4, 50%);
+  --color-active: fade(@bg4, 50%);
+  --color-menu: @bg1;
+  --color-card: @bg1;
+  --color-markup-table-row: @bg3;
+  --color-markup-code-block: @bg0;
+  --color-button: @bg3;
+  --color-code-bg: @bg0;
+  --color-code-sidebar-bg: @bg1;
+  --color-shadow: #00000060;
+  --color-secondary-bg: @bg1;
+  --color-text-focus: #fff;
+  --color-expand-button: @bg2;
+  --color-placeholder-text: @tertiary;
+  --color-editor-line-highlight: @bg1;
+  --color-project-board-bg: @bg0;
+  --color-project-board-light-label: @primary;
+  --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
+  --color-reaction-bg: #ffffff12;
+  --color-reaction-active-bg: var(--color-primary-alpha-40);
+  --color-header-bar: @bg1;
+  --color-label-bg: @bg4;
+  --color-label-text: @tertiary;
+  --color-label-active-bg: @bg4;
+  --color-accent: var(--color-primary-light-1);
+  --color-small-accent: var(--color-primary-light-5);
+  --color-active-line: @bg1;
+  --color-header-wrapper: @bg2;
+
+  accent-color: var(--color-accent);
+  color-scheme: dark;
+}
+
+.chroma .nx {
+  color: @fg;
+}
+.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .sd {
+  color: @grey;
+}
+.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr {
+  color: @key;
+}
+.chroma .o, .chroma .ow {
+  color: @operator;
+}
+.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .sh, .chroma .si, .chroma .sr, .chroma .ss, .chroma .sx, .chroma .nt, .chroma .cpf {
+  color: @string;
+}
+.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo, .chroma .nl {
+  color: @value;
+}
+.chroma .kt, .chroma .nc, .chroma .nn, .chroma .nv {
+  color: @type;
+}
+.chroma .nf, .chroma .nb, .chroma .na {
+  color: @function;
+}
+.chroma .bp, .chroma .cp, .chroma .ne, .chroma .nd, .chroma .se {
+  color: @special;
+}
+
+/* primary buttons */
+.ui.primary.button, .ui.primary.buttons .button {
+  background: @button1;
+  background-color: @button1 !important;
+  color: @bg0;
+}
+
+.ui.primary.button:hover, .ui.primary.buttons .button:hover {
+  background: fade(@button1, 80%);
+  background-color: fade(@button1, 80%) !important;
+  color: @bg0;
+}
+
+.ui.grey.labels .label, .ui.ui.ui.grey.label, .ui.grey.button, .ui.grey.buttons .button {
+  color: @bg0;
+  background-color: @button1;
+  border-color: @button1;
+}
+
+.ui.grey.labels .label:hover, .ui.ui.ui.grey.label:hover, .ui.grey.button:hover, .ui.grey.buttons .button:hover {
+  color: @bg0;
+  background-color: @button1;
+  border-color: @button1;
+}
+
+/* secondary buttons */
+.ui.green.buttons .button, .ui.green.button {
+  background: @button2;
+  background-color: @button2;
+  color: @bg0;
+}
+
+.ui.green.buttons .button:hover, .ui.green.button:hover {
+  background: fade(@button2, 80%);
+  background-color: fade(@button2, 80%);
+  color: @bg0;
+}
+
+/* text based buttons (purple) */
+.ui.labeled.button.disabled>.button, .ui.basic.buttons .button, .ui.basic.button {
+  color: @secondary;
+}
+
+.ui.labeled.button.disabled>.button:hover, .ui.basic.buttons .button:hover, .ui.basic.button:hover {
+  color: @secondary;
+}
+
+/* repo title && header */
+.repo-title {
+  color: @secondary;
+}
+
+/* star number && fork number */
+.repo-buttons button[disabled] ~ .label,
+.repo-buttons .ui.labeled.button.disabled > .label {
+  color: @primary;
+}
+
+.ui.basic.labels .label, .ui.basic.label {
+  color: @primary;
+}
+
+/* hover on commits, branch, tags in project home page */
+.repository .ui.segment.sub-menu .list .item a:hover,
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-hover);
+}
+
+/* commit label */
+.ui.primary.labels .label, .ui.ui.ui.primary.label {
+  color: @bg0;
+}
+
+/* issue label */
+.ui.green.labels .label, .ui.ui.ui.green.label {
+  color: @bg0;
+}
+
+/* grey button (rss feed button in repository home page) */
+i.grey.icon.icon.icon.icon {
+  color: @grey
+}
+
+/* scroll bar */
+* {
+  scrollbar-color: @secondary transparent !important;
+}
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+  border: 2px solid transparent;
+  border-radius: 5px !important;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+}
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* red buttons */
+.ui.red.labels .label, .ui.ui.ui.red.label, .ui.red.button, .ui.red.buttons .button {
+  background: @button-red;
+  background-color: @button-red;
+  color: @bg0;
+}
+
+.ui.red.labels .label:hover, .ui.ui.ui.red.label:hover, .ui.red.button:hover, .ui.red.buttons .button:hover {
+  background: fade(@button-red, 80%);
+  background-color: fade(@button-red, 80%);
+  color: @bg0;
+}
+
+/* grey buttons */
+.ui.labels a.label, a.ui.label {
+  background-color: @bg1;
+}
+
+.ui.labels a.label:hover, a.ui.label:hover {
+  background-color: @bg0;
+}
+
+/* orange buttons */
+.ui.orange.labels .label, .ui.ui.ui.orange.label, .ui.orange.button, .ui.orange.buttons .button {
+  background: @orange;
+  background-color: @orange;
+  color: @bg0;
+}
+
+.ui.orange.labels .label:hover, .ui.ui.ui.orange.label:hover, .ui.orange.button:hover, .ui.orange.buttons .button:hover {
+  background: fade(@orange, 80%);
+  background-color: fade(@orange, 80%);
+  color: @bg0;
+}
\ No newline at end of file
diff --git a/light.less b/light.less
new file mode 100644
index 0000000..deafcb0
--- /dev/null
+++ b/light.less
@@ -0,0 +1,400 @@
+// @background: #eff;
+// @f_high: #100;
+// @f_med: #211;
+// @f_low: #322;
+// @b_high: #bcc;
+// @b_med: #cdd;
+// @b_low: #dee;
+// @b_inv: #0aa;
+
+// @f_high: hsl(180, 100%, 95%);
+// @f_med: hsl(180, 90%, 90%);
+// @f_low: hsl(180, 75%, 85%);
+// @background: #111;
+// @b_high: #2f2f2f;
+// @b_med: #202020;
+// @b_low: #1f1f1f;
+// @b_high: #333;
+// @b_med: @b_low;
+// @b_low: #222;
+
+@f_high: #220000;
+@f_med: #441100;
+@f_low: #662200;
+
+// @b_high: hsl(0, 0%, 84%);
+// @b_med: hsl(0,0%,88%);
+// @b_low: hsl(0,0%,90%);
+// @background: hsl(0,0%,94%);
+@b_high: #d6d6d6;
+@b_med: #e0e0e0;
+@b_low: #e6e6e6;
+@background: #f0f0f0;
+
+@b_inv: #b40;
+
+@primary:     @f_high; // primary color used in main texts
+@secondary:   @f_med; // secondary color used in some texts and text based buttons
+@tertiary:    @f_med; // tertiary color used in other colored texts
+@fg:          @f_high;
+@bg0:         @background;
+@bg1:         @b_low;
+@bg2:         @b_med;
+@bg3:         @b_med;
+@bg4:         @b_high;
+@red:         #ed7379;
+@orange:      #deb873;
+@yellow:      #deb873;
+@green:       #a1c982;
+@cyan:        #5cbbc2;
+@blue:        #6cb6eb;
+@purple:      #d38aea;
+@grey:        #758094;
+@red-bg:      #55393d;
+@green-bg:    #394634;
+@blue-bg:     #354157;
+@yellow-bg:   #4e432f;
+@button1:     @b_inv;
+@button2:     @b_inv;
+@button-red:  @red;
+@key:         @red;
+@operator:    @purple;
+@string:      @green;
+@value:       @green;
+@type:        @yellow;
+@function:    @blue;
+@special:     @cyan;
+
+:root {
+  --is-dark-theme: true;
+  --color-primary: @primary;
+  --color-primary-contrast: @bg0;
+  --color-primary-dark-1: @primary;
+  --color-primary-dark-2: mix(@fg, @primary, 16.7%);
+  --color-primary-dark-3: mix(@fg, @primary, 33.3%);
+  --color-primary-dark-4: mix(@fg, @primary, 50%);
+  --color-primary-dark-5: mix(@fg, @primary, 66.6%);
+  --color-primary-dark-6: mix(@fg, @primary, 83.3%);
+  --color-primary-dark-7: @fg;
+  --color-primary-light-1: @primary;
+  --color-primary-light-2: mix(@bg2, @primary, 16.7%);
+  --color-primary-light-3: mix(@bg2, @primary, 33.3%);
+  --color-primary-light-4: mix(@bg2, @primary, 50%);
+  --color-primary-light-5: mix(@bg2, @primary, 66.6%);
+  --color-primary-light-6: mix(@bg2, @primary, 83.3%);
+  --color-primary-light-7: @bg2;
+  --color-primary-alpha-10: fade(@primary, 10%);
+  --color-primary-alpha-20: fade(@primary, 20%);
+  --color-primary-alpha-30: fade(@primary, 30%);
+  --color-primary-alpha-40: fade(@primary, 40%);
+  --color-primary-alpha-50: fade(@primary, 50%);
+  --color-primary-alpha-60: fade(@primary, 60%);
+  --color-primary-alpha-70: fade(@primary, 70%);
+  --color-primary-alpha-80: fade(@primary, 80%);
+  --color-primary-alpha-90: fade(@primary, 90%);
+  --color-secondary: @bg4;
+  --color-secondary-dark-1: @bg4;
+  --color-secondary-dark-2: mix(@fg, @bg4, 8.3%);
+  --color-secondary-dark-3: mix(@fg, @bg4, 16.7%);
+  --color-secondary-dark-4: mix(@fg, @bg4, 25%);
+  --color-secondary-dark-5: mix(@fg, @bg4, 33.3%);
+  --color-secondary-dark-6: mix(@fg, @bg4, 41.7%);
+  --color-secondary-dark-7: mix(@fg, @bg4, 50%);
+  --color-secondary-dark-8: mix(@fg, @bg4, 58.3%);
+  --color-secondary-dark-9: mix(@fg, @bg4, 66.7%);
+  --color-secondary-dark-10: mix(@fg, @bg4, 75%);
+  --color-secondary-dark-11: mix(@fg, @bg4, 83.3%);
+  --color-secondary-dark-12: mix(@fg, @bg4, 91.7%);
+  --color-secondary-dark-13: @fg;
+  --color-secondary-light-1: @bg4;
+  --color-secondary-light-2: @bg3;
+  --color-secondary-light-3: @bg2;
+  --color-secondary-light-4: @bg1;
+  --color-secondary-alpha-10: fade(@bg4, 10%);
+  --color-secondary-alpha-20: fade(@bg4, 20%);
+  --color-secondary-alpha-30: fade(@bg4, 30%);
+  --color-secondary-alpha-40: fade(@bg4, 40%);
+  --color-secondary-alpha-50: fade(@bg4, 50%);
+  --color-secondary-alpha-60: fade(@bg4, 60%);
+  --color-secondary-alpha-70: fade(@bg4, 70%);
+  --color-secondary-alpha-80: fade(@bg4, 80%);
+  --color-secondary-alpha-90: fade(@bg4, 90%);
+  /* colors */
+  --color-red: @red;
+  --color-orange: @orange;
+  --color-yellow: @yellow;
+  --color-olive: @green;
+  --color-green: @green;
+  --color-teal: @cyan;
+  --color-blue: @blue;
+  --color-violet: @purple;
+  --color-purple: @purple;
+  --color-pink: @purple;
+  --color-brown: @orange;
+  --color-grey: @grey;
+  /* light variants */
+  --color-red-light: @red;
+  --color-orange-light: @orange;
+  --color-yellow-light: @yellow;
+  --color-olive-light: @green;
+  --color-green-light: @green;
+  --color-teal-light: @cyan;
+  --color-blue-light: @blue;
+  --color-violet-light: @purple;
+  --color-purple-light: @purple;
+  --color-pink-light: @purple;
+  --color-brown-light: @orange;
+  --color-grey-light: @grey;
+  /* other colors */
+  --color-black: @bg2;
+  --color-gold: @orange;
+  --color-white: @bg0;
+  --color-diff-removed-word-bg: mix(@red-bg, @red, 70%);
+  --color-diff-added-word-bg: mix(@green-bg, @green, 70%);
+  --color-diff-removed-row-bg: @red-bg;
+  --color-diff-moved-row-bg: @blue-bg;
+  --color-diff-added-row-bg: @green-bg;
+  --color-diff-removed-row-border: mix(@red-bg, @red, 50%);
+  --color-diff-moved-row-border: mix(@blue-bg, @blue, 50%);
+  --color-diff-added-row-border: mix(@green-bg, @green, 50%);
+  --color-diff-inactive: @bg2;
+  --color-error-border: mix(@red-bg, @red, 50%);
+  --color-error-bg: @red-bg;
+  --color-error-text: @red;
+  --color-success-border: mix(@green-bg, @green, 50%);
+  --color-success-bg: @green-bg;
+  --color-success-text: @green;
+  --color-warning-border: mix(@yellow-bg, @yellow, 50%);
+  --color-warning-bg: @yellow-bg;
+  --color-warning-text: @yellow;
+  --color-info-border: mix(@blue-bg, @blue, 50%);
+  --color-info-bg: @blue-bg;
+  --color-info-text: @blue;
+  /* target-based colors */
+  --color-body: @bg0;
+  --color-box-header: @bg3;
+  // --color-box-header: @bg3;
+  --color-box-body: @bg1;
+  --color-box-body-highlight: @bg2;
+  --color-text-dark: @secondary;
+  --color-text: @fg;
+  --color-text-hover: fade(@fg, 80%);
+  --color-text-light: @tertiary;
+  --color-text-light-1: @tertiary;
+  --color-text-light-2: @secondary;
+  --color-text-light-3: @secondary;
+  --color-footer: @bg1;
+  --color-timeline: @bg4;
+  --color-input-text: @fg;
+  --color-input-background: @bg0;
+  --color-input-toggle-background: @bg1;
+  --color-input-border: @bg4;
+  --color-input-border-hover: mix(@bg4, @grey, 50%);
+  --color-navbar: @bg1;
+  --color-navbar-transparent: @bg1;
+  --color-nav-bg: @bg1;
+  --color-nav-hover-bg: @bg3;
+  --color-light: @bg1;
+  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
+  --color-light-border: @bg4;
+  --color-hover: fade(@bg4, 50%);
+  --color-active: fade(@bg4, 50%);
+  --color-menu: @bg1;
+  --color-card: @bg1;
+  --color-markup-table-row: @bg3;
+  --color-markup-code-block: @bg0;
+  --color-button: @bg3;
+  --color-code-bg: @bg0;
+  --color-code-sidebar-bg: @bg1;
+  --color-shadow: #00000060;
+  --color-secondary-bg: @bg1;
+  --color-text-focus: #fff;
+  --color-expand-button: @bg2;
+  --color-placeholder-text: @tertiary;
+  --color-editor-line-highlight: @bg1;
+  --color-project-board-bg: @bg0;
+  --color-project-board-light-label: @primary;
+  --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
+  --color-reaction-bg: #ffffff12;
+  --color-reaction-active-bg: var(--color-primary-alpha-40);
+  --color-header-bar: @bg1;
+  --color-label-bg: @bg4;
+  --color-label-text: @tertiary;
+  --color-label-active-bg: @bg4;
+  --color-accent: var(--color-primary-light-1);
+  --color-small-accent: var(--color-primary-light-5);
+  --color-active-line: @bg1;
+  --color-header-wrapper: @bg2;
+
+  accent-color: var(--color-accent);
+  color-scheme: light;
+}
+
+.chroma .nx {
+  color: @fg;
+}
+.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .sd {
+  color: @grey;
+}
+.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr {
+  color: @key;
+}
+.chroma .o, .chroma .ow {
+  color: @operator;
+}
+.chroma .s, .chroma .s1, .chroma .s2, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .sh, .chroma .si, .chroma .sr, .chroma .ss, .chroma .sx, .chroma .nt, .chroma .cpf {
+  color: @string;
+}
+.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo, .chroma .nl {
+  color: @value;
+}
+.chroma .kt, .chroma .nc, .chroma .nn, .chroma .nv {
+  color: @type;
+}
+.chroma .nf, .chroma .nb, .chroma .na {
+  color: @function;
+}
+.chroma .bp, .chroma .cp, .chroma .ne, .chroma .nd, .chroma .se {
+  color: @special;
+}
+
+/* primary buttons */
+.ui.primary.button, .ui.primary.buttons .button {
+  background: @button1;
+  background-color: @button1 !important;
+  color: @bg0;
+}
+
+.ui.primary.button:hover, .ui.primary.buttons .button:hover {
+  background: fade(@button1, 80%);
+  background-color: fade(@button1, 80%) !important;
+  color: @bg0;
+}
+
+.ui.grey.labels .label, .ui.ui.ui.grey.label, .ui.grey.button, .ui.grey.buttons .button {
+  color: @bg0;
+  background-color: @button1;
+  border-color: @button1;
+}
+
+.ui.grey.labels .label:hover, .ui.ui.ui.grey.label:hover, .ui.grey.button:hover, .ui.grey.buttons .button:hover {
+  color: @bg0;
+  background-color: @button1;
+  border-color: @button1;
+}
+
+/* secondary buttons */
+.ui.green.buttons .button, .ui.green.button {
+  background: @button2;
+  background-color: @button2;
+  color: @bg0;
+}
+
+.ui.green.buttons .button:hover, .ui.green.button:hover {
+  background: fade(@button2, 80%);
+  background-color: fade(@button2, 80%);
+  color: @bg0;
+}
+
+/* text based buttons (purple) */
+.ui.labeled.button.disabled>.button, .ui.basic.buttons .button, .ui.basic.button {
+  color: @secondary;
+}
+
+.ui.labeled.button.disabled>.button:hover, .ui.basic.buttons .button:hover, .ui.basic.button:hover {
+  color: @secondary;
+}
+
+/* repo title && header */
+.repo-title {
+  color: @secondary;
+}
+
+/* star number && fork number */
+.repo-buttons button[disabled] ~ .label,
+.repo-buttons .ui.labeled.button.disabled > .label {
+  color: @primary;
+}
+
+.ui.basic.labels .label, .ui.basic.label {
+  color: @primary;
+}
+
+/* hover on commits, branch, tags in project home page */
+.repository .ui.segment.sub-menu .list .item a:hover,
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-hover);
+}
+
+/* commit label */
+.ui.primary.labels .label, .ui.ui.ui.primary.label {
+  color: @bg0;
+}
+
+/* issue label */
+.ui.green.labels .label, .ui.ui.ui.green.label {
+  color: @bg0;
+}
+
+/* grey button (rss feed button in repository home page) */
+i.grey.icon.icon.icon.icon {
+  color: @grey
+}
+
+/* scroll bar */
+* {
+  scrollbar-color: @secondary transparent !important;
+}
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+  border: 2px solid transparent;
+  border-radius: 5px !important;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+}
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: inset 0 0 0 6px @secondary !important;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* red buttons */
+.ui.red.labels .label, .ui.ui.ui.red.label, .ui.red.button, .ui.red.buttons .button {
+  background: @button-red;
+  background-color: @button-red;
+  color: @bg0;
+}
+
+.ui.red.labels .label:hover, .ui.ui.ui.red.label:hover, .ui.red.button:hover, .ui.red.buttons .button:hover {
+  background: fade(@button-red, 80%);
+  background-color: fade(@button-red, 80%);
+  color: @bg0;
+}
+
+/* grey buttons */
+.ui.labels a.label, a.ui.label {
+  background-color: @bg1;
+}
+
+.ui.labels a.label:hover, a.ui.label:hover {
+  background-color: @bg0;
+}
+
+/* orange buttons */
+.ui.orange.labels .label, .ui.ui.ui.orange.label, .ui.orange.button, .ui.orange.buttons .button {
+  background: @orange;
+  background-color: @orange;
+  color: @bg0;
+}
+
+.ui.orange.labels .label:hover, .ui.ui.ui.orange.label:hover, .ui.orange.button:hover, .ui.orange.buttons .button:hover {
+  background: fade(@orange, 80%);
+  background-color: fade(@orange, 80%);
+  color: @bg0;
+}
\ No newline at end of file
diff --git a/themes/dark.css b/themes/dark.css
new file mode 100644
index 0000000..a31be38
--- /dev/null
+++ b/themes/dark.css
@@ -0,0 +1,377 @@
+:root {
+  --is-dark-theme: true;
+  --color-primary: hsl(180, 42%, 70%);
+  --color-primary-contrast: #0f0f0f;
+  --color-primary-dark-1: hsl(180, 42%, 70%);
+  --color-primary-dark-2: #9fd7d7;
+  --color-primary-dark-3: #acdbdb;
+  --color-primary-dark-4: #b8e0e0;
+  --color-primary-dark-5: #c5e4e4;
+  --color-primary-dark-6: #d1e9e9;
+  --color-primary-dark-7: hsl(180, 30%, 90%);
+  --color-primary-light-1: hsl(180, 42%, 70%);
+  --color-primary-light-2: #80b5b5;
+  --color-primary-light-3: #6e9898;
+  --color-primary-light-4: #5b7b7b;
+  --color-primary-light-5: #495e5e;
+  --color-primary-light-6: #364141;
+  --color-primary-light-7: #242424;
+  --color-primary-alpha-10: hsla(180, 42%, 70%, 0.1);
+  --color-primary-alpha-20: hsla(180, 42%, 70%, 0.2);
+  --color-primary-alpha-30: hsla(180, 42%, 70%, 0.3);
+  --color-primary-alpha-40: hsla(180, 42%, 70%, 0.4);
+  --color-primary-alpha-50: hsla(180, 42%, 70%, 0.5);
+  --color-primary-alpha-60: hsla(180, 42%, 70%, 0.6);
+  --color-primary-alpha-70: hsla(180, 42%, 70%, 0.7);
+  --color-primary-alpha-80: hsla(180, 42%, 70%, 0.8);
+  --color-primary-alpha-90: hsla(180, 42%, 70%, 0.9);
+  --color-secondary: #333333;
+  --color-secondary-dark-1: #333333;
+  --color-secondary-dark-2: #414242;
+  --color-secondary-dark-3: #505252;
+  --color-secondary-dark-4: #5e6262;
+  --color-secondary-dark-5: #6c7171;
+  --color-secondary-dark-6: #7a8181;
+  --color-secondary-dark-7: #889090;
+  --color-secondary-dark-8: #97a0a0;
+  --color-secondary-dark-9: #a5afaf;
+  --color-secondary-dark-10: #b3bfbf;
+  --color-secondary-dark-11: #c1cece;
+  --color-secondary-dark-12: #d0dede;
+  --color-secondary-dark-13: hsl(180, 30%, 90%);
+  --color-secondary-light-1: #333333;
+  --color-secondary-light-2: #242424;
+  --color-secondary-light-3: #242424;
+  --color-secondary-light-4: #1a1a1a;
+  --color-secondary-alpha-10: rgba(51, 51, 51, 0.1);
+  --color-secondary-alpha-20: rgba(51, 51, 51, 0.2);
+  --color-secondary-alpha-30: rgba(51, 51, 51, 0.3);
+  --color-secondary-alpha-40: rgba(51, 51, 51, 0.4);
+  --color-secondary-alpha-50: rgba(51, 51, 51, 0.5);
+  --color-secondary-alpha-60: rgba(51, 51, 51, 0.6);
+  --color-secondary-alpha-70: rgba(51, 51, 51, 0.7);
+  --color-secondary-alpha-80: rgba(51, 51, 51, 0.8);
+  --color-secondary-alpha-90: rgba(51, 51, 51, 0.9);
+  /* colors */
+  --color-red: #ec7279;
+  --color-orange: #deb974;
+  --color-yellow: #deb974;
+  --color-olive: #a0c980;
+  --color-green: #a0c980;
+  --color-teal: #5dbbc1;
+  --color-blue: #6cb6eb;
+  --color-violet: #d38aea;
+  --color-purple: #d38aea;
+  --color-pink: #d38aea;
+  --color-brown: #deb974;
+  --color-grey: #758094;
+  /* light variants */
+  --color-red-light: #ec7279;
+  --color-orange-light: #deb974;
+  --color-yellow-light: #deb974;
+  --color-olive-light: #a0c980;
+  --color-green-light: #a0c980;
+  --color-teal-light: #5dbbc1;
+  --color-blue-light: #6cb6eb;
+  --color-violet-light: #d38aea;
+  --color-purple-light: #d38aea;
+  --color-pink-light: #d38aea;
+  --color-brown-light: #deb974;
+  --color-grey-light: #758094;
+  /* other colors */
+  --color-black: #242424;
+  --color-gold: #deb974;
+  --color-white: hsl(180, 30%, 90%);
+  --color-diff-removed-word-bg: #824a4f;
+  --color-diff-added-word-bg: #586d4b;
+  --color-diff-removed-row-bg: #55393d;
+  --color-diff-moved-row-bg: #354157;
+  --color-diff-added-row-bg: #394634;
+  --color-diff-removed-row-border: #a1565b;
+  --color-diff-moved-row-border: #517ca1;
+  --color-diff-added-row-border: #6d885a;
+  --color-diff-inactive: #242424;
+  --color-error-border: #a1565b;
+  --color-error-bg: #55393d;
+  --color-error-text: #ec7279;
+  --color-success-border: #6d885a;
+  --color-success-bg: #394634;
+  --color-success-text: #a0c980;
+  --color-warning-border: #967e52;
+  --color-warning-bg: #4e432f;
+  --color-warning-text: #deb974;
+  --color-info-border: #517ca1;
+  --color-info-bg: #354157;
+  --color-info-text: #6cb6eb;
+  /* target-based colors */
+  --color-body: #0f0f0f;
+  --color-box-header: #242424;
+  --color-box-body: #1a1a1a;
+  --color-box-body-highlight: #242424;
+  --color-text-dark: hsl(180, 30%, 90%);
+  --color-text: hsl(180, 30%, 90%);
+  --color-text-hover: hsla(180, 30%, 90%, 0.8);
+  --color-text-light: hsl(180, 16%, 83%);
+  --color-text-light-1: hsl(180, 16%, 83%);
+  --color-text-light-2: hsl(180, 30%, 90%);
+  --color-text-light-3: hsl(180, 30%, 90%);
+  --color-footer: #1a1a1a;
+  --color-timeline: #333333;
+  --color-input-text: hsl(180, 30%, 90%);
+  --color-input-background: #0f0f0f;
+  --color-input-toggle-background: #1a1a1a;
+  --color-input-border: #333333;
+  --color-input-border-hover: #545a64;
+  --color-navbar: #1a1a1a;
+  --color-navbar-transparent: #1a1a1a;
+  --color-nav-bg: #1a1a1a;
+  --color-nav-hover-bg: #242424;
+  --color-light: #1a1a1a;
+  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
+  --color-light-border: #333333;
+  --color-hover: rgba(51, 51, 51, 0.5);
+  --color-active: rgba(51, 51, 51, 0.5);
+  --color-menu: #1a1a1a;
+  --color-card: #1a1a1a;
+  --color-markup-table-row: #242424;
+  --color-markup-code-block: #0f0f0f;
+  --color-button: #242424;
+  --color-code-bg: #0f0f0f;
+  --color-code-sidebar-bg: #1a1a1a;
+  --color-shadow: #00000060;
+  --color-secondary-bg: #1a1a1a;
+  --color-text-focus: #fff;
+  --color-expand-button: #242424;
+  --color-placeholder-text: hsl(180, 16%, 83%);
+  --color-editor-line-highlight: #1a1a1a;
+  --color-project-board-bg: #0f0f0f;
+  --color-project-board-light-label: hsl(180, 42%, 70%);
+  --color-caret: var(--color-text);
+  /* should ideally be --color-text-dark, see #15651 */
+  --color-reaction-bg: #ffffff12;
+  --color-reaction-active-bg: var(--color-primary-alpha-40);
+  --color-header-bar: #1a1a1a;
+  --color-label-bg: #333333;
+  --color-label-text: hsl(180, 16%, 83%);
+  --color-label-active-bg: #333333;
+  --color-accent: var(--color-primary-light-1);
+  --color-small-accent: var(--color-primary-light-5);
+  --color-active-line: #1a1a1a;
+  --color-header-wrapper: #242424;
+  accent-color: var(--color-accent);
+  color-scheme: dark;
+}
+.chroma .nx {
+  color: hsl(180, 30%, 90%);
+}
+.chroma .c,
+.chroma .c1,
+.chroma .ch,
+.chroma .cm,
+.chroma .sd {
+  color: #758094;
+}
+.chroma .k,
+.chroma .kc,
+.chroma .kd,
+.chroma .kn,
+.chroma .kp,
+.chroma .kr {
+  color: #ec7279;
+}
+.chroma .o,
+.chroma .ow {
+  color: #d38aea;
+}
+.chroma .s,
+.chroma .s1,
+.chroma .s2,
+.chroma .sa,
+.chroma .sb,
+.chroma .sc,
+.chroma .sh,
+.chroma .si,
+.chroma .sr,
+.chroma .ss,
+.chroma .sx,
+.chroma .nt,
+.chroma .cpf {
+  color: #a0c980;
+}
+.chroma .m,
+.chroma .mb,
+.chroma .mf,
+.chroma .mh,
+.chroma .mi,
+.chroma .mo,
+.chroma .nl {
+  color: #a0c980;
+}
+.chroma .kt,
+.chroma .nc,
+.chroma .nn,
+.chroma .nv {
+  color: #deb974;
+}
+.chroma .nf,
+.chroma .nb,
+.chroma .na {
+  color: #6cb6eb;
+}
+.chroma .bp,
+.chroma .cp,
+.chroma .ne,
+.chroma .nd,
+.chroma .se {
+  color: #5dbbc1;
+}
+/* primary buttons */
+.ui.primary.button,
+.ui.primary.buttons .button {
+  background: hsl(180, 42%, 70%);
+  background-color: hsl(180, 42%, 70%) !important;
+  color: #0f0f0f;
+}
+.ui.primary.button:hover,
+.ui.primary.buttons .button:hover {
+  background: hsla(180, 42%, 70%, 0.8);
+  background-color: hsla(180, 42%, 70%, 0.8) !important;
+  color: #0f0f0f;
+}
+.ui.grey.labels .label,
+.ui.ui.ui.grey.label,
+.ui.grey.button,
+.ui.grey.buttons .button {
+  color: #0f0f0f;
+  background-color: hsl(180, 42%, 70%);
+  border-color: hsl(180, 42%, 70%);
+}
+.ui.grey.labels .label:hover,
+.ui.ui.ui.grey.label:hover,
+.ui.grey.button:hover,
+.ui.grey.buttons .button:hover {
+  color: #0f0f0f;
+  background-color: hsl(180, 42%, 70%);
+  border-color: hsl(180, 42%, 70%);
+}
+/* secondary buttons */
+.ui.green.buttons .button,
+.ui.green.button {
+  background: hsl(180, 42%, 70%);
+  background-color: hsl(180, 42%, 70%);
+  color: #0f0f0f;
+}
+.ui.green.buttons .button:hover,
+.ui.green.button:hover {
+  background: hsla(180, 42%, 70%, 0.8);
+  background-color: hsla(180, 42%, 70%, 0.8);
+  color: #0f0f0f;
+}
+/* text based buttons (purple) */
+.ui.labeled.button.disabled > .button,
+.ui.basic.buttons .button,
+.ui.basic.button {
+  color: hsl(180, 30%, 90%);
+}
+.ui.labeled.button.disabled > .button:hover,
+.ui.basic.buttons .button:hover,
+.ui.basic.button:hover {
+  color: hsl(180, 30%, 90%);
+}
+/* repo title && header */
+.repo-title {
+  color: hsl(180, 30%, 90%);
+}
+/* star number && fork number */
+.repo-buttons button[disabled] ~ .label,
+.repo-buttons .ui.labeled.button.disabled > .label {
+  color: hsl(180, 42%, 70%);
+}
+.ui.basic.labels .label,
+.ui.basic.label {
+  color: hsl(180, 42%, 70%);
+}
+/* hover on commits, branch, tags in project home page */
+.repository .ui.segment.sub-menu .list .item a:hover,
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-hover);
+}
+/* commit label */
+.ui.primary.labels .label,
+.ui.ui.ui.primary.label {
+  color: #0f0f0f;
+}
+/* issue label */
+.ui.green.labels .label,
+.ui.ui.ui.green.label {
+  color: #0f0f0f;
+}
+/* grey button (rss feed button in repository home page) */
+i.grey.icon.icon.icon.icon {
+  color: #758094;
+}
+/* scroll bar */
+* {
+  scrollbar-color: hsl(180, 30%, 90%) transparent !important;
+}
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 0 6px hsl(180, 30%, 90%) !important;
+  border: 2px solid transparent;
+  border-radius: 5px !important;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  box-shadow: inset 0 0 0 6px hsl(180, 30%, 90%) !important;
+}
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: inset 0 0 0 6px hsl(180, 30%, 90%) !important;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+/* red buttons */
+.ui.red.labels .label,
+.ui.ui.ui.red.label,
+.ui.red.button,
+.ui.red.buttons .button {
+  background: #ec7279;
+  background-color: #ec7279;
+  color: #0f0f0f;
+}
+.ui.red.labels .label:hover,
+.ui.ui.ui.red.label:hover,
+.ui.red.button:hover,
+.ui.red.buttons .button:hover {
+  background: rgba(236, 114, 121, 0.8);
+  background-color: rgba(236, 114, 121, 0.8);
+  color: #0f0f0f;
+}
+/* grey buttons */
+.ui.labels a.label,
+a.ui.label {
+  background-color: #1a1a1a;
+}
+.ui.labels a.label:hover,
+a.ui.label:hover {
+  background-color: #0f0f0f;
+}
+/* orange buttons */
+.ui.orange.labels .label,
+.ui.ui.ui.orange.label,
+.ui.orange.button,
+.ui.orange.buttons .button {
+  background: #deb974;
+  background-color: #deb974;
+  color: #0f0f0f;
+}
+.ui.orange.labels .label:hover,
+.ui.ui.ui.orange.label:hover,
+.ui.orange.button:hover,
+.ui.orange.buttons .button:hover {
+  background: rgba(222, 185, 116, 0.8);
+  background-color: rgba(222, 185, 116, 0.8);
+  color: #0f0f0f;
+}
diff --git a/themes/light.css b/themes/light.css
new file mode 100644
index 0000000..e4f6f8c
--- /dev/null
+++ b/themes/light.css
@@ -0,0 +1,377 @@
+:root {
+  --is-dark-theme: true;
+  --color-primary: #220000;
+  --color-primary-contrast: #f0f0f0;
+  --color-primary-dark-1: #220000;
+  --color-primary-dark-2: #220000;
+  --color-primary-dark-3: #220000;
+  --color-primary-dark-4: #220000;
+  --color-primary-dark-5: #220000;
+  --color-primary-dark-6: #220000;
+  --color-primary-dark-7: #220000;
+  --color-primary-light-1: #220000;
+  --color-primary-light-2: #422525;
+  --color-primary-light-3: #614b4b;
+  --color-primary-light-4: #817070;
+  --color-primary-light-5: #a19595;
+  --color-primary-light-6: #c0bbbb;
+  --color-primary-light-7: #e0e0e0;
+  --color-primary-alpha-10: rgba(34, 0, 0, 0.1);
+  --color-primary-alpha-20: rgba(34, 0, 0, 0.2);
+  --color-primary-alpha-30: rgba(34, 0, 0, 0.3);
+  --color-primary-alpha-40: rgba(34, 0, 0, 0.4);
+  --color-primary-alpha-50: rgba(34, 0, 0, 0.5);
+  --color-primary-alpha-60: rgba(34, 0, 0, 0.6);
+  --color-primary-alpha-70: rgba(34, 0, 0, 0.7);
+  --color-primary-alpha-80: rgba(34, 0, 0, 0.8);
+  --color-primary-alpha-90: rgba(34, 0, 0, 0.9);
+  --color-secondary: #d6d6d6;
+  --color-secondary-dark-1: #d6d6d6;
+  --color-secondary-dark-2: #c7c4c4;
+  --color-secondary-dark-3: #b8b2b2;
+  --color-secondary-dark-4: #a9a1a1;
+  --color-secondary-dark-5: #9a8f8f;
+  --color-secondary-dark-6: #8b7d7d;
+  --color-secondary-dark-7: #7c6b6b;
+  --color-secondary-dark-8: #6d5959;
+  --color-secondary-dark-9: #5e4747;
+  --color-secondary-dark-10: #4f3636;
+  --color-secondary-dark-11: #402424;
+  --color-secondary-dark-12: #311212;
+  --color-secondary-dark-13: #220000;
+  --color-secondary-light-1: #d6d6d6;
+  --color-secondary-light-2: #e0e0e0;
+  --color-secondary-light-3: #e0e0e0;
+  --color-secondary-light-4: #e6e6e6;
+  --color-secondary-alpha-10: rgba(214, 214, 214, 0.1);
+  --color-secondary-alpha-20: rgba(214, 214, 214, 0.2);
+  --color-secondary-alpha-30: rgba(214, 214, 214, 0.3);
+  --color-secondary-alpha-40: rgba(214, 214, 214, 0.4);
+  --color-secondary-alpha-50: rgba(214, 214, 214, 0.5);
+  --color-secondary-alpha-60: rgba(214, 214, 214, 0.6);
+  --color-secondary-alpha-70: rgba(214, 214, 214, 0.7);
+  --color-secondary-alpha-80: rgba(214, 214, 214, 0.8);
+  --color-secondary-alpha-90: rgba(214, 214, 214, 0.9);
+  /* colors */
+  --color-red: #ed7379;
+  --color-orange: #deb873;
+  --color-yellow: #deb873;
+  --color-olive: #a1c982;
+  --color-green: #a1c982;
+  --color-teal: #5cbbc2;
+  --color-blue: #6cb6eb;
+  --color-violet: #d38aea;
+  --color-purple: #d38aea;
+  --color-pink: #d38aea;
+  --color-brown: #deb873;
+  --color-grey: #758094;
+  /* light variants */
+  --color-red-light: #ed7379;
+  --color-orange-light: #deb873;
+  --color-yellow-light: #deb873;
+  --color-olive-light: #a1c982;
+  --color-green-light: #a1c982;
+  --color-teal-light: #5cbbc2;
+  --color-blue-light: #6cb6eb;
+  --color-violet-light: #d38aea;
+  --color-purple-light: #d38aea;
+  --color-pink-light: #d38aea;
+  --color-brown-light: #deb873;
+  --color-grey-light: #758094;
+  /* other colors */
+  --color-black: #e0e0e0;
+  --color-gold: #deb873;
+  --color-white: #f0f0f0;
+  --color-diff-removed-word-bg: #834a4f;
+  --color-diff-added-word-bg: #586d4b;
+  --color-diff-removed-row-bg: #55393d;
+  --color-diff-moved-row-bg: #354157;
+  --color-diff-added-row-bg: #394634;
+  --color-diff-removed-row-border: #a1565b;
+  --color-diff-moved-row-border: #517ca1;
+  --color-diff-added-row-border: #6d885b;
+  --color-diff-inactive: #e0e0e0;
+  --color-error-border: #a1565b;
+  --color-error-bg: #55393d;
+  --color-error-text: #ed7379;
+  --color-success-border: #6d885b;
+  --color-success-bg: #394634;
+  --color-success-text: #a1c982;
+  --color-warning-border: #967e51;
+  --color-warning-bg: #4e432f;
+  --color-warning-text: #deb873;
+  --color-info-border: #517ca1;
+  --color-info-bg: #354157;
+  --color-info-text: #6cb6eb;
+  /* target-based colors */
+  --color-body: #f0f0f0;
+  --color-box-header: #e0e0e0;
+  --color-box-body: #e6e6e6;
+  --color-box-body-highlight: #e0e0e0;
+  --color-text-dark: #441100;
+  --color-text: #220000;
+  --color-text-hover: rgba(34, 0, 0, 0.8);
+  --color-text-light: #441100;
+  --color-text-light-1: #441100;
+  --color-text-light-2: #441100;
+  --color-text-light-3: #441100;
+  --color-footer: #e6e6e6;
+  --color-timeline: #d6d6d6;
+  --color-input-text: #220000;
+  --color-input-background: #f0f0f0;
+  --color-input-toggle-background: #e6e6e6;
+  --color-input-border: #d6d6d6;
+  --color-input-border-hover: #a6abb5;
+  --color-navbar: #e6e6e6;
+  --color-navbar-transparent: #e6e6e6;
+  --color-nav-bg: #e6e6e6;
+  --color-nav-hover-bg: #e0e0e0;
+  --color-light: #e6e6e6;
+  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
+  --color-light-border: #d6d6d6;
+  --color-hover: rgba(214, 214, 214, 0.5);
+  --color-active: rgba(214, 214, 214, 0.5);
+  --color-menu: #e6e6e6;
+  --color-card: #e6e6e6;
+  --color-markup-table-row: #e0e0e0;
+  --color-markup-code-block: #f0f0f0;
+  --color-button: #e0e0e0;
+  --color-code-bg: #f0f0f0;
+  --color-code-sidebar-bg: #e6e6e6;
+  --color-shadow: #00000060;
+  --color-secondary-bg: #e6e6e6;
+  --color-text-focus: #fff;
+  --color-expand-button: #e0e0e0;
+  --color-placeholder-text: #441100;
+  --color-editor-line-highlight: #e6e6e6;
+  --color-project-board-bg: #f0f0f0;
+  --color-project-board-light-label: #220000;
+  --color-caret: var(--color-text);
+  /* should ideally be --color-text-dark, see #15651 */
+  --color-reaction-bg: #ffffff12;
+  --color-reaction-active-bg: var(--color-primary-alpha-40);
+  --color-header-bar: #e6e6e6;
+  --color-label-bg: #d6d6d6;
+  --color-label-text: #441100;
+  --color-label-active-bg: #d6d6d6;
+  --color-accent: var(--color-primary-light-1);
+  --color-small-accent: var(--color-primary-light-5);
+  --color-active-line: #e6e6e6;
+  --color-header-wrapper: #e0e0e0;
+  accent-color: var(--color-accent);
+  color-scheme: light;
+}
+.chroma .nx {
+  color: #220000;
+}
+.chroma .c,
+.chroma .c1,
+.chroma .ch,
+.chroma .cm,
+.chroma .sd {
+  color: #758094;
+}
+.chroma .k,
+.chroma .kc,
+.chroma .kd,
+.chroma .kn,
+.chroma .kp,
+.chroma .kr {
+  color: #ed7379;
+}
+.chroma .o,
+.chroma .ow {
+  color: #d38aea;
+}
+.chroma .s,
+.chroma .s1,
+.chroma .s2,
+.chroma .sa,
+.chroma .sb,
+.chroma .sc,
+.chroma .sh,
+.chroma .si,
+.chroma .sr,
+.chroma .ss,
+.chroma .sx,
+.chroma .nt,
+.chroma .cpf {
+  color: #a1c982;
+}
+.chroma .m,
+.chroma .mb,
+.chroma .mf,
+.chroma .mh,
+.chroma .mi,
+.chroma .mo,
+.chroma .nl {
+  color: #a1c982;
+}
+.chroma .kt,
+.chroma .nc,
+.chroma .nn,
+.chroma .nv {
+  color: #deb873;
+}
+.chroma .nf,
+.chroma .nb,
+.chroma .na {
+  color: #6cb6eb;
+}
+.chroma .bp,
+.chroma .cp,
+.chroma .ne,
+.chroma .nd,
+.chroma .se {
+  color: #5cbbc2;
+}
+/* primary buttons */
+.ui.primary.button,
+.ui.primary.buttons .button {
+  background: #b40;
+  background-color: #b40 !important;
+  color: #f0f0f0;
+}
+.ui.primary.button:hover,
+.ui.primary.buttons .button:hover {
+  background: rgba(187, 68, 0, 0.8);
+  background-color: rgba(187, 68, 0, 0.8) !important;
+  color: #f0f0f0;
+}
+.ui.grey.labels .label,
+.ui.ui.ui.grey.label,
+.ui.grey.button,
+.ui.grey.buttons .button {
+  color: #f0f0f0;
+  background-color: #b40;
+  border-color: #b40;
+}
+.ui.grey.labels .label:hover,
+.ui.ui.ui.grey.label:hover,
+.ui.grey.button:hover,
+.ui.grey.buttons .button:hover {
+  color: #f0f0f0;
+  background-color: #b40;
+  border-color: #b40;
+}
+/* secondary buttons */
+.ui.green.buttons .button,
+.ui.green.button {
+  background: #b40;
+  background-color: #b40;
+  color: #f0f0f0;
+}
+.ui.green.buttons .button:hover,
+.ui.green.button:hover {
+  background: rgba(187, 68, 0, 0.8);
+  background-color: rgba(187, 68, 0, 0.8);
+  color: #f0f0f0;
+}
+/* text based buttons (purple) */
+.ui.labeled.button.disabled > .button,
+.ui.basic.buttons .button,
+.ui.basic.button {
+  color: #441100;
+}
+.ui.labeled.button.disabled > .button:hover,
+.ui.basic.buttons .button:hover,
+.ui.basic.button:hover {
+  color: #441100;
+}
+/* repo title && header */
+.repo-title {
+  color: #441100;
+}
+/* star number && fork number */
+.repo-buttons button[disabled] ~ .label,
+.repo-buttons .ui.labeled.button.disabled > .label {
+  color: #220000;
+}
+.ui.basic.labels .label,
+.ui.basic.label {
+  color: #220000;
+}
+/* hover on commits, branch, tags in project home page */
+.repository .ui.segment.sub-menu .list .item a:hover,
+.ui.tabular.menu .item:hover {
+  color: var(--color-text-hover);
+}
+/* commit label */
+.ui.primary.labels .label,
+.ui.ui.ui.primary.label {
+  color: #f0f0f0;
+}
+/* issue label */
+.ui.green.labels .label,
+.ui.ui.ui.green.label {
+  color: #f0f0f0;
+}
+/* grey button (rss feed button in repository home page) */
+i.grey.icon.icon.icon.icon {
+  color: #758094;
+}
+/* scroll bar */
+* {
+  scrollbar-color: #441100 transparent !important;
+}
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 0 6px #441100 !important;
+  border: 2px solid transparent;
+  border-radius: 5px !important;
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  box-shadow: inset 0 0 0 6px #441100 !important;
+}
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: inset 0 0 0 6px #441100 !important;
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+/* red buttons */
+.ui.red.labels .label,
+.ui.ui.ui.red.label,
+.ui.red.button,
+.ui.red.buttons .button {
+  background: #ed7379;
+  background-color: #ed7379;
+  color: #f0f0f0;
+}
+.ui.red.labels .label:hover,
+.ui.ui.ui.red.label:hover,
+.ui.red.button:hover,
+.ui.red.buttons .button:hover {
+  background: rgba(237, 115, 121, 0.8);
+  background-color: rgba(237, 115, 121, 0.8);
+  color: #f0f0f0;
+}
+/* grey buttons */
+.ui.labels a.label,
+a.ui.label {
+  background-color: #e6e6e6;
+}
+.ui.labels a.label:hover,
+a.ui.label:hover {
+  background-color: #f0f0f0;
+}
+/* orange buttons */
+.ui.orange.labels .label,
+.ui.ui.ui.orange.label,
+.ui.orange.button,
+.ui.orange.buttons .button {
+  background: #deb873;
+  background-color: #deb873;
+  color: #f0f0f0;
+}
+.ui.orange.labels .label:hover,
+.ui.ui.ui.orange.label:hover,
+.ui.orange.button:hover,
+.ui.orange.buttons .button:hover {
+  background: rgba(222, 184, 115, 0.8);
+  background-color: rgba(222, 184, 115, 0.8);
+  color: #f0f0f0;
+}