YouTube Dark

Author: leoj3n

.gitmodules

@@ -4,3 +4,6 @@
 [submodule "app/sites/github/app/github-timeline"]
 	path = app/sites/github/app/github-timeline
 	url = https://github.com/romqin/github-timeline.git
+[submodule "app/sites/youtube/app/Dark-youtube-plugin-chrome"]
+	path = app/sites/youtube/app/Dark-youtube-plugin-chrome
+	url = https://github.com/stormbreakerbg/Dark-youtube-plugin-chrome.git

app/sites/youtube/app/Dark-youtube-plugin-chrome

@@ -0,0 +1,26 @@
+.yt-uix-button-subscription-container {
+  span,
+  button,
+  .yt-uix-button.yt-uix-button-size-default.yt-uix-button-default.yt-uix-button-empty.yt-uix-button-has-icon.yt-uix-subscription-preferences-button {
+    border: 0 !important;
+    background-color: transparent !important;
+  }
+}
+
+#watch8-sentiment-actions .yt-uix-button-content {
+  -webkit-filter: invert(100%) !important;
+}
+
+.no-icon-markup:before {
+  -webkit-filter: invert(100%) !important;
+}
+
+.yt-lockup-title a, .yt-lockup:hover a, .yt-lockup:hover .yt-lockup-meta a, .yt-lockup:hover .yt-lockup-description a {
+  color: darkorange !important;
+}
+
+.guide-item.guide-item-selected, .guide-item.guide-item-selected:hover, .guide-item.guide-item-selected .yt-deemphasized-text, .guide-item.guide-item-selected:hover .yt-deemphasized-text {
+  background: transparent !important;
+  color: greenyellow !important;
+}
+

app/sites/youtube/app/assets/less/color-fixes.less

@@ -0,0 +1,16 @@
+.yt-masthead-user-icon {
+  position: relative;
+  z-index: 9999 !important;
+  -webkit-transform-style: preserve-3d;
+  -webkit-animation: spin 15s linear infinite;
+}
+@-webkit-keyframes spin {
+  from { -webkit-transform: rotateZ(0deg); }
+  to { -webkit-transform: rotateZ(360deg); }
+}
+
+/*#watch-header {
+  background: url(chrome-extension://__MSG_@@extension_id__/images/[email protected])
+    100.2% -1.2px no-repeat !important;
+}*/
+

app/sites/youtube/app/assets/less/fun.less

@@ -1,36 +1,3 @@
-.yt-masthead-user-icon {
-  position: relative;
-  z-index: 9999 !important;
-  -webkit-transform-style: preserve-3d;
-  -webkit-animation: spin 15s linear infinite;
-}
-@-webkit-keyframes spin {
-  from { -webkit-transform: rotateZ(0deg); }
-  to { -webkit-transform: rotateZ(360deg); }
-}
-
-/*#watch-header {
-  background: url(chrome-extension://__MSG_@@extension_id__/images/[email protected])
-    100.2% -1.2px no-repeat !important;
-}*/
-
-.yt-uix-button-subscription-container {
-  span,
-  button,
-  .yt-uix-button.yt-uix-button-size-default.yt-uix-button-default.yt-uix-button-empty.yt-uix-button-has-icon.yt-uix-subscription-preferences-button {
-    border: 0 !important;
-    background-color: transparent !important;
-  }
-}
-
-#watch8-sentiment-actions .yt-uix-button-content {
-  -webkit-filter: invert(100%) !important;
-}
-
-.no-icon-markup:before {
-  -webkit-filter: invert(100%) !important;
-}
-
 @media (max-width: 833px) {
 
   #body-container {

app/sites/youtube/app/assets/less/responsive.less

@@ -12,5 +12,12 @@ module.exports = {
             '<%= config.app %>/sites/stackoverflow/app/assets/css/structure.css'
         ],
         dest: '<%= config.app %>/sites/stackoverflow/dist/style.css'
+    },
+    youtube: {
+        src: [
+            '<%= config.app %>/sites/youtube/app/Dark-youtube-plugin-chrome/dark.css',
+            '<%= config.app %>/sites/youtube/dist/style.css'
+        ],
+        dest: '<%= config.app %>/sites/youtube/dist/style.css'
     }
 };

grunt/concat.js

@@ -10,6 +10,8 @@ module.exports = {
     youtube: {
       files: {
         '<%= config.app %>/sites/youtube/dist/style.css': [
+          '<%= config.app %>/sites/youtube/app/assets/less/fun.less',
+          '<%= config.app %>/sites/youtube/app/assets/less/color-fixes.less',
           '<%= config.app %>/sites/youtube/app/assets/less/responsive.less'
         ]
       }