@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/themes/botanical.css

@@ -0,0 +1,157 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */
+
+@import "./defaults.css";
+
+/* Register theme for auto-detection */
+perspective-viewer,
+perspective-viewer[theme="Botanical"] {
+    --psp-theme-name: "Botanical";
+}
+
+perspective-viewer[theme="Botanical"] {
+    /* perspective-viewer-botanical--colors */
+    background-color: #1a2e1a;
+    color: #e0ead8;
+    --psp--color: #e0ead8;
+    --psp-active--color: #5a9e4b;
+    --psp-error--color: #e8836a;
+    --psp-inactive--color: #526b4a;
+    --psp-inactive--border-color: #3d5c3d;
+    --psp--background-color: #1a2e1a;
+    --psp-active--background: rgba(90, 158, 75, 0.5);
+    --psp-expression--operator--color: #b8c9ad;
+    --psp-expression--function--color: #7bc96f;
+    --psp-expression--psp-error--color: rgb(232, 131, 106);
+    --psp-calendar--filter: invert(1);
+    --psp-warning--color: #1a2e1a;
+    --psp-warning--background: var(--psp--color);
+
+    --psp-icon--select-arrow--mask-image: var(
+        --psp-icon--select-arrow-light--mask-image
+    );
+
+    --psp-icon--select-arrow-hover--mask-image: var(
+        --psp-icon--select-arrow-dark--mask-image
+    );
+
+    /* Syntax */
+    --psp-code-editor--symbol--color: #e0ead8;
+    --psp-code-editor--literal--color: #a8d8a0;
+    --psp-code-editor--operator--color: rgb(206, 176, 104);
+    --psp-code-editor--comment--color: rgb(120, 160, 100);
+    --psp-code-editor--column--color: #c9a0d8;
+
+    /* perspective-viewer-botanical--datagrid */
+    --psp-datagrid--pos-cell--color: #7bc96f;
+    --psp-datagrid--neg-cell--color: #ebac21;
+
+    /* perspective-viewer-botanical--d3fc */
+    --psp-d3fc--legend--color: #b8c9ad;
+    --psp-d3fc--treemap--labels: #e0ead8;
+    --psp-d3fc--treemap--hover-highlight: #e0ead8;
+    --psp-d3fc--tooltip--color: #e0ead8;
+    --psp-d3fc--axis-ticks--color: #b8c9ad;
+    --psp-d3fc--axis-lines--color: #526b4a;
+    --psp-d3fc--gridline--color: #2a4228;
+    --psp-d3fc--tooltip--background: rgba(30, 52, 32, 1);
+    --psp-d3fc--tooltip--border-color: #1a2e1a;
+    --psp-d3fc--legend--background: var(--psp--background-color);
+
+    --psp-d3fc--series--color: rgb(90, 158, 75);
+    --psp-d3fc--series-1--color: rgb(90, 158, 75);
+    --psp-d3fc--series-2--color: rgb(206, 176, 104);
+    --psp-d3fc--series-3--color: rgb(160, 110, 180);
+    --psp-d3fc--series-4--color: rgb(80, 170, 150);
+    --psp-d3fc--series-5--color: rgb(140, 170, 90);
+    --psp-d3fc--series-6--color: rgb(200, 120, 140);
+    --psp-d3fc--series-7--color: rgb(100, 150, 190);
+    --psp-d3fc--series-8--color: rgb(210, 140, 80);
+    --psp-d3fc--series-9--color: rgb(130, 120, 190);
+    --psp-d3fc--series-10--color: rgb(170, 200, 110);
+
+    --psp-d3fc--full-gradient--background: linear-gradient(
+        #e8836a 0%,
+        #1a2e1a 50%,
+        #5a9e4b 100%
+    );
+
+    --psp-d3fc--pos-gradient--background: linear-gradient(
+        #1a2e1a 0%,
+        #5a9e4b 100%
+    );
+    --psp-d3fc--neg-gradient--background: linear-gradient(
+        #e8836a 0%,
+        #1a2e1a 100%
+    );
+
+    /* perspective-viewer-botanical--openlayers */
+    --psp-openlayers--tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
+    --psp-openlayers--attribution--filter: invert(1) hue-rotate(180deg);
+    --psp-openlayers--element--background: #1e3420;
+    --psp-openlayers--category-1--color: rgb(90, 158, 75);
+    --psp-openlayers--category-2--color: rgb(206, 176, 104);
+    --psp-openlayers--category-3--color: rgb(160, 110, 180);
+    --psp-openlayers--category-4--color: rgb(80, 170, 150);
+    --psp-openlayers--category-5--color: rgb(140, 170, 90);
+    --psp-openlayers--category-6--color: rgb(200, 120, 140);
+    --psp-openlayers--category-7--color: rgb(100, 150, 190);
+    --psp-openlayers--category-8--color: rgb(210, 140, 80);
+    --psp-openlayers--category-9--color: rgb(130, 120, 190);
+    --psp-openlayers--category-10--color: rgb(170, 200, 110);
+    --psp-openlayers--gradient--background: linear-gradient(
+        #e8836a 0%,
+        #1a2e1a 50%,
+        #5a9e4b 100%
+    );
+}
+
+perspective-copy-menu[theme="Botanical"],
+perspective-export-menu[theme="Botanical"],
+perspective-dropdown[theme="Botanical"],
+perspective-date-column-style[theme="Botanical"],
+perspective-datetime-column-style[theme="Botanical"],
+perspective-number-column-style[theme="Botanical"],
+perspective-string-column-style[theme="Botanical"] {
+    /* perspective-viewer-botanical--colors */
+    background-color: #1a2e1a;
+    color: #e0ead8;
+    --psp--color: #e0ead8;
+    --psp-active--color: #5a9e4b;
+    --psp-error--color: #e8836a;
+    --psp-inactive--color: #526b4a;
+    --psp-inactive--border-color: #3d5c3d;
+    --psp--background-color: #1a2e1a;
+    --psp-active--background: rgba(90, 158, 75, 0.5);
+    --psp-expression--operator--color: #b8c9ad;
+    --psp-expression--function--color: #7bc96f;
+    --psp-expression--psp-error--color: rgb(232, 131, 106);
+    --psp-calendar--filter: invert(1);
+    --psp-warning--color: #1a2e1a;
+    --psp-warning--background: var(--psp--color);
+
+    --psp-icon--select-arrow--mask-image: var(
+        --psp-icon--select-arrow-light--mask-image
+    );
+
+    --psp-icon--select-arrow-hover--mask-image: var(
+        --psp-icon--select-arrow-dark--mask-image
+    );
+
+    --psp-code-editor--symbol--color: #e0ead8;
+    --psp-code-editor--literal--color: #a8d8a0;
+    --psp-code-editor--operator--color: rgb(206, 176, 104);
+    --psp-code-editor--comment--color: rgb(120, 160, 100);
+    --psp-code-editor--column--color: #c9a0d8;
+
+    border: 1px solid #3d5c3d;
+}

package/src/themes/defaults.css

@@ -0,0 +1,139 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */
+
+@import "./icons.css";
+@import "./intl.css";
+
+perspective-viewer,
+perspective-workspace,
+perspective-copy-menu,
+perspective-export-menu,
+perspective-dropdown,
+perspective-date-column-style,
+perspective-datetime-column-style,
+perspective-number-column-style,
+perspective-string-column-style {
+    /* Colors */
+    --psp-placeholder--background: #8b868045;
+
+    /* Dimensions */
+    --psp-button--font-size: 16px;
+    --psp-config-button--padding: 15px 8px 6px 8px;
+    --psp-column-selector--font-size: 16px;
+    --psp-column-type--width: 25px;
+    --psp-select--padding: 0px;
+    --psp-top-panel-row--display: inline-flex;
+    --psp-button--min-width: 33px;
+
+    /* Fonts */
+    font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
+    --psp-interface-monospace--font-family:
+        "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+        "Liberation Mono", monospace;
+
+    /* Colors (select arrow defaults) */
+    --psp-icon--select-arrow--mask-image: var(
+        --psp-icon--select-arrow-dark--mask-image
+    );
+    --psp-icon--select-arrow-hover--mask-image: var(
+        --psp-icon--select-arrow-light--mask-image
+    );
+
+    /* D3FC */
+    --psp-label--d3fc-y1--content: "arrow_upward";
+    --psp-label--d3fc-y2--content: "arrow_downward";
+    --psp-d3fc--treemap-axis--lines: none;
+    --psp-d3fc--tooltip--background-color: rgba(155, 155, 155, 0.8);
+    --psp-d3fc--tooltip--color: #161616;
+    --psp-d3fc--tooltip--border-color: #fff;
+    --psp-d3fc--tooltip--box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    --psp-d3fc--gridline--color: #eaedef;
+    --psp-d3fc--axis-ticks--color: #161616;
+    --psp-d3fc--axis-lines--color: #c5c9d0;
+    --psp-d3fc--legend--background: var(--psp--background-color);
+    --psp-d3fc--series--color: rgba(31, 119, 180, 0.8);
+    --psp-d3fc--series-1--color: #0366d6;
+    --psp-d3fc--series-2--color: #ff7f0e;
+    --psp-d3fc--series-3--color: #2ca02c;
+    --psp-d3fc--series-4--color: #d62728;
+    --psp-d3fc--series-5--color: #9467bd;
+    --psp-d3fc--series-6--color: #8c564b;
+    --psp-d3fc--series-7--color: #e377c2;
+    --psp-d3fc--series-8--color: #7f7f7f;
+    --psp-d3fc--series-9--color: #bcbd22;
+    --psp-d3fc--series-10--color: #17becf;
+    --psp-d3fc--full-gradient--background: linear-gradient(
+        #4d342f 0%,
+        #e4521b 22.5%,
+        #feeb65 42.5%,
+        #f0f0f0 50%,
+        #dcedc8 57.5%,
+        #42b3d5 67.5%,
+        #1a237e 100%
+    );
+    --psp-d3fc--pos-gradient--background: linear-gradient(
+        #f0f0f0 0%,
+        #dcedc8 10%,
+        #42b3d5 50%,
+        #1a237e 100%
+    );
+    --psp-d3fc--neg-gradient--background: linear-gradient(
+        #4d342f 0%,
+        #e4521b 50%,
+        #feeb65 90%,
+        #f0f0f0 100%
+    );
+
+    /* Datagrid */
+    --psp-datagrid--pos-cell--color: #338dcd;
+    --psp-datagrid--neg-cell--color: #ff471e;
+
+    /* OpenLayers */
+    --psp-openlayers--tile-url: "http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png";
+    --psp-openlayers--element--background: #fff;
+    --psp-openlayers--category-1--color: #0366d6;
+    --psp-openlayers--category-2--color: #ff7f0e;
+    --psp-openlayers--category-3--color: #2ca02c;
+    --psp-openlayers--category-4--color: #d62728;
+    --psp-openlayers--category-5--color: #9467bd;
+    --psp-openlayers--category-6--color: #8c564b;
+    --psp-openlayers--category-7--color: #e377c2;
+    --psp-openlayers--category-8--color: #7f7f7f;
+    --psp-openlayers--category-9--color: #bcbd22;
+    --psp-openlayers--category-10--color: #17becf;
+    --psp-openlayers--gradient--background: linear-gradient(
+        #4d342f 0%,
+        #e4521b 22.5%,
+        #feeb65 42.5%,
+        #f0f0f0 50%,
+        #dcedc8 57.5%,
+        #42b3d5 67.5%,
+        #1a237e 100%
+    );
+}
+
+/* Modal defaults */
+perspective-copy-menu,
+perspective-export-menu,
+perspective-dropdown,
+perspective-date-column-style,
+perspective-datetime-column-style,
+perspective-number-column-style,
+perspective-string-column-style {
+    background-color: white;
+    border: 1px solid var(--psp-inactive--color);
+    border-radius: 0 0 2px 2px;
+    --psp-label--column-style-pos-color--content: "+";
+    --psp-label--column-style-neg-color--content: "-";
+}

package/src/themes/dracula.css

@@ -0,0 +1,233 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ */
+
+@import "./defaults.css";
+
+perspective-viewer,
+perspective-viewer[theme="Dracula"] {
+    --psp-theme-name: "Dracula";
+}
+
+perspective-viewer[theme="Dracula"] {
+    /* perspective-viewer-pro-dark--colors (overrides) */
+    background-color: #242526;
+    color: white;
+    --psp--color: white;
+    --psp-active--color: #2770a9;
+    --psp-error--color: #ff9485;
+    --psp-inactive--color: #61656e;
+    --psp-inactive--border-color: #4c505b;
+    --psp--background-color: #242526;
+    --psp-active--background: rgba(39, 113, 170, 0.5);
+    --psp-expression--operator--color: #c5c9d0;
+    --psp-expression--function--color: #22a0ce;
+    --psp-expression--psp-error--color: rgb(255, 136, 136);
+    --psp-calendar--filter: invert(1);
+    --psp-warning--color: #242526;
+    --psp-warning--background: var(--psp--color);
+
+    --psp-icon--select-arrow--mask-image: var(
+        --psp-icon--select-arrow-light--mask-image
+    );
+
+    --psp-icon--select-arrow-hover--mask-image: var(
+        --psp-icon--select-arrow-dark--mask-image
+    );
+
+    --psp-code-editor--symbol--color: white;
+    --psp-code-editor--literal--color: #7dc3f0;
+    --psp-code-editor--operator--color: rgb(23, 166, 123);
+    --psp-code-editor--comment--color: rgb(204, 120, 48);
+    --psp-code-editor--column--color: #e18ee1;
+
+    /* perspective-viewer-pro-dark--datagrid */
+    --psp-datagrid--pos-cell--color: #7dc3f0;
+    --psp-datagrid--neg-cell--color: #ff9485;
+
+    /* perspective-viewer-pro-dark--d3fc (overrides) */
+    --psp-d3fc--legend--color: #c5c9d0;
+    --psp-d3fc--treemap--labels: white;
+    --psp-d3fc--treemap--hover-highlight: white;
+    --psp-d3fc--tooltip--color: white;
+    --psp-d3fc--axis-ticks--color: #c5c9d0;
+    --psp-d3fc--axis-lines--color: #61656e;
+    --psp-d3fc--gridline--color: #3b3f46;
+    --psp-d3fc--tooltip--background: rgba(42, 44, 47, 1);
+    --psp-d3fc--tooltip--border-color: #242526;
+    --psp-d3fc--legend--background: var(--psp--background-color);
+    --psp-d3fc--series--color: rgb(71, 120, 194);
+    --psp-d3fc--series-1--color: rgb(71, 120, 194);
+    --psp-d3fc--series-2--color: rgb(204, 120, 48);
+    --psp-d3fc--series-3--color: rgb(158, 84, 192);
+    --psp-d3fc--series-4--color: rgb(51, 150, 153);
+    --psp-d3fc--series-5--color: rgb(102, 114, 143);
+    --psp-d3fc--series-6--color: rgb(211, 103, 189);
+    --psp-d3fc--series-7--color: rgb(109, 124, 77);
+    --psp-d3fc--series-8--color: rgb(221, 99, 103);
+    --psp-d3fc--series-9--color: rgb(120, 104, 206);
+    --psp-d3fc--series-10--color: rgb(23, 166, 123);
+    --psp-d3fc--full-gradient--background: linear-gradient(
+        #dd6367 0%,
+        #242526 50%,
+        #3289c8 100%
+    );
+    --psp-d3fc--pos-gradient--background: linear-gradient(
+        #242526 0%,
+        #3289c8 100%
+    );
+    --psp-d3fc--neg-gradient--background: linear-gradient(
+        #dd6367 0%,
+        #242526 100%
+    );
+
+    /* perspective-viewer-pro-dark--openlayers (overrides) */
+    --psp-openlayers--tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
+    --psp-openlayers--attribution--filter: invert(1) hue-rotate(180deg);
+    --psp-openlayers--element--background: #212c2f;
+    --psp-openlayers--category-1--color: rgb(71, 120, 194);
+    --psp-openlayers--category-2--color: rgb(204, 120, 48);
+    --psp-openlayers--category-3--color: rgb(158, 84, 192);
+    --psp-openlayers--category-4--color: rgb(51, 150, 153);
+    --psp-openlayers--category-5--color: rgb(102, 114, 143);
+    --psp-openlayers--category-6--color: rgb(211, 103, 189);
+    --psp-openlayers--category-7--color: rgb(109, 124, 77);
+    --psp-openlayers--category-8--color: rgb(221, 99, 103);
+    --psp-openlayers--category-9--color: rgb(120, 104, 206);
+    --psp-openlayers--category-10--color: rgb(23, 166, 123);
+    --psp-openlayers--gradient--background: linear-gradient(
+        #dd6367 0%,
+        #242526 50%,
+        #3289c8 100%
+    );
+
+    /* perspective-viewer-dracula--colors */
+    --theme-bg0: #191a22;
+    --theme-bg1: #282a36;
+    --theme-bg2: #44475a;
+
+    --theme-gray: #928374;
+
+    --theme-fg0: #f8f8f2;
+    --theme-fg1: #6272a4;
+    --theme-fg2: #44475a;
+
+    --theme-red: #ff5555;
+    --theme-green: #50fa7b;
+    --theme-yellow: #f1fa8c;
+    --theme-blue: #8be9fd;
+    --theme-purple: #bd93f9;
+    --theme-orange: #ffb86c;
+    --theme-pink: #ff79c6;
+
+    color: var(--theme-fg0);
+    background-color: var(--theme-bg0);
+    --psp--color: var(--theme-fg1);
+    --psp-inactive--color: var(--theme-fg2);
+    --psp-inactive--border-color: var(--theme-bg2);
+    --psp--background-color: var(--theme-bg1);
+    --psp-status-icon--connected--color: var(--theme-green);
+    --psp-status-icon--initializing--color: var(--theme-yellow);
+    --psp-status-icon--psp-error--color: var(--theme-red);
+
+    /* perspective-viewer-dracula--datagrid */
+    --psp-datagrid--pos-cell--color: var(--theme-blue);
+    --psp-datagrid--neg-cell--color: var(--theme-red);
+
+    /* perspective-viewer-dracula--d3fc */
+    --psp-d3fc--axis-ticks--color: var(--theme-fg1);
+    --psp-d3fc--gridline--color: var(--theme-bg2);
+    --psp-d3fc--series--color: var(--theme-blue);
+    --psp-d3fc--series-1--color: var(--theme-blue);
+    --psp-d3fc--series-2--color: var(--theme-red);
+    --psp-d3fc--series-3--color: var(--theme-green);
+    --psp-d3fc--series-4--color: var(--theme-yellow);
+    --psp-d3fc--series-5--color: var(--theme-purple);
+    --psp-d3fc--series-6--color: var(--theme-pink);
+    --psp-d3fc--series-7--color: var(--theme-orange);
+
+    --psp-d3fc--neg-gradient--background: linear-gradient(
+        var(--theme-bg0),
+        var(--theme-red)
+    ) !important;
+
+    --psp-d3fc--pos-gradient--background: linear-gradient(
+        var(--theme-bg0),
+        var(--theme-blue)
+    ) !important;
+
+    --psp-d3fc--full-gradient--background: linear-gradient(
+        var(--theme-red),
+        var(--theme-bg0),
+        var(--theme-blue)
+    ) !important;
+}
+
+perspective-copy-menu[theme="Dracula"],
+perspective-export-menu[theme="Dracula"],
+perspective-dropdown[theme="Dracula"] {
+    /* perspective-viewer-pro-dark--colors (overrides) */
+    background-color: #242526;
+    color: white;
+    --psp--color: white;
+    --psp-active--color: #2770a9;
+    --psp-error--color: #ff9485;
+    --psp-inactive--color: #61656e;
+    --psp-inactive--border-color: #4c505b;
+    --psp--background-color: #242526;
+    --psp-active--background: rgba(39, 113, 170, 0.5);
+    --psp-expression--operator--color: #c5c9d0;
+    --psp-expression--function--color: #22a0ce;
+    --psp-expression--psp-error--color: rgb(255, 136, 136);
+    --psp-calendar--filter: invert(1);
+    --psp-warning--color: #242526;
+    --psp-warning--background: var(--psp--color);
+    --psp-icon--select-arrow--mask-image: var(
+        --psp-icon--select-arrow-light--mask-image
+    );
+    --psp-icon--select-arrow-hover--mask-image: var(
+        --psp-icon--select-arrow-dark--mask-image
+    );
+    --psp-code-editor--symbol--color: white;
+    --psp-code-editor--literal--color: #7dc3f0;
+    --psp-code-editor--operator--color: rgb(23, 166, 123);
+    --psp-code-editor--comment--color: rgb(204, 120, 48);
+    --psp-code-editor--column--color: #e18ee1;
+
+    border: 1px solid #4c505b;
+
+    /* perspective-viewer-dracula--colors */
+    --theme-bg0: #191a22;
+    --theme-bg1: #282a36;
+    --theme-bg2: #44475a;
+    --theme-gray: #928374;
+    --theme-fg0: #f8f8f2;
+    --theme-fg1: #6272a4;
+    --theme-fg2: #44475a;
+    --theme-red: #ff5555;
+    --theme-green: #50fa7b;
+    --theme-yellow: #f1fa8c;
+    --theme-blue: #8be9fd;
+    --theme-purple: #bd93f9;
+    --theme-orange: #ffb86c;
+    --theme-pink: #ff79c6;
+
+    color: var(--theme-fg0);
+    --psp--color: var(--theme-fg1);
+    --psp-inactive--color: var(--theme-fg2);
+    --psp-inactive--border-color: var(--theme-bg2);
+    --psp--background-color: var(--theme-bg1);
+    --psp-status-icon--connected--color: var(--theme-green);
+    --psp-status-icon--initializing--color: var(--theme-yellow);
+    --psp-status-icon--psp-error--color: var(--theme-red);
+
+    background-color: var(--theme-bg0);
+}