diff --git a/src/contents/_dark_blue_accent.scss b/src/contents/_dark_blue_accent.scss new file mode 100644 index 0000000..41ba6ca --- /dev/null +++ b/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; + } + } +} diff --git a/src/theme/_dark_blue_accent.scss b/src/theme/_dark_blue_accent.scss index 82ba141..2d740e7 100644 --- a/src/theme/_dark_blue_accent.scss +++ b/src/theme/_dark_blue_accent.scss @@ -1,71 +1,22 @@ -: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; +@include Dark { + @import "dark_blue_color"; - 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; + :host, :root, button, select, input, menulist, radio { + @include DarkBlueContent; + } - --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) + #{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; - 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 */ + --focus-outline-color: var(--blue-40) !important; - --organizer-outline-color: var(--blue-40) !important; -} - -:host, :root, button, select, input, menulist, radio { - --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; -} - -#{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 */ + --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 */ + } } diff --git a/src/theme/_dark_blue_color.scss b/src/theme/_dark_blue_color.scss new file mode 100644 index 0000000..9205f3e --- /dev/null +++ b/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; +} diff --git a/src/userChrome.scss b/src/userChrome.scss index 3e88bf4..d018164 100644 --- a/src/userChrome.scss +++ b/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") { diff --git a/src/userContent.scss b/src/userContent.scss index b281d25..0a82e3d 100644 --- a/src/userContent.scss +++ b/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"; diff --git a/user.js b/user.js index af767a7..b5092f4 100644 --- a/user.js +++ b/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 -------------------------------------------------------------- diff --git a/userContent.css b/userContent.css index 3f8358d..850494e 100644 --- a/userContent.css +++ b/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) {