From 68251c79ca2b195eb94cd12090d46325eb78cced Mon Sep 17 00:00:00 2001 From: Sainnhe Park Date: Mon, 31 Oct 2022 10:32:46 +0800 Subject: [PATCH] Add edge dark --- build.sh | 6 + dist/theme-edge-dark.css | 1 + src/base-dark.less | 278 +++++++++++++++++++++++++++++++++++++++ src/edge-dark.less | 33 +++++ 4 files changed, 318 insertions(+) create mode 100755 build.sh create mode 100644 dist/theme-edge-dark.css create mode 100644 src/base-dark.less create mode 100644 src/edge-dark.less diff --git a/build.sh b/build.sh new file mode 100755 index 0000000..177ee92 --- /dev/null +++ b/build.sh @@ -0,0 +1,6 @@ +#!/usr/bin/env bash + +BASEDIR="$( cd "$( dirname "$0" )" && pwd )" +cd "${BASEDIR}" + +lessc -x src/edge-dark.less > dist/theme-edge-dark.css diff --git a/dist/theme-edge-dark.css b/dist/theme-edge-dark.css new file mode 100644 index 0000000..246469a --- /dev/null +++ b/dist/theme-edge-dark.css @@ -0,0 +1 @@ +:root{--is-dark-theme:true;--color-primary:#6cb6eb;--color-primary-contrast:#2b2d37;--color-primary-dark-1:#6cb6eb;--color-primary-dark-2:#7bbae8;--color-primary-dark-3:#8abee5;--color-primary-dark-4:#99c2e2;--color-primary-dark-5:#a7c5df;--color-primary-dark-6:#b6c9dc;--color-primary-dark-7:#c5cdd9;--color-primary-light-1:#6cb6eb;--color-primary-light-2:#63a1d0;--color-primary-light-3:#5a8db5;--color-primary-light-4:#51789a;--color-primary-light-5:#48637f;--color-primary-light-6:#3f4f64;--color-primary-light-7:#363a49;--color-primary-alpha-10:rgba(108,182,235,0.1);--color-primary-alpha-20:rgba(108,182,235,0.2);--color-primary-alpha-30:rgba(108,182,235,0.3);--color-primary-alpha-40:rgba(108,182,235,0.4);--color-primary-alpha-50:rgba(108,182,235,0.5);--color-primary-alpha-60:rgba(108,182,235,0.6);--color-primary-alpha-70:rgba(108,182,235,0.7);--color-primary-alpha-80:rgba(108,182,235,0.8);--color-primary-alpha-90:rgba(108,182,235,0.9);--color-secondary:#404455;--color-secondary-dark-1:#404455;--color-secondary-dark-2:#4b4f60;--color-secondary-dark-3:#565b6b;--color-secondary-dark-4:#616676;--color-secondary-dark-5:#6c7281;--color-secondary-dark-6:#777d8c;--color-secondary-dark-7:#838997;--color-secondary-dark-8:#8e94a2;--color-secondary-dark-9:#999fad;--color-secondary-dark-10:#a4abb8;--color-secondary-dark-11:#afb6c3;--color-secondary-dark-12:#bac2ce;--color-secondary-dark-13:#c5cdd9;--color-secondary-light-1:#404455;--color-secondary-light-2:#3a3e4e;--color-secondary-light-3:#363a49;--color-secondary-light-4:#333644;--color-secondary-alpha-10:rgba(64,68,85,0.1);--color-secondary-alpha-20:rgba(64,68,85,0.2);--color-secondary-alpha-30:rgba(64,68,85,0.3);--color-secondary-alpha-40:rgba(64,68,85,0.4);--color-secondary-alpha-50:rgba(64,68,85,0.5);--color-secondary-alpha-60:rgba(64,68,85,0.6);--color-secondary-alpha-70:rgba(64,68,85,0.7);--color-secondary-alpha-80:rgba(64,68,85,0.8);--color-secondary-alpha-90:rgba(64,68,85,0.9);--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;--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;--color-black:#363a49;--color-gold:#deb974;--color-white:#c5cdd9;--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:#363a49;--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;--color-body:#2b2d37;--color-box-header:#3a3e4e;--color-box-body:#333644;--color-box-body-highlight:#363a49;--color-text-dark:#d38aea;--color-text:#c5cdd9;--color-text-hover:rgba(197,205,217,0.8);--color-text-light:#a0c980;--color-text-light-1:#758094;--color-text-light-2:#c5cdd9;--color-text-light-3:#758094;--color-footer:#333644;--color-timeline:#404455;--color-input-text:#c5cdd9;--color-input-background:#2b2d37;--color-input-toggle-background:#333644;--color-input-border:#404455;--color-input-border-hover:#5b6275;--color-navbar:#333644;--color-navbar-transparent:#333644;--color-light:#333644;--color-light-mimic-enabled:rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));--color-light-border:#404455;--color-hover:rgba(64,68,85,0.5);--color-active:#ffffff00;--color-menu:#333644;--color-card:#333644;--color-markup-table-row:#3a3e4e;--color-markup-code-block:#2b2d37;--color-button:#3a3e4e;--color-code-bg:#2b2d37;--color-code-sidebar-bg:#333644;--color-shadow:#00000060;--color-secondary-bg:#333644;--color-text-focus:#fff;--color-expand-button:#363a49;--color-placeholder-text:#758094;--color-editor-line-highlight:#333644;--color-project-board-bg:#2b2d37;--color-caret:var(--color-text);--color-reaction-bg:#ffffff12;--color-reaction-active-bg:var(--color-primary-alpha-40);--color-header-bar:#333644;--color-label-active-bg:#404455;--color-accent:var(--color-primary-light-1);--color-small-accent:var(--color-primary-light-5);--color-active-line:#333644;accent-color:var(--color-accent);color-scheme:dark}.chroma .nx{color:#c5cdd9}.chroma .c,.chroma .c1,.chroma .ch{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 .si,.chroma .sa,.chroma .se,.chroma .sr,.chroma .s1,.chroma .s2,.chroma .nt,.chroma .cpf{color:#a0c980}.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo{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{color:#5dbbc1}.ui.primary.button,.ui.primary.buttons .button{background:#6cb6eb;background-color:#6cb6eb !important;color:#2b2d37}.ui.primary.button:hover,.ui.primary.buttons .button:hover{background:rgba(108,182,235,0.8);background-color:rgba(108,182,235,0.8) !important;color:#2b2d37}.ui.green.buttons .button,.ui.green.button{background:#a0c980;background-color:#a0c980;color:#2b2d37}.ui.green.buttons .button:hover,.ui.green.button:hover{background:rgba(160,201,128,0.8);background-color:rgba(160,201,128,0.8);color:#2b2d37}.ui.red.labels .label,.ui.ui.ui.red.label,.ui.red.button,.ui.red.buttons .button{background:#ec7279;background-color:#ec7279;color:#2b2d37}.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:#2b2d37}.ui.labeled.button.disabled>.button,.ui.basic.buttons .button,.ui.basic.button{color:#d38aea}.ui.labeled.button.disabled>.button:hover,.ui.basic.buttons .button:hover,.ui.basic.button:hover{color:#d38aea}.repo-title{color:#d38aea}.repo-buttons button[disabled]~.label,.repo-buttons .ui.labeled.button.disabled>.label{color:#6cb6eb}.ui.basic.labels .label,.ui.basic.label{color:#6cb6eb}.repository .ui.segment.sub-menu .list .item a:hover,.ui.tabular.menu .item:hover{color:var(--color-text-hover)}*{scrollbar-color:#d38aea transparent !important}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{box-shadow:inset 0 0 0 6px #d38aea !important;border:2px solid transparent;border-radius:5px !important}::-webkit-scrollbar-thumb:window-inactive{box-shadow:inset 0 0 0 6px #d38aea !important}::-webkit-scrollbar-thumb:hover{box-shadow:inset 0 0 0 6px #d38aea !important}::-webkit-scrollbar-corner{background:transparent} \ No newline at end of file diff --git a/src/base-dark.less b/src/base-dark.less new file mode 100644 index 0000000..edad7a1 --- /dev/null +++ b/src/base-dark.less @@ -0,0 +1,278 @@ +: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: @fg; + --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-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: @grey; + --color-text-light-2: @fg; + --color-text-light-3: @grey; + --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-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: #ffffff00; + --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: @grey; + --color-editor-line-highlight: @bg1; + --color-project-board-bg: @bg0; + --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-active-bg: @bg4; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: @bg1; + + accent-color: var(--color-accent); + color-scheme: dark; +} + +/* code theme */ +.chroma .nx { + color: @fg; +} +.chroma .c, .chroma .c1, .chroma .ch { + 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 .si, .chroma .sa, .chroma .se, .chroma .sr, .chroma .s1, .chroma .s2, .chroma .nt, .chroma .cpf { + color: @string; +} +.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .mo { + 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 { + 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; +} + +/* 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; +} + +/* 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; +} + +/* 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); +} + +/* 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; +} diff --git a/src/edge-dark.less b/src/edge-dark.less new file mode 100644 index 0000000..242e387 --- /dev/null +++ b/src/edge-dark.less @@ -0,0 +1,33 @@ +@primary: #6cb6eb; // primary color used in main texts +@secondary: #d38aea; // secondary color used in some texts and text based buttons +@tertiary: #a0c980; // tertiary color used in other colored texts +@fg: #c5cdd9; +@bg0: #2b2d37; +@bg1: #333644; +@bg2: #363a49; +@bg3: #3a3e4e; +@bg4: #404455; +@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: #6cb6eb; +@button2: #a0c980; +@button-red: #ec7279; +@key: @red; +@operator: @purple; +@string: @green; +@value: @green; +@type: @yellow; +@function: @blue; +@special: @cyan; + +@import "base-dark";