Suggestion: Built in themes

[lameTookan]

Even just a dark mode would be great. I realize I can do this with CSS, but I don't really know css and for folks without any dev experience this might be something they just aren't willing to get into

[lameTookan]

Also for anyone reading this, after doing some inspecting and enlisting chatgpt for help I managed to come up with this style sheet for dark mode. Looks great on mac

/* Global Styles */
body {
  background-color: rgb(43, 42, 51) !important;
  color: white !important;
  font-family: Arial, sans-serif !important;
}

/* For divs and forms */
div, form {
  background-color: rgb(43, 42, 51) !important;
}

/* Favicon Div */
.favicon {
  border-bottom: 1px solid rgb(28, 27, 34) !important;
  padding: 10px !important;
}

/* Text area */
textarea {
  background-color: rgb(28, 27, 34) !important;
  color: white !important;
  border: 1px solid rgb(28, 27, 34) !important;
}

/* Input Fields */
input[type="text"],
input[type="search"],
input[type="submit"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
  background-color: rgb(28, 27, 34) !important;
  color: white !important;
  border: 1px solid rgb(28, 27, 34) !important;
}

/* Focus State */
input[type="text"]:focus,
input[type="search"]:focus {
  border-color: #007ACC !important;
}

/* For Table */
table, th, td {
  border: 1px solid rgb(28, 27, 34) !important;
  color: white !important;
}

/* For Toolbar */
#toolbar {
  background-color: rgb(28, 27, 34) !important;
}

/* For Properties */
#properties {
  background-color: rgb(28, 27, 34) !important;
}

/* For Notifications */
#notification {
  background-color: rgb(43, 42, 51) !important;
}

/* Buttons */
button {
  background-color: rgb(28, 27, 34) !important;
  color: white !important;
}

/* Button Hover */
button:hover {
  background-color: #007ACC !important;
}
/* Date Form Element */
input[type="date"] {
  background-color: rgb(28, 27, 34) !important;
  color: white !important;
  border: 1px solid rgb(28, 27, 34) !important;
}

/* Select Hover */
select:hover,
option:hover {
  background-color: rgb(28, 27, 34) !important;
  color: white !important;
}

/* Unordered List Dropdowns */
.menu-button ul {
  background-color: rgb(28, 27, 34) !important;
  color: white !important;
}

.menu-button ul li {
  background-color: rgb(28, 27, 34) !important;
  color: white !important;
}

/* Hover for list items */
.menu-button ul li:hover {
  background-color: #007ACC !important;
  color: white !important;
}
/* Specific Span Inside #properties */
#properties span {
  background-color: rgb(28, 27, 34) !important;
  color: white !important;
}
/* Override the jstree selected item style */
.jstree-clicked {
  background-color: rgba(0, 120, 215, 0.8) !important; /* dark blue background */
  color: white !important; /* white text */
}

/* Override the jstree hovered item style */
.jstree-hovered {
  background-color: rgba(100, 100, 100, 0.8) !important; /* dark gray background */
  color: white !important; /* white text */
}

[Crunchbits]

I might also suggesting adding the following below it( a bit messy):

/* Changes find table to have same row color instead of alternating colors (dark and light rows */
#results tbody tr:nth-child(2n+1) {
  background-color: #2b2a33;
}

/* Changes find table header color */
#results th {
  background-color: #2b2a33;
}


/* Hides row borders */
table, th, td {
  border: 0px !important;
}


/* Changes row selection color in find table */
tr.selected {
  background-color: #0968b6 !important;
}


/* Bold the 2 find table headers */
#results th {
  font-weight: bold;
}


/* Change tree icons to built-in dark icon versions */
.jstree-default .jstree-icon {
  background-image: url("moz-extension://9392c683-9e6f-4fc9-bc69-81451afd062d/data/panel/jstree/themes/default-dark/32px.png");
}



/* Add borders to bottom Title and Address field but remove border from Date field */
input[type="text"] {
  background-color: rgb(28, 27, 34) !important;
  color: white !important;
  border: 1px solid rgb(117, 117, 117) !important;
}
button, input[type="submit"], input[type="button"], input[type="search"], input[type="text"], #properties span {
  border: solid 0px;
}


/* Remove unnecessary bottom or top borders */
#search {
  border-bottom: solid 0px;
}
#toolbar {
  border-top: solid 0px
}
#properties {
  border-top: solid 0px
}



/* Padding to bottom to stop hover link preview tooltip from hiding date field */
#properties {
  padding-bottom: 20px;
}

/* Hide separators from Collapse Tool and Bookmark buttons */
button, input[type="button"] {
  margin: 0 0px;
}

/* Change dropdown color from black to grey */
.menu-button::after {
  border-color: #757575 transparent transparent transparent;
  right: 6px;
}


/* Dark context menu */
.vakata-context, .vakata-context ul {
  background: #292a2d;
  border: 1px solid #5e5f62;
  box-shadow: 2px 2px 2px #454b4d;
}
.vakata-context li > a {
  color: white;
  text-shadow: 0px 0px 0;
}
.vakata-context li > a .vakata-contextmenu-sep {
  background: #757575;
  border-left: 1px solid #757575;
}
.vakata-context .vakata-context-separator > a, .vakata-context .vakata-context-separator > a:hover {
  background: #757575;
  border-top: 1px solid #757575;
  border-left: 1px solid #757575;
}



/* Dark context menu hover */
.vakata-context li > a:focus {
  background: #292a2d;
  box-shadow: 0 0 2px #7c7b7c;
}
.vakata-context li > a:hover {
  background: #59585a;
  box-shadow: 0 0 2px #292a2d;
}