diff --git a/ui/packages/consul-ui/app/components/pill/index.scss b/ui/packages/consul-ui/app/components/pill/index.scss
index ee870d1c1e..1ad95dfe86 100644
--- a/ui/packages/consul-ui/app/components/pill/index.scss
+++ b/ui/packages/consul-ui/app/components/pill/index.scss
@@ -34,7 +34,7 @@ span.policy-service-identity::before {
@extend %with-logo-consul-color-icon, %as-pseudo;
}
%pill.vault::before {
- @extend %with-logo-vault-color-icon, %as-pseudo;
+ @extend %with-vault-300;
}
%pill.aws::before {
@extend %with-logo-aws-color-icon, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/components/popover-select/index.scss b/ui/packages/consul-ui/app/components/popover-select/index.scss
index 235fc643d4..a4fc7df8e9 100644
--- a/ui/packages/consul-ui/app/components/popover-select/index.scss
+++ b/ui/packages/consul-ui/app/components/popover-select/index.scss
@@ -69,7 +69,7 @@
@extend %with-logo-nomad-color-icon, %as-pseudo;
}
%popover-select .vault button::before {
- @extend %with-logo-vault-color-icon, %as-pseudo;
+ @extend %with-vault-300;
}
%popover-select .terraform button::before {
@extend %with-logo-terraform-color-icon, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/styles/app.scss b/ui/packages/consul-ui/app/styles/app.scss
index 30d5235ff5..3834601dc0 100644
--- a/ui/packages/consul-ui/app/styles/app.scss
+++ b/ui/packages/consul-ui/app/styles/app.scss
@@ -11,5 +11,7 @@
@import 'layout';
/* pinpoint individual overwrites for those 'just on this page' problems */
@import 'routes';
+/* more semantically (for our project) named icons */
+@import 'icons';
/* global control of themeable components */
@import 'themes';
diff --git a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss
index 1de2f5c5c1..e88817cda7 100644
--- a/ui/packages/consul-ui/app/styles/base/color/base-variables.scss
+++ b/ui/packages/consul-ui/app/styles/base/color/base-variables.scss
@@ -11,6 +11,18 @@
--steel-800: 66 73 77;
--steel-900: 40 44 46;
+ /* vault refresh */
+ --lemon-050: 255 216 20;
+ --lemon-100: 255 216 20;
+ --lemon-200: 255 216 20;
+ --lemon-300: 255 216 20;
+ --lemon-400: 255 216 20;
+ --lemon-500: 255 216 20;
+ --lemon-600: 255 216 20;
+ --lemon-700: 255 216 20;
+ --lemon-800: 255 216 20;
+ --lemon-900: 255 216 20;
+
/* consul */
--magenta-050: 249 235 242;
--magenta-100: 239 196 216;
@@ -61,8 +73,8 @@
--indigo-900: 26 22 63;
/* nomad */
- --teal-050: 235 248 243;/*#c3ecdc*/;
- --teal-100: 195 236 220;/*#e1e4e7*/;
+ --teal-050: 235 248 243; /*#c3ecdc*/
+ --teal-100: 195 236 220; /*#e1e4e7*/
--teal-200: 155 223 197;
--teal-300: 116 211 174;
--teal-400: 76 198 151;
@@ -84,9 +96,9 @@
--cyan-800: 0 85 116;
--cyan-900: 0 51 70;
-/* ui */
+ /* ui */
-/* removed to prevent confusion
+ /* removed to prevent confusion
--gray-1: #191a1c;
--gray-2: #323538;
--gray-3: #4c4f54;
@@ -114,7 +126,7 @@
--gray-900: 31 33 36;
--gray-950: 21 23 28;
-/* status */
+ /* status */
--green-050: 236 247 237;
--green-100: 198 233 201;
--green-200: 160 219 165;
@@ -150,7 +162,7 @@
--red-800: 91 24 32;
--red-900: 55 15 19;
- --orange-050: 254 244 236;/*#fa8f37*/;
+ --orange-050: 254 244 236; /*#fa8f37*/
--orange-100: 253 224 200;
--orange-200: 252 204 164;
--orange-300: 251 183 127;
@@ -161,7 +173,7 @@
--orange-800: 114 65 25;
--orange-900: 69 39 15;
- --yellow-050: 255 251 237;/*#fa8f37;*/
+ --yellow-050: 255 251 237; /*#fa8f37;*/
--yellow-100: 253 238 186;
--yellow-200: 252 228 140;
--yellow-300: 251 217 94;
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/frame-placeholders.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/index.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/index.scss
new file mode 100644
index 0000000000..e62440c7cb
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/lemon/index.scss
@@ -0,0 +1,5 @@
+@import './themes/light';
+@import './themes/dark';
+@import './themes/light-high-contrast';
+@import './themes/dark-high-contrast';
+@import './frame-placeholders';
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark-high-contrast.scss
new file mode 100644
index 0000000000..d57568f4a9
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark-high-contrast.scss
@@ -0,0 +1,17 @@
+%theme-dark-high-contrast {
+ --tone-lemon-000: var(--white);
+ --tone-lemon-050: var(--lemon-050);
+ --tone-lemon-100: var(--lemon-100);
+ --tone-lemon-150: var(--lemon-150);
+ --tone-lemon-200: var(--lemon-200);
+ --tone-lemon-300: var(--lemon-300);
+ --tone-lemon-400: var(--lemon-400);
+ --tone-lemon-500: var(--lemon-500);
+ --tone-lemon-600: var(--lemon-600);
+ --tone-lemon-700: var(--lemon-700);
+ --tone-lemon-800: var(--lemon-800);
+ --tone-lemon-850: var(--lemon-850);
+ --tone-lemon-900: var(--lemon-900);
+ --tone-lemon-950: var(--lemon-950);
+ --tone-lemon-999: var(--black);
+}
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark.scss
new file mode 100644
index 0000000000..be9f8551e5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/dark.scss
@@ -0,0 +1,17 @@
+%theme-dark {
+ --tone-lemon-000: var(--white);
+ --tone-lemon-050: var(--lemon-050);
+ --tone-lemon-100: var(--lemon-100);
+ --tone-lemon-150: var(--lemon-150);
+ --tone-lemon-200: var(--lemon-200);
+ --tone-lemon-300: var(--lemon-300);
+ --tone-lemon-400: var(--lemon-400);
+ --tone-lemon-500: var(--lemon-500);
+ --tone-lemon-600: var(--lemon-600);
+ --tone-lemon-700: var(--lemon-700);
+ --tone-lemon-800: var(--lemon-800);
+ --tone-lemon-850: var(--lemon-850);
+ --tone-lemon-900: var(--lemon-900);
+ --tone-lemon-950: var(--lemon-950);
+ --tone-lemon-999: var(--black);
+}
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light-high-contrast.scss
new file mode 100644
index 0000000000..5a7fac0f04
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light-high-contrast.scss
@@ -0,0 +1,17 @@
+%theme-light-high-contrast {
+ --tone-lemon-000: var(--white);
+ --tone-lemon-050: var(--lemon-050);
+ --tone-lemon-100: var(--lemon-100);
+ --tone-lemon-150: var(--lemon-150);
+ --tone-lemon-200: var(--lemon-200);
+ --tone-lemon-300: var(--lemon-300);
+ --tone-lemon-400: var(--lemon-400);
+ --tone-lemon-500: var(--lemon-500);
+ --tone-lemon-600: var(--lemon-600);
+ --tone-lemon-700: var(--lemon-700);
+ --tone-lemon-800: var(--lemon-800);
+ --tone-lemon-850: var(--lemon-850);
+ --tone-lemon-900: var(--lemon-900);
+ --tone-lemon-950: var(--lemon-950);
+ --tone-lemon-999: var(--black);
+}
diff --git a/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light.scss
new file mode 100644
index 0000000000..4e937d5cf5
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/lemon/themes/light.scss
@@ -0,0 +1,17 @@
+%theme-light {
+ --tone-lemon-000: var(--white);
+ --tone-lemon-050: var(--lemon-050);
+ --tone-lemon-100: var(--lemon-100);
+ --tone-lemon-150: var(--lemon-150);
+ --tone-lemon-200: var(--lemon-200);
+ --tone-lemon-300: var(--lemon-300);
+ --tone-lemon-400: var(--lemon-400);
+ --tone-lemon-500: var(--lemon-500);
+ --tone-lemon-600: var(--lemon-600);
+ --tone-lemon-700: var(--lemon-700);
+ --tone-lemon-800: var(--lemon-800);
+ --tone-lemon-850: var(--lemon-850);
+ --tone-lemon-900: var(--lemon-900);
+ --tone-lemon-950: var(--lemon-950);
+ --tone-lemon-999: var(--black);
+}
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/frame-placeholders.scss b/ui/packages/consul-ui/app/styles/base/color/vault/frame-placeholders.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/index.scss b/ui/packages/consul-ui/app/styles/base/color/vault/index.scss
new file mode 100644
index 0000000000..74aa4c7b11
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/vault/index.scss
@@ -0,0 +1,6 @@
+@import '../lemon';
+@import './themes/light';
+@import './themes/dark';
+@import './themes/light-high-contrast';
+@import './themes/dark-high-contrast';
+@import './frame-placeholders';
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark-high-contrast.scss
new file mode 100644
index 0000000000..00bcce3c6c
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark-high-contrast.scss
@@ -0,0 +1,3 @@
+%theme-dark-high-contrast {
+ --tone-vault-500: var(--lemon-500);
+}
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark.scss
new file mode 100644
index 0000000000..d873db1590
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/vault/themes/dark.scss
@@ -0,0 +1,3 @@
+%theme-dark {
+ --tone-vault-500: var(--lemon-500);
+}
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/light-high-contrast.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/light-high-contrast.scss
new file mode 100644
index 0000000000..cac38c06a0
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/vault/themes/light-high-contrast.scss
@@ -0,0 +1,3 @@
+%theme-light-high-contrast {
+ --tone-vault-500: var(--black);
+}
diff --git a/ui/packages/consul-ui/app/styles/base/color/vault/themes/light.scss b/ui/packages/consul-ui/app/styles/base/color/vault/themes/light.scss
new file mode 100644
index 0000000000..669ed33f7e
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/base/color/vault/themes/light.scss
@@ -0,0 +1,3 @@
+%theme-light {
+ --tone-vault-500: var(--black);
+}
diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
index 673e9d8a8e..70a4e386e6 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
@@ -3891,7 +3891,7 @@
}
%vault-16-svg-prop {
- --vault-16-svg: url('data:image/svg+xml;charset=UTF-8,');
+ --vault-16-svg: url('data:image/svg+xml;charset=UTF-8,');
}
%vault-24-svg-prop {
diff --git a/ui/packages/consul-ui/app/styles/icons.scss b/ui/packages/consul-ui/app/styles/icons.scss
new file mode 100644
index 0000000000..96eac426b8
--- /dev/null
+++ b/ui/packages/consul-ui/app/styles/icons.scss
@@ -0,0 +1,4 @@
+%with-vault-300 {
+ @extend %with-vault-16-mask, %as-pseudo;
+ color: rgb(var(--tone-vault-500));
+}
diff --git a/ui/packages/consul-ui/app/styles/themes.scss b/ui/packages/consul-ui/app/styles/themes.scss
index 058347ed4e..69282b79e7 100644
--- a/ui/packages/consul-ui/app/styles/themes.scss
+++ b/ui/packages/consul-ui/app/styles/themes.scss
@@ -1,9 +1,15 @@
@import './base/color/ui/index';
@import './base/color/magenta/index';
@import './base/color/strawberry/index';
-:root {
+@import './base/color/vault/index';
+
+:root:not(.prefers-color-scheme-dark) {
@extend %theme-light;
}
+:root.prefers-color-scheme-dark {
+ @extend %theme-dark;
+}
+
%main-header-horizontal,
%main-nav-vertical,
%main-nav-horizontal {
diff --git a/ui/packages/consul-ui/app/utils/get-environment.js b/ui/packages/consul-ui/app/utils/get-environment.js
index d350ca6ecf..157eef2f8e 100644
--- a/ui/packages/consul-ui/app/utils/get-environment.js
+++ b/ui/packages/consul-ui/app/utils/get-environment.js
@@ -25,7 +25,31 @@ export default function(config = {}, win = window, doc = document) {
};
win['Scenario'] = function(str = '') {
if (str.length > 0) {
- cookies(str).forEach(item => (doc.cookie = `${item};Path=/`));
+ cookies(str).forEach(item => {
+ // this current outlier is the only one that
+ // 1. Toggles
+ // 2. Uses localStorage
+ // Once we have a user facing widget to do this, it can all go
+ if (item.startsWith('CONSUL_COLOR_SCHEME=')) {
+ const [, value] = item.split('=');
+ let current;
+ try {
+ current = JSON.parse(win.localStorage.getItem('consul:theme'));
+ } catch (e) {
+ current = {
+ 'color-scheme': 'light',
+ };
+ }
+ win.localStorage.setItem(
+ 'consul:theme',
+ `{"color-scheme": "${
+ value === '!' ? (current['color-scheme'] === 'light' ? 'dark' : 'light') : value
+ }"}`
+ );
+ } else {
+ doc.cookie = `${item};Path=/`;
+ }
+ });
win.location.hash = '';
location.reload();
} else {
@@ -70,9 +94,7 @@ export default function(config = {}, win = window, doc = document) {
};
const operatorConfig = {
...config.operatorConfig,
- ...JSON.parse(
- doc.querySelector(`[data-${config.modulePrefix}-config]`).textContent
- )
+ ...JSON.parse(doc.querySelector(`[data-${config.modulePrefix}-config]`).textContent),
};
const ui_config = operatorConfig.UIConfig || {};
const scripts = doc.getElementsByTagName('script');
diff --git a/ui/packages/consul-ui/docs/bookmarklets.mdx b/ui/packages/consul-ui/docs/bookmarklets.mdx
index fe33e10054..cc19f72171 100644
--- a/ui/packages/consul-ui/docs/bookmarklets.mdx
+++ b/ui/packages/consul-ui/docs/bookmarklets.mdx
@@ -7,7 +7,8 @@ Below is a list of the most commonly used functions as bookmarklets followed by
| Link/Bookmarklet | Description |
| ---- | ----------- |
| [Print Routing DSL](javascript:Routes()) | Print out Ember's Route DSL for the application |
-| [Save Current Scenario](javascript:Scenario()) | Opens a tab with links to allow you to create a bookmarklet or share a URL of your current scenario (your Consul UI relarted development/debug cookies) |
+| [Save Current Scenario](javascript:Scenario()) | Opens a tab with links to allow you to create a bookmarklet or share a URL of your current scenario (your Consul UI related development/debug cookies) |
+| [Toggle Color Scheme](javascript:Scenario('CONSUL_COLOR_SCHEME=!')) | Toggle Color Scheme from light to dark or vice versa |
| [Enable ACLs](javascript:Scenario('CONSUL_ACLS_ENABLE=1')) | Enable ACLs |
| [Enable TProxy](javascript:Scenario('CONSUL_TPROXY_ENABLE=1')) | Enable TProxy |
| [Enable Nspaces](javascript:Scenario('CONSUL_NSPACES_ENABLE=1')) | Enable Namespace Support |