Make adding themes easier (FreeTubeApp#5071)

* Centralize styling in themes.css, add code commenting, and simplify destructive color logic

* Add missing Invidious / YT logo theme overrides

* Update theme ordering to reflect their ordering elsewhere in the codebase

* Update src/renderer/themes.css

Co-authored-by: ChunkyProgrammer <[email protected]>

* remove .gray class

---------

Co-authored-by: Jason <[email protected]>
Co-authored-by: ChunkyProgrammer <[email protected]>
Co-authored-by: efb4f5ff-1298-471a-8973-3d47447115dc <73130443+efb4f5ff-1298-471a-8973-3d47447115dc@users.noreply.github.com>

src/main/index.js

@@ -639,6 +639,8 @@ function runApp() {
         return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'
       }
 
+      // Determine window color to be shown (shown most prominently during initial app load)
+      // Uses the --bg-color for each corresponding theme
       switch (setting.value) {
         case 'dark':
           return '#212121'

src/renderer/components/ft-share-button/ft-share-button.css

@@ -0,0 +1,76 @@
+.shareLinks {
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: auto auto;
+  padding: 12px;
+  inline-size: max-content;
+}
+
+.header {
+  color: var(--primary-text-color);
+  font-size: 18px;
+  font-weight: bold;
+  margin-block: 4px 8px;
+  margin-inline: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: column;
+  max-inline-size: min-content;
+  min-inline-size: 150px;
+}
+
+.action {
+  padding: 6px;
+  white-space: initial;
+}
+
+.divider {
+  background: var(--tertiary-text-color);
+  grid-row: span 3;
+  margin-block: 0;
+  margin-inline: 12px;
+  inline-size: 1px;
+}
+
+.youtubeLogo {
+  block-size: 18px;
+  inline-size: auto;
+}
+
+.invidious {
+  letter-spacing: -0.4px;
+}
+
+.invidiousLogo {
+  background-size: cover;
+  display: inline-block;
+  block-size: 20px;
+  margin-inline-end: 2px;
+  inline-size: 20px;
+}
+
+@media only screen and (width <= 450px) {
+  .shareLinks {
+    grid-auto-flow: row;
+    margin-inline: auto;
+    justify-items: center;
+    max-inline-size: max-content;
+  }
+
+  .header.invidious {
+    margin-block-start: 20px;
+  }
+
+  .buttons {
+    max-inline-size: min-content;
+    min-inline-size: 180px;
+  }
+
+  .divider {
+    display: none;
+  }
+}

src/renderer/components/ft-share-button/ft-share-button.vue

@@ -121,4 +121,4 @@
 </template>
 
 <script src="./ft-share-button.js" />
-<style scoped lang="scss" src="./ft-share-button.scss" />
+<style scoped src="./ft-share-button.css" />