CircuitVerse/CircuitVerse

View on GitHub
simulator/src/themer/themes.js

Summary

Maintainability
F
4 days
Test Coverage
export default {
    "Default Theme": {
        "--text-navbar--alt": "#000",
        "--br-secondary": "#7d7d7d",
        "--br-circuit-cur": "#fff",
        "--br-circuit": "#fff",
        "--cus-radio_label": "#656565",
        "--primary": "#454545",
        "--text-lite": "#fff",
        "--text-dark": "#000",
        "--text-panel": "white",
        "--bg-navbar": "#454545",
        "--qp-br-tl": "#333333",
        "--qp-br-rd": "#535353",
        "--qp-box-shadow-1": "#3b3b3b",
        "--qp-box-shadow-2": "#4f4f4f",
        "--bg-circuit": "#ddd",
        "--br-circuit": "#454545",
        "--br-primary": "#fff",
        "--bg-primary-moz": "#454545e6",
        "--bg-primary-chr": "#454545b3",
        "--bg-tabs": "#8b8b8b",
        "--bg-icons": "#7d7d7d",
        "--bg-text": "#cacaca",
        "--bg-secondary": "#bbbbbb",
        "--canvas-stroke": "#eee",
        "--canvas-fill": "white",
        "--context-text": "white",
        "--bg-toggle-btn-primary": "#42b983",
        "--primary-btn-hov": "#3ca877",
        "--btn-danger": "#dc5656",
        "--btn-danger-darken": "#b03662",
        "--disable": "#6c8b93",
        "--cus-btn-hov--bg": "#ddd",
        "--cus-btn-hov-text": "#000",
        "--node": "green",
        "--stroke": "black",
        "--fill": "white",
        "--hover-and-sel": "rgba(255, 255, 32, 0.8)",
        "--wire-draw": "black",
        "--wire-cnt": "green",
        "--wire-pow": "lightgreen",
        "--wire-sel": "blue",
        "--wire-lose": "red",
        "--mini-map": "green",
        "--mini-map-stroke": "darkgreen",
        "--input-text": "green",
        "--secondary-stroke": "red",
        "--text": "black",
        "--wire-norm": "black",
        "--node-norm": "green",
        "--splitter": "black",
        "--output-rect": "blue",
        "--disable": "#6c8b93",
        "--touch-menu": "#7d7d7d",
    },
    "Night Sky": {
        "--text-navbar--alt": "#fff",
        "--br-secondary": "#665627",
        "--cus-radio_label": "#0F111A",
        "--primary": "#0F111A", //header bg, panels bg
        "--text-lite": "#FFF", //normal state text
        "--text-dark": "white", //text state on hover, on drop down menu , context menu
        "--text-panel": "white",
        "--bg-navbar": "#0F111A",
        "--br-circuit": "#0F111A", //panel border, tabbar circuit border
        "--br-primary": "#665627", //panel border, tabbar circuit border
        "--br-circuit-cur": "#cccccc",
        "--bg-circuit": "#bdc2ca",
        "--bg-primary-moz": "#0f111ae6", //dialog bg
        "--bg-primary-chr": "#0f111ab3", //dialog bg
        "--bg-tabs": "#727d8d", //tabs bar primary bg,
        "--bg-icons": "#4d647a", //ce icon bg
        "--bg-text": "#727d8d", //drop down, content menu, text bg on hover
        "--bg-secondary": "#536c84", //border color input button,
        "--canvas-fill": "#1B2C33", //canvas bg
        "--canvas-stroke": "#6A7980", //canvas stroke
        "--context-text": "white",
        "--bg-toggle-btn-primary": "#48a69d",
        "--primary-btn-hov": "#3f9189",
        "--btn-danger": "#c33c6c",
        "--btn-danger-darken": "#b03662",
        "--qp-br-tl": "#282d46", //more ligthen than qp box shadow 1
        "--qp-br-rd": "#1d2132",
        "--qp-box-shadow-1": "#1d2132", //lil lighten base
        "--qp-box-shadow-2": "#0a0b11", //lil darken base
        "--cus-btn-hov--bg": "#48a69d",
        "--cus-btn-hov-text": "#fff",
        "--node": "#285963",
        "--stroke": "#35aea9",
        "--fill": "#DEFFFE",
        "--hover-and-sel": "#E3B924",
        "--wire-draw": "#77878C",
        "--wire-cnt": "#3B7F58",
        "--wire-pow": "#75FFB0",
        "--wire-sel": "#208CC9",
        "--wire-lose": "#BF0426",
        "--mini-map": "#3B7F58",
        "--mini-map-stroke": "#607F6E",
        "--input-text": "#3B7F58",
        "--output-rect": "#0487D9",
        "--secondary-stroke": "#BF0426",
        "--text": "#E9FBF8",
        "--wire-norm": "#277F7C",
        "--node-norm": "#FFC231",
        "--splitter": "#0284A8",
        "--disable": "#4F74B0",
        "--touch-menu": "#665627",
    },
    "Lite-born Spring": {
        "--text-navbar--alt": "#000",
        "--br-secondary": "#6B6B6B",
        "--cus-radio_label": "#6B6B6B",
        "--primary": "#EAEAEB", //header bg
        "--text-dark": "#6B6B6B", //normal state text
        "--text-lite": "white", //text state on hover, on drop down menu , context menu
        "--text-panel": "#6B6B6B",
        "--bg-navbar": "#6b6b6b",
        "--qp-br-tl": "#969696", //more ligthen than qp box shadow 1
        "--qp-br-rd": "#545454",
        "--qp-box-shadow-1": "#747474", //lil lighten base .. top left shadow
        "--qp-box-shadow-2": "#5f5f5f", //lil darken base //down right shadow
        // "--bg-tabs": "#EAEAEB", //tabs bar primary bg,
        "--bg-tabs": "#A4A4A4", //tabs bar primary bg,
        "--br-circuit-cur": "#42B983",
        "--bg-circuit": "#D7D7D7",
        "--br-circuit": "#42B983",
        "--br-primary": "#42B983", //panel border, tabbar circuit border
        "--context-text-hov": "#6B6B6B",
        "--context-text": "white",
        "--bg-primary-moz": "rgba(107, 107, 107, 0.904)", //dialog bg, navbar dropwdown //.9 opacity of nav
        "--bg-primary-chr": "rgba(107, 107, 107, 0.704)", //dialog bg navbar dropwdown // .7 opacity of nav
        "--bg-icons": "#DDDDDD", //ce icon bg
        "--bg-text": "#ddd", //drop down, content menu, text bg on hover
        "--bg-secondary": "#6B6B6B", //border color input button,
        "--bg-toggle-btn-primary": "#42B983",
        "--primary-btn-hov": "#66C89C",
        "--btn-danger": "#BF2424",
        "--btn-danger-darken": "#BF414C",
        "--cus-btn-hov--bg": "#42B983",
        "--cus-btn-hov-text": "#fff",
        "--canvas-fill": "white", //canvas bg
        "--canvas-stroke": "#BABABA", //canvas stroke
        "--node": "#42B983",
        "--stroke": "#6B6B6B",
        "--fill": "#EAEAEB",
        "--hover-and-sel": "#FFE99B", //yellow
        "--wire-draw": "#6B6B6B", //black
        "--wire-cnt": "#42B983", //
        "--wire-pow": "#52E539",
        "--wire-sel": "#0FB2F2",
        "--wire-lose": "#F10530",
        "--mini-map": "#42B983",
        "--mini-map-stroke": "#0FB2F2",
        "--input-text": "#42B983",
        "--output-rect": "#0487D9",
        "--secondary-stroke": "#F10530",
        "--text": "#454545",
        "--wire-norm": "#006839",
        "--node-norm": "#FFC231",
        "--splitter": "#00B462",
        "--disable": "#656565",
        "--touch-menu": "#BBBFCA",
    },
    "G&W": {
        "--text-navbar--alt": "#000",
        "--br-secondary": "#6B6B6B",
        "--cus-radio_label": "#6B6B6B",
        "--primary": "#EAEAEB", //header bg
        "--text-dark": "#6B6B6B", //normal state text
        "--text-lite": "white", //text state on hover, on drop down menu , context menu
        "--text-panel": "#656565",
        "--bg-navbar": "#6b6b6b",
        "--qp-br-tl": "#969696", //more ligthen than qp box shadow 1
        "--qp-br-rd": "#545454",
        "--qp-box-shadow-1": "#747474", //lil lighten base .. top left shadow
        "--qp-box-shadow-2": "#5f5f5f", //lil darken base //down right shadow
        // "--bg-tabs": "#EAEAEB", //tabs bar primary bg,
        "--bg-tabs": "#A4A4A4", //tabs bar primary bg,
        "--br-circuit-cur": "#6b6b6b",
        "--bg-circuit": "#D7D7D7",
        "--br-circuit": "#6b6b6b",
        "--br-primary": "#6B6B6B", //panel border, tabbar circuit border
        "--context-text-hov": "#6B6B6B",
        "--context-text": "white",
        "--bg-primary-moz": "rgba(107, 107, 107, 0.904)", //dialog bg, navbar dropwdown //.9 opacity of nav
        "--bg-primary-chr": "rgba(107, 107, 107, 0.704)", //dialog bg navbar dropwdown // .7 opacity of nav
        "--bg-icons": "#DDDDDD", //ce icon bg
        "--bg-text": "#ddd", //drop down, content menu, text bg on hover
        "--bg-secondary": "#6B6B6B", //border color input button,
        "--bg-toggle-btn-primary": "#3ac8a4",
        "--primary-btn-hov": "#71D7BD",
        "--btn-danger": "#fc8771",
        "--btn-danger-darken": "#FDB2A4",
        "--cus-btn-hov--bg": "#3ac8a4",
        "--cus-btn-hov-text": "#fff",
        "--canvas-fill": "white", //canvas bg
        "--canvas-stroke": "#BABABA", //canvas stroke
        "--node": "#42B983",
        "--stroke": "#6B6B6B",
        "--fill": "#EAEAEB",
        "--hover-and-sel": "#FFE99B", //yellow
        "--wire-draw": "#6B6B6B", //black
        "--wire-cnt": "#42B983", //
        "--wire-pow": "#52E539",
        "--wire-sel": "#0FB2F2",
        "--wire-lose": "#F10530",
        "--mini-map": "#42B983",
        "--mini-map-stroke": "#0FB2F2",
        "--input-text": "#42B983",
        "--output-rect": "#0487D9",
        "--secondary-stroke": "#F10530",
        "--text": "#454545",
        "--wire-norm": "#006839",
        "--node-norm": "#FFC231",
        "--splitter": "#00B462",
        "--disable": "#656565",
        "--touch-menu": "#BBBFCA",
    },
    "High Contrast": {
        "--text-navbar--alt": "#000",
        "--br-secondary": "#F38518",
        "--cus-radio_label": "black",
        "--primary": "black", //header bg
        "--text-dark": "black", //normal state text
        "--text-lite": "white", //text state on hover, on drop down menu , context menu
        "--text-panel": "white",
        "--bg-navbar": "black",
        "--qp-br-tl": "#F38518", //more ligthen than qp box shadow 1
        "--qp-br-rd": "#F38518",
        "--qp-box-shadow-1": "#0D0D0D", //lil lighten base .. top left shadow
        "--qp-box-shadow-2": "#0D0D0D", //lil darken base //down right shadow
        "--bg-tabs": "#616161", //tabs bar primary bg,
        "--text-circuit": "black",
        "--br-circuit-cur": "#F38518",
        "--bg-circuit": "#B6B6B6",
        "--br-circuit": "#F38518",
        "--br-primary": "#F38518", //panel border, tabbar circuit border
        "--context-text-hov": "black",
        "--context-text": "white",
        "--bg-primary-moz": "rgba(0, 0, 0, 0.904)", //dialog bg, navbar dropwdown //.9 opacity of nav
        "--bg-primary-chr": "rgba(0, 0, 0, 0.704)", //dialog bg navbar dropwdown // .7 opacity of nav
        "--bg-icons": "#262626", //ce icon bg
        "--bg-text": "#ddd", //drop down, content menu, text bg on hover
        "--bg-secondary": "#6B6B6B", //border color input button,
        "--bg-toggle-btn-primary": "#009599",
        "--primary-btn-hov": "#00b1b6",
        "--btn-danger": "#E45605",
        "--btn-danger-darken": "#fa792f",
        "--cus-btn-hov--bg": "#009599",
        "--cus-btn-hov-text": "#fff",
        "--canvas-fill": "black", //canvas bg
        "--canvas-stroke": "#9ad5e9", //canvas stroke
        "--node": "#26a841",
        "--stroke": "#626262",
        "--fill": "#d4d4d4",
        "--hover-and-sel": "#ffdf6c", //yellow
        "--wire-draw": "#909090", //black
        "--wire-cnt": "#3bb15b", //
        "--wire-pow": "#3ac53c",
        "--wire-sel": "#049ffb",
        "--wire-lose": "#f42f0b",
        "--mini-map": "#1c2427",
        "--mini-map-stroke": "#000",
        "--input-text": "#42B983",
        "--output-rect": "#005682",
        "--secondary-stroke": "#f7081e",
        "--text": "#fff",
        "--wire-norm": "#00b965",
        "--node-norm": "#F38518",
        "--splitter": "#21de5a",
        "--disable": "#262626",
        "--touch-menu": "#F38518",
    },
    "Color Blind": {
        "--text-navbar--alt": "#000",
        "--br-secondary": "#e2dad1",
        "--cus-radio_label": "#2e2b21",
        "--primary": "#2e2b21", //header bg
        "--text-dark": "black", //normal state text
        "--text-lite": "white", //text state on hover, on drop down menu , context menu
        "--text-panel": "white",
        "--bg-navbar": "#2e2b21",
        "--qp-br-tl": "#716950", //more ligthen than qp box shadow 1
        "--qp-br-rd": "#6c654d",
        "--qp-box-shadow-1": "#4f4a38", //lil lighten base .. top left shadow
        "--qp-box-shadow-2": "#302d23", //lil darken base //down right shadow
        "--bg-tabs": "#9a9a9a", //tabs bar primary bg,
        "--text-circuit": "black",
        "--br-circuit-cur": "#e2dad1",
        "--bg-circuit": "#d6d6d6",
        "--br-circuit": "#e2dad1",
        "--br-primary": "#e2dad1", //panel border, tabbar circuit border
        "--context-text-hov": "black",
        "--context-text": "white",
        "--bg-primary-moz": "rgba(46, 43, 33, 1)", //dialog bg, navbar dropwdown //.9 opacity of nav
        "--bg-primary-chr": "rgba(46, 43, 33, 1)", //dialog bg navbar dropwdown // .7 opacity of nav
        "--bg-icons": "#9c7762", //ce icon bg
        "--bg-text": "#ddd", //drop down, content menu, text bg on hover
        "--bg-secondary": "#6B6B6B", //border color input button,
        "--bg-toggle-btn-primary": "#bfaac1",
        "--primary-btn-hov": "#ccbbcd",
        "--btn-danger": "#b66e43",
        "--btn-danger-darken": "#ba7144",
        "--cus-btn-hov--bg": "#b66e43",
        "--cus-btn-hov-text": "#fff",
        "--canvas-fill": "#fff", //canvas bg
        "--canvas-stroke": "#8d88ad", //canvas stroke
        "--node": "#c59434",
        "--stroke": "#342a1f",
        "--fill": "#e0dcd3",
        "--hover-and-sel": "#f4d4d4", //yellow
        "--wire-draw": "#4c4c4c", //black
        "--wire-cnt": "#908eb9", //
        "--wire-pow": "#b3b1cf",
        "--wire-sel": "#a7b8f8",
        "--wire-lose": "#f42f0b",
        "--mini-map": "#4b4636",
        "--mini-map-stroke": "#000",
        "--input-text": "#756d54",
        "--output-rect": "#092c48",
        "--secondary-stroke": "#cdb1ad",
        "--text": "#000",
        "--wire-norm": "#7f7cae",
        "--node-norm": "#c59434",
        "--splitter": "#836222",
        "--disable": "#956c6a",
        "--touch-menu": "#A0937D",
        "--table-head-dark": "#2e2b21",
    },
    "Custom Theme": JSON.parse(localStorage.getItem('Custom Theme')) || {
        "--text-navbar--alt": "#000",
        "--br-secondary": "#7d7d7d",
        "--br-circuit-cur": "#ffffff",
        "--br-circuit": "#ffffff",
        "--cus-radio_label": "#656565",
        "--primary": "#454545",
        "--text-lite": "#ffffff",
        "--text-dark": "#000",
        "--text-panel": "#ffffff",
        "--bg-navbar": "#454545",
        "--qp-br-tl": "#333333",
        "--qp-br-rd": "#535353",
        "--qp-box-shadow-1": "#3b3b3b",
        "--qp-box-shadow-2": "#4f4f4f",
        "--bg-circuit": "#ddd",
        "--br-circuit": "#454545",
        "--br-primary": "#ffffff",
        "--bg-primary-moz": "#454545e6",
        "--bg-primary-chr": "#454545b3",
        "--bg-tabs": "#8b8b8b",
        "--bg-icons": "#7d7d7d",
        "--bg-text": "#cacaca",
        "--bg-secondary": "#bbbbbb",
        "--canvas-stroke": "#eee",
        "--canvas-fill": "#ffffff",
        "--context-text": "#ffffff",
        "--bg-toggle-btn-primary": "#42b983",
        "--primary-btn-hov": "#3ca877",
        "--btn-danger": "#dc5656",
        "--btn-danger-darken": "#b03662",
        "--disable": "#6c8b93",
        "--cus-btn-hov--bg": "#ddd",
        "--cus-btn-hov-text": "#000",
        "--node": "#008000",
        "--stroke": "#000",
        "--fill": "#ffffff",
        "--hover-and-sel": "#ffff20cc",
        "--wire-draw": "#000",
        "--wire-cnt": "#008000",
        "--wire-pow": "#90ee90",
        "--wire-sel": "#0000ff",
        "--wire-lose": "#ff0000",
        "--mini-map": "#008000",
        "--mini-map-stroke": "#006400",
        "--input-text": "#008000",
        "--secondary-stroke": "#ff0000",
        "--text": "#000",
        "--wire-norm": "#000",
        "--node-norm": "#008000",
        "--splitter": "#000",
        "--output-rect": "#0000ff",
        "--touch-menu": "#A0937D",
    },
};