Machinaris theme(s)

[Hukuma1]

Not a coder, so not sure how to do a PR. But wanted to share some theme adjustments. Default Machinaris looks a bit of a mix between light and dark mode, so I wanted to just darken the background.

<style> 
/* Main background color */
body {
  background-color: #15171a
}

/* Rounded sections */
.rounded-3 {
  border-radius: .5rem!important;
  background-color: #212529!important;
  -webkit-box-shadow: 0px 1px 0px 0px #000;
  box-shadow: 0px 1px 0px 0px #000;
  border: 0!important;
}

.text-success {
  color: #3aac59!important;
  font-weight: 500;
}

.display-6 {
  color: #c7c7c7;
}

/* Menu */
.col-auto.col-md-3.col-xl-2.px-sm-2.px-0.bg-dark {
  border-right: 1px solid #000;
}
</style>

Here is a default Chia GUI look (at least how it seems to look on Windows). Dark Mode:

<style> 
/* Main background color */
body {
  background-color: #303030
}

/* Rounded sections */
.rounded-3 {
  border-radius: .5rem!important;
  border: 0!important;
  -webkit-box-shadow: 0px 1px 0px 0px #000;
  box-shadow: 0px 1px 0px 0px #000;
  background-color: #424242!important;
}

.text-success {
  color: #3aac59!important;
  font-weight: 500;
}

.display-6 {
  color: #c7c7c7
}

/* Menu */
li .text-success {
  color: #fff!important;
}

.fs-4.bi-flower1 {
  color: #3aac59;
}

.fs-5.d-none.d-sm-inline {
  color: #3aac59;
}

.bg-dark {
  background-color: #424242!important;
}
</style>

And here is the light version:

<style> 
/* Main background color */
body {
  background: linear-gradient(45deg, #ffffff 30%, #fdfdfd 90%);
}

/* Rounded sections */
.rounded-3 {
  border-radius: .5rem!important;
  background-color: #fff!important;
  -webkit-box-shadow: 0px 1px 0px 0px #9e9e9e;
  box-shadow: 0px 1px 0px 0px #9e9e9e;
  border: 1px solid #ddd;
  important;
}

.text-success {
  color: #3aac59!important;
  font-weight: 500;
}

.display-6 {
  color: #757575;
}

/* Menu */
.col-auto.col-md-3.col-xl-2.px-sm-2.px-0.bg-dark {
  border-right: 1px solid #ddd;
}

li .text-success {
  color: #757575!important;
}

.fs-4.bi-flower1 {
  color: #3aac59;
}

.fs-5.d-none.d-sm-inline {
  color: #3aac59;
}

.bg-dark {
  background-color: #fff!important;
}

i.fs-4.bi-github {
  color: #757575!important;
}

.ms-1.d-none.d-sm-inline {
  color: #757575!important;
}
</style>

I'm sure I messed up some classes I've targeted or someone can do a better job, but this is a quick copy/paste to get those colors for now. Hopefully a theme toggle could be made and we could drop these in to customize.

[guydavis]

This is awesome! I've include your dark-mode improvements into Machinaris v0.2.1. I'll get your light-mode integrated in a future release with a toggle in UI. Great contribution.

[guydavis]

@antdragone Here's another interesting one for the frontend. Found a good article on using Bootstrap 5 for light/dark toggling. Might be a way to make this a setting that each user can toggle.

[Hukuma1]

Surprised BS doesn't have any scrollbar skinning abilities...

Love your new logs feature and thought maybe we could add custom scrollbars for Machinaris to match the current dark theme?

http://webkit-scroll-gen.sourceforge.net/ = quick generator to make the code

https://caniuse.com/?search=webkit-scrollbar shows support to be over 91% of all browsers. Sorry Firefox... :/

[Hukuma1]

<style type="text/css">
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #3aac59;
  border: 0px none #ffffff;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3aac59;
}
::-webkit-scrollbar-thumb:active {
  background: #3aac59;
}
::-webkit-scrollbar-track {
  background: #15171a;
  border: 0px none #ffffff;
  border-radius: 3px;
}
::-webkit-scrollbar-track:hover {
  background: #15171a;
}
::-webkit-scrollbar-track:active {
  background: #15171a;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
</style>

[guydavis]

@Hukuma1 Sorry, just spotted this! Great suggestion on the scrollbars. You are a wizard at the UI my friend. I'll include in next release! Hopefully next week.