Add: Option - userContent.page.proton_color.dark_blue_accent #202

src/contents/_dark_blue_accent.scss

@@ -0,0 +1,13 @@
+@-moz-document url-prefix("about:"),
+               url-prefix("https://addons.mozilla.org"),
+               url-prefix("https://support.mozilla.org"),
+               url-prefix("https://accounts.firefox.com"),
+               regexp("^((file:\/\/\/)|(chrome:\/\/)).*\/$") {
+  @include Dark {
+    @import "../theme/dark_blue_color";
+
+    :host, :root {
+      @include DarkBlueContent;
+    }
+  }
+}

src/theme/_dark_blue_accent.scss

@@ -1,71 +1,22 @@
-:host, :root {
+@include Dark {
-  /* Color Memo
+  @import "dark_blue_color";
-  Just refer - Photon's dark color
-  --button-primary-bgcolor: #0060DF;
-  --button-primary-hover-bgcolor: #003EAA;
-  --button-primary-active-bgcolor: #002275;
-  --lwt-brighttext-url-color: #74c0ff;
-  --lwt-toolbarbutton-icon-fill-attention: #45a1ff;
 
-  Just refer - Proton's light color
+  :host, :root, button, select, input, menulist, radio {
-  --in-content-accent-color: #0a84ff;
+    @include DarkBlueContent;
-  --in-content-accent-color-active: #0060df;
+  }
-  --in-content-primary-button-background: #0061e0;
-  --in-content-primary-button-background-hover: #0250bb;
-  --in-content-primary-button-background-active: #053e94;
 
-  --blue-40: #45a1ff; rgb(69, 161, 255)
+  #{built-in-dark-theme()} {
-  --blue-50: #0a84ff; rgb(10, 132, 255)
+    --button-primary-color: var(--in-content-page-color) !important;
-  --blue-60: #0060df; rgb(0, 96, 223)
+    --button-primary-bgcolor: var(--blue-60) !important;
-  --blue-70: #003eaa; rgb(0, 62, 170)
+    --button-primary-hover-bgcolor: var(--blue-50) !important;
-  --blue-80: #002275; rgb(0, 34, 117)
+    --button-primary-active-bgcolor: var(--blue-40) !important;
 
-  Relation
+    --focus-outline-color: var(--blue-40) !important;
-  lighten(#0060df,   29%): #74b0ff;
-  lighten(#0060df, 19.8%): #4595ff
-  lighten(#0060df,  8.3%): #0a74ff
-  #0060df
-  darken(#0060df, 15.5%):  #003e90;
-  darken(#0060df, 28.1%):  #002250;
- */
-  --blue-20: #b6d6ff; /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
-  --blue-30: #74c0ff; /* rgb(116, 192, 255), Add for active color */
 
-  --organizer-outline-color: var(--blue-40) !important;
+    --lwt-toolbarbutton-icon-fill-attention: var(--blue-40) !important;
-}
+    --download-progress-fill-color: var(--blue-40) !important;
-
+    --panel-banner-item-info-icon-bgcolor: var(--blue-30) !important;
-:host, :root, button, select, input, menulist, radio {
+
-  --in-content-primary-button-text-color: var(--in-content-page-color) !important;
+    --lwt-brighttext-url-color: var(--blue-30) !important; /* Original: as primary bgcolor */
-  --in-content-primary-button-background: var(--blue-60) !important;
+  }
-  --in-content-primary-button-background-hover: var(--blue-50) !important;
-  --in-content-primary-button-background-active: var(--blue-40) !important;
-
-  --in-content-focus-outline-color: var(--blue-40) !important;
-  --in-content-accent-color: var(--blue-40) !important;
-  --in-content-accent-color-active: var(--blue-30) !important;
-
-  --in-content-table-background: rgb(35, 34, 43) !important;
-  --in-content-table-border-color: rgba(249,249,250,0.2) !important;
-  --in-content-table-header-background: rgb(5, 64, 150) !important;
-  --in-content-table-header-color: var(--in-content-page-color) !important;
-
-  --in-content-link-color: var(--blue-40) !important;
-  --in-content-link-color-hover: var(--blue-30) !important;
-  --in-content-link-color-active: var(--blue-20) !important;
-  --in-content-link-color-visited: var(--blue-40) !important;
-}
-
-#{built-in-dark-theme()} {
-  --button-primary-color: var(--in-content-page-color) !important;
-  --button-primary-bgcolor: var(--blue-60) !important;
-  --button-primary-hover-bgcolor: var(--blue-50) !important;
-  --button-primary-active-bgcolor: var(--blue-40) !important;
-
-  --focus-outline-color: var(--blue-40) !important;
-
-  --lwt-toolbarbutton-icon-fill-attention: var(--blue-40) !important;
-  --download-progress-fill-color: var(--blue-40) !important;
-  --panel-banner-item-info-icon-bgcolor: var(--blue-30) !important;
-
-  --lwt-brighttext-url-color: var(--blue-30) !important; /* Original: as primary bgcolor */
 }

src/theme/_dark_blue_color.scss

@@ -0,0 +1,56 @@
+:host, :root {
+  /* Color Memo
+  Just refer - Photon's dark color
+  --button-primary-bgcolor: #0060DF;
+  --button-primary-hover-bgcolor: #003EAA;
+  --button-primary-active-bgcolor: #002275;
+  --lwt-brighttext-url-color: #74c0ff;
+  --lwt-toolbarbutton-icon-fill-attention: #45a1ff;
+
+  Just refer - Proton's light color
+  --in-content-accent-color: #0a84ff;
+  --in-content-accent-color-active: #0060df;
+  --in-content-primary-button-background: #0061e0;
+  --in-content-primary-button-background-hover: #0250bb;
+  --in-content-primary-button-background-active: #053e94;
+
+  --blue-40: #45a1ff; rgb(69, 161, 255)
+  --blue-50: #0a84ff; rgb(10, 132, 255)
+  --blue-60: #0060df; rgb(0, 96, 223)
+  --blue-70: #003eaa; rgb(0, 62, 170)
+  --blue-80: #002275; rgb(0, 34, 117)
+
+  Relation
+  lighten(#0060df,   29%): #74b0ff;
+  lighten(#0060df, 19.8%): #4595ff
+  lighten(#0060df,  8.3%): #0a74ff
+  #0060df
+  darken(#0060df, 15.5%):  #003e90;
+  darken(#0060df, 28.1%):  #002250;
+ */
+  --blue-20: #b6d6ff; /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
+  --blue-30: #74c0ff; /* rgb(116, 192, 255), Add for active color */
+
+  --organizer-outline-color: var(--blue-40) !important;
+}
+
+@mixin DarkBlueContent() {
+  --in-content-primary-button-text-color: var(--in-content-page-color) !important;
+  --in-content-primary-button-background: var(--blue-60) !important;
+  --in-content-primary-button-background-hover: var(--blue-50) !important;
+  --in-content-primary-button-background-active: var(--blue-40) !important;
+
+  --in-content-focus-outline-color: var(--blue-40) !important;
+  --in-content-accent-color: var(--blue-40) !important;
+  --in-content-accent-color-active: var(--blue-30) !important;
+
+  --in-content-table-background: rgb(35, 34, 43) !important;
+  --in-content-table-border-color: rgba(249,249,250,0.2) !important;
+  --in-content-table-header-background: rgb(5, 64, 150) !important;
+  --in-content-table-header-color: var(--in-content-page-color) !important;
+
+  --in-content-link-color: var(--blue-40) !important;
+  --in-content-link-color-hover: var(--blue-30) !important;
+  --in-content-link-color-active: var(--blue-20) !important;
+  --in-content-link-color-visited: var(--blue-40) !important;
+}

src/userChrome.scss

@@ -30,9 +30,7 @@
 @include Option("userChrome.theme.proton_color") {
   @import "theme/proton_color";
   @include Option("userChrome.theme.proton_color.dark_blue_accent") {
-    @include Dark {
+    @import "theme/dark_blue_accent";
-      @import "theme/dark_blue_accent";
-    }
   }
 }
 @include Option("userChrome.theme.fully_color") {

src/userContent.scss

@@ -20,6 +20,9 @@
 /*= Fully Dark Mode - Dark Mode Colors =======================================*/
 @include Option("userContent.page.proton_color") {
   @import "theme/proton_color";
+  @include Option("userContent.page.proton_color.dark_blue_accent") {
+    @import "contents/dark_blue_accent";
+  }
 }
 @include Option("userContent.page.dark_mode") {
   @import "contents/dark_mode";

user.js

@@ -91,6 +91,7 @@ user_pref("userChrome.tab.bottom_rounded_corner",      true);
 // user_pref("userChrome.icon.account_label_to_right",        true);
 
 // user_pref("userContent.player.ui.twoline",                 true);
+// user_pref("userContent.page.proton_color.dark_blue_accent", true);
 
 // == Theme Default Settings ===================================================
 // -- User Chrome --------------------------------------------------------------

userContent.css

@@ -669,6 +669,73 @@
       --dialog-warning-text-color: var(--red-40);
     }
   }
+  @supports -moz-bool-pref("userContent.page.proton_color.dark_blue_accent") {
+    @-moz-document url-prefix("about:"),
+               url-prefix("https://addons.mozilla.org"),
+               url-prefix("https://support.mozilla.org"),
+               url-prefix("https://accounts.firefox.com"),
+               regexp("^((file:///)|(chrome://)).*/$")
+    {
+      @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+        :host,
+        :root {
+          /* Color Memo
+           Just refer - Photon's dark color
+           --button-primary-bgcolor: #0060DF;
+           --button-primary-hover-bgcolor: #003EAA;
+           --button-primary-active-bgcolor: #002275;
+           --lwt-brighttext-url-color: #74c0ff;
+           --lwt-toolbarbutton-icon-fill-attention: #45a1ff;
+
+           Just refer - Proton's light color
+           --in-content-accent-color: #0a84ff;
+           --in-content-accent-color-active: #0060df;
+           --in-content-primary-button-background: #0061e0;
+           --in-content-primary-button-background-hover: #0250bb;
+           --in-content-primary-button-background-active: #053e94;
+
+           --blue-40: #45a1ff; rgb(69, 161, 255)
+           --blue-50: #0a84ff; rgb(10, 132, 255)
+           --blue-60: #0060df; rgb(0, 96, 223)
+           --blue-70: #003eaa; rgb(0, 62, 170)
+           --blue-80: #002275; rgb(0, 34, 117)
+
+           Relation
+           lighten(#0060df,   29%): #74b0ff;
+           lighten(#0060df, 19.8%): #4595ff
+           lighten(#0060df,  8.3%): #0a74ff
+           #0060df
+           darken(#0060df, 15.5%):  #003e90;
+           darken(#0060df, 28.1%):  #002250;
+          */
+          --blue-20: #b6d6ff;
+          /* lighten(#0060df, 42%) - rgb(182, 214, 255), Add for link active color*/
+          --blue-30: #74c0ff;
+          /* rgb(116, 192, 255), Add for active color */
+          --organizer-outline-color: var(--blue-40) !important;
+        }
+
+        :host,
+        :root {
+          --in-content-primary-button-text-color: var(--in-content-page-color) !important;
+          --in-content-primary-button-background: var(--blue-60) !important;
+          --in-content-primary-button-background-hover: var(--blue-50) !important;
+          --in-content-primary-button-background-active: var(--blue-40) !important;
+          --in-content-focus-outline-color: var(--blue-40) !important;
+          --in-content-accent-color: var(--blue-40) !important;
+          --in-content-accent-color-active: var(--blue-30) !important;
+          --in-content-table-background: rgb(35, 34, 43) !important;
+          --in-content-table-border-color: rgba(249, 249, 250, 0.2) !important;
+          --in-content-table-header-background: rgb(5, 64, 150) !important;
+          --in-content-table-header-color: var(--in-content-page-color) !important;
+          --in-content-link-color: var(--blue-40) !important;
+          --in-content-link-color-hover: var(--blue-30) !important;
+          --in-content-link-color-active: var(--blue-20) !important;
+          --in-content-link-color-visited: var(--blue-40) !important;
+        }
+      }
+    }
+  }
 }
 @supports -moz-bool-pref("userContent.page.dark_mode") {
   @media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {