apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Theme: Change dark theme borders to improve contrast on primary background (#67699)

Browse Source
pull/67787/head
Torkel Ödegaard 3 years ago committed by GitHub
parent 4d7c0904ef
commit 2b2afb1784
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 13 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      packages/grafana-data/src/themes/createColors.ts
  2. 20
      public/sass/_variables.dark.generated.scss

6
packages/grafana-data/src/themes/createColors.ts
Unescape View File

@ -89,9 +89,9 @@ class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
whiteBase = '204, 204, 220'; whiteBase = '204, 204, 220';
border = { border = {
weak: `rgba(${this.whiteBase}, 0.07)`, weak: `rgba(${this.whiteBase}, 0.12)`,
medium: `rgba(${this.whiteBase}, 0.15)`, medium: `rgba(${this.whiteBase}, 0.20)`,
strong: `rgba(${this.whiteBase}, 0.25)`, strong: `rgba(${this.whiteBase}, 0.30)`,
}; };
text = { text = {

20
public/sass/_variables.dark.generated.scss
Unescape View File

@ -64,10 +64,10 @@ $layer0: #111217;
$layer1: #181b1f; $layer1: #181b1f;
$layer2: #22252b; $layer2: #22252b;
$divider: rgba(204, 204, 220, 0.07); $divider: rgba(204, 204, 220, 0.12);
$border0: rgba(204, 204, 220, 0.07); $border0: rgba(204, 204, 220, 0.12);
$border1: rgba(204, 204, 220, 0.15); $border1: rgba(204, 204, 220, 0.20);
// Accent colors // Accent colors
// ------------------------- // -------------------------
@ -133,7 +133,7 @@ $hr-border-color: $dark-9;
// Panel // Panel
// ------------------------- // -------------------------
$panel-bg: #181b1f; $panel-bg: #181b1f;
$panel-border: 1px solid rgba(204, 204, 220, 0.07); $panel-border: 1px solid rgba(204, 204, 220, 0.12);
$panel-header-hover-bg: rgba(204, 204, 220, 0.16); $panel-header-hover-bg: rgba(204, 204, 220, 0.16);
$panel-box-shadow: none; $panel-box-shadow: none;
$panel-corner: $panel-bg; $panel-corner: $panel-bg;
@ -173,7 +173,7 @@ $scrollbarBorder: black;
// Tables // Tables
// ------------------------- // -------------------------
$table-bg-accent: #22252b; $table-bg-accent: #22252b;
$table-border: rgba(204, 204, 220, 0.15); $table-border: rgba(204, 204, 220, 0.20);
$table-bg-odd: rgb(28, 31, 35); $table-bg-odd: rgb(28, 31, 35);
$table-bg-hover: rgb(35, 38, 42); $table-bg-hover: rgb(35, 38, 42);
@ -215,7 +215,7 @@ $input-bg: #111217;
$input-bg-disabled: rgba(204, 204, 220, 0.04); $input-bg-disabled: rgba(204, 204, 220, 0.04);
$input-color: rgb(204, 204, 220); $input-color: rgb(204, 204, 220);
$input-border-color: rgba(204, 204, 220, 0.15); $input-border-color: rgba(204, 204, 220, 0.20);
$input-box-shadow: none; $input-box-shadow: none;
$input-border-focus: #6E9FFF; $input-border-focus: #6E9FFF;
$input-box-shadow-focus: #6E9FFF !default; $input-box-shadow-focus: #6E9FFF !default;
@ -234,9 +234,9 @@ $typeahead-selected-color: $yellow;
// Dropdowns // Dropdowns
// ------------------------- // -------------------------
$dropdownBackground: #181b1f; $dropdownBackground: #181b1f;
$dropdownBorder: rgba(204, 204, 220, 0.07); $dropdownBorder: rgba(204, 204, 220, 0.12);
$dropdownDividerTop: rgba(204, 204, 220, 0.07); $dropdownDividerTop: rgba(204, 204, 220, 0.12);
$dropdownDividerBottom: rgba(204, 204, 220, 0.07); $dropdownDividerBottom: rgba(204, 204, 220, 0.12);
$dropdownShadow: 0px 8px 24px rgb(1,4,9); $dropdownShadow: 0px 8px 24px rgb(1,4,9);
$dropdownLinkColor: $link-color; $dropdownLinkColor: $link-color;
@ -299,7 +299,7 @@ $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.75);
$popover-bg: #181b1f; $popover-bg: #181b1f;
$popover-color: rgb(204, 204, 220); $popover-color: rgb(204, 204, 220);
$popover-border-color: rgba(204, 204, 220, 0.07); $popover-border-color: rgba(204, 204, 220, 0.12);
$popover-header-bg: #22252b; $popover-header-bg: #22252b;
$popover-shadow: 0px 8px 24px rgb(1,4,9); $popover-shadow: 0px 8px 24px rgb(1,4,9);

Write Preview
Loading…
Cancel
Save