Maintenance: Refactor CSS & Themes - #2092

This PR revamps the css and theme system while adding system color scheme support.

Adds Theme controls to the System->Theme page for transparent control.

Updates functions with better naming with takeaways from #2088 as well as addresses the feature request in #2087

The base.css file should be strictly used for styles that establish strucutre and layout to the pages and elements. There is light theming in this file simply to make things "functional". In theory the theme stylesheets should be able to be removed and everything should still work/look as intended.

The app/css/themes contains the two included themes. Each theme file should include styles for both light and dark mode using the data attribute html[data-bs-theme="dark"] to apply them.

Where to put new styles

A comment based structure has been introduced to the stylesheets (the following) to better reduce dead classes and/or redundant styles. This structure should ideally exist for both light and dark styles.

• Typography
• Elements
• Icons
• Buttons
• Forms
• Layout
• Page Specific

Custom Theme

To add a custom theme simply put the stylesheet in the /app/css/themes directory. Putting it in this director is not a requirement but is just where the other themes are stored. If it is put in a different location then be sure to set it in the theme definition. Then update the themes variables in two spots: app/js/ui/main.js and includes/defaults.php. Use the below format to define the theme.

"default" => [
    "name" => "RaspAP (default)",
    "url" => "app/css/themes/default.php",
    "modes" => ["light", "dark"]
],

or for javascript

"default": {
    "name": "RaspAP (default)",
    "url": "app/css/themes/default.php",
    "modes": ["light", "dark"]
},

Dead Styles?

The following styles were removed due to there being no apparent application for them. If this is in error please make note of this in a comment.

.toggle-off.btn {
  padding-left: 1.2rem;
  font-size: 0.9rem!important;
}

.toggle-on.btn {
  font-size: 0.9rem!important;
}

.gs-edit {
  border: 1px dashed #ccc;
  background-color: #f1faee;
  border-radius: 4px;
}

#passwd-toggle:active,
#passwd-toggle:hover,
#passwd-toggle:focus {
  border: 1px solid #ced4da;
}

.card-wrapper {
  margin: 1rem;
}

@keyframes flash {
  50% {
    opacity: 0;
  }
}