From c78d367debb32434145291c5a424fff5b7c30ae7 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sat, 18 Dec 2021 04:53:58 +0900
Subject: [PATCH] Clean: Separated dark contents

---
 src/contents/_dark_mode.scss | 509 ++++++++++++++++++++++++++++++++++
 src/userContent.scss         | 511 +----------------------------------
 2 files changed, 510 insertions(+), 510 deletions(-)
 create mode 100644 src/contents/_dark_mode.scss

diff --git a/src/contents/_dark_mode.scss b/src/contents/_dark_mode.scss
new file mode 100644
index 0000000..6997b50
--- /dev/null
+++ b/src/contents/_dark_mode.scss
@@ -0,0 +1,509 @@
+@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
+  /*= Addons.org =============================================================*/
+  @-moz-document url-prefix("https://addons.mozilla.org")
+  {
+    /* Basic */
+    .Page-content,
+    .SecondaryHero,
+    body,
+    main[aria-label="Content"] {
+      color: var(--in-content-page-color) !important;
+      background: var(--in-content-page-background) !important;
+    }
+
+    /* Text */
+    .AutoSearchInput-query,
+    .AutoSearchInput-suggestions-list,
+    .Page-content h1,
+    .Page-content h2,
+    .SearchResult-link,
+    .Home-SubjectShelf-link:link,
+    .Home-SubjectShelf-link:visited,
+    .DropdownMenuItem-link a,
+    .Select,
+    .Badge,
+    .Notice-generic,
+    .Notice-genericWarning,
+    .Notice-button,
+    .Paginate .Button.Paginate-item:first-child,
+    .Paginate .Button.Paginate-item:last-child,
+    .Paginate .Button.Paginate-item--current-page,
+    .Button--neutral,
+    .blog-entry-title,
+    .blogpost-nav * {
+      color: var(--in-content-text-color) !important;
+    }
+    .AutoSearchInput-suggestions-item:is(:active, :focus, :hover),
+    .AutoSearchInput-suggestions-item--highlighted,
+    .SecondaryHero-message-link,
+    .SecondaryHero-module-link,
+    .Card-contents a:not(.Button),
+    .Card-footer-link a,
+    .Card-shelf-footer-in-header a,
+    .SearchResult-link:is(:active, :focus, :hover),
+    .SearchResult:hover .SearchResult-link,
+    .Home-SubjectShelf-link:is(:active, :focus, :hover),
+    .DropdownMenuItem-link a:is(:active, :focus, :hover),
+    .AddonMeta .MetadataCard-title a:is(:active, :hover),
+    .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover),
+    .AddonMeta .MetadataCard-content a:is(:active, :hover),
+    .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover),
+    .Addon-summary a,
+    .RatingsByStar-count a:hover,
+    .RatingsByStar-star a:hover,
+    .Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page),
+    .AddonTitle-author a,
+    .PermissionsCard-learn-more,
+    .DefinitionList a,
+    .ShowMoreCard-contents a,
+    .AddonDescription-contents a,
+    .AddonTitle a,
+    .TooltipMenu-opener,
+    .LanguageTools .Card-contents a,
+    .blog-entry-read-more-link,
+    .blogpost-nav-next.blogpost-nav-no-prev:hover p,
+    .blogpost-content-wrapper p a,
+    .blogpost-nav-prev:hover p,
+    .blogpost-nav-next:hover p {
+      color: var(--in-content-link-color) !important;
+    }
+    .SearchResult--meta-section,
+    .MetadataCard-title,
+    .MetadataCard-title a,
+    .MetadataCard-content a,
+    .CollectionSort-label,
+    .SearchResult-summary,
+    .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link,
+    .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link,
+    .PermissionsCard-subhead--optional,
+    .PermissionsCard-subhead--required,
+    .Definition-dt,
+    .RatingsByStar-count a,
+    .RatingsByStar-star a,
+    .Paginate-page-number,
+    .AddonSummaryCard-addonAverage,
+    .AddonReviewCard-authorByLine,
+    .UserReview-byLine,
+    .UserReview-reply-header,
+    .Home-heroHeader-subtitle,
+    .blog-entry-date,
+    .blogpost-breadcrumb *,
+    .AddonTitle-author,
+    .ExpandableCard-ToggleLink,
+    .SearchFilters-label,
+    .PromotedBadge-label--line {
+      color: var(--in-content-deemphasized-text) !important;
+    }
+    .PromotedBadge-label--recommended {
+      color: color-mix(in srgb, #712b00 15%, #ff9400) !important;
+    }
+
+    /* Background */
+    .Button--action {
+      color: var(--in-content-primary-button-text-color) !important;
+      background: var(--in-content-primary-button-background) !important;
+    }
+    .Select,
+    .Button--neutral,
+    .Button--neutral:link,
+    .Notice-button,
+    .AMInstallButton .AMInstallButton-loading-button {
+      background-color: var(--in-content-button-background) !important;
+    }
+    .Button--neutral.Button--micro:not(.Button--disabled):hover,
+    .Button--neutral:not(.Button--disabled):hover,
+    .Notice-button:hover {
+      background: var(--in-content-button-background-hover) !important;
+    }
+    .Button--action.Button--micro:not(.Button--disabled):hover,
+    .Button--action:not(.Button--disabled):hover {
+      background: var(--in-content-primary-button-background-hover) !important;
+    }
+    .ShowMoreCard-contents::after {
+      background: linear-gradient(hsla(0, 0%, 100%, 0), var(--in-content-table-background)) !important;
+    }
+    .AutoSearchInput-query,
+    .AutoSearchInput-suggestions-list,
+    .SecondaryHero-module,
+    .Card-header,
+    .Card-contents,
+    .CardList ul > li,
+    .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover),
+    .Paginate,
+    .LandingPage-header,
+    .DropdownMenu-items,
+    .DropdownMenu-items::after,
+    .MetadataCard,
+    .AddonsCard-list,
+    .Card-footer,
+    .StaticAddonCard,
+    .blogpost-nav,
+    .blogpost-nav * {
+      background: var(--in-content-table-background) !important;
+    }
+
+    .Paginate .Button.Paginate-item:is(:active, :hover) {
+      background: var(--in-content-button-background-hover) !important;
+    }
+    .Notice-generic,
+    .Notice-genericWarning {
+      background: color-mix(
+        in srgb,
+        var(--in-content-page-background) 40%,
+        var(--in-content-table-background)
+      ) !important;
+    }
+
+    .LanguageTools-header-row {
+      color: var(--in-content-table-header-color) !important;
+      background: var(--in-content-table-header-background) !important;
+    }
+    .LanguageTools-table.responsiveTable tbody tr:nth-child(2n) {
+      background-color: var(--in-content-box-background-odd) !important;
+    }
+
+    /* Fill */
+    .Icon-arrow-blue.SearchSuggestion-icon-arrow {
+      filter: hue-rotate(330deg) brightness(1.3) !important;
+    }
+    .SecondaryHero-module-icon {
+      filter: invert(85%) !important;
+    }
+    .Icon-magnifying-glass,
+    .Notice-icon {
+      filter: invert(65%) !important;
+    }
+    .PermissionsCard-learn-more .Icon,
+    .Permission .Icon {
+      filter: invert(100%) !important;
+    }
+    .Icon-heart {
+      filter: brightness(0) !important;
+    }
+
+    /* Others */
+    .DropdownMenu-items {
+      box-shadow: 0 0 2px var(--in-content-border-color) !important;
+    }
+
+    .AutoSearchInput-query {
+      border: 1px solid var(--in-content-table-background) !important;
+    }
+    .AutoSearchInput-query:is(:hover, :focus) {
+      border-color: var(--in-content-primary-button-background) !important;
+    }
+    .AutoSearchInput-query:focus {
+      box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background),
+        0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important;
+    }
+
+    .PromotedBadge-link--line {
+      border-color: var(--in-content-deemphasized-text) !important;
+    }
+    .PromotedBadge-link--line:hover {
+      border-color: var(--in-content-button-background-hover) !important;
+    }
+
+    .blog-entry-read-more-link {
+      border-color: var(--in-content-link-color) !important;
+    }
+
+    .blogpost-nav-arrow-left .cls-1,
+    .blogpost-nav-arrow-right .cls-1 {
+      stroke: var(--in-content-text-color) !important;
+    }
+  }
+
+  /*= Support.org ============================================================*/
+  @-moz-document url-prefix("https://support.mozilla.org")
+  {
+    /* Basic */
+    :root {
+      --color-blue-06: var(--in-content-link-color) !important;
+      --color-blue-07: var(--in-content-link-color-hover) !important;
+      --color-blue-09: var(--in-content-link-color-active) !important;
+
+      --page-bg: var(--in-content-page-background) !important;
+      --color-white: var(--in-content-page-background) !important;
+      --color-shade-bg: var(--in-content-page-background) !important;
+      --color-marketing-gray-02: var(--card-outline-color) !important;
+      --color-inverse-bg: var(--in-content-page-color) !important;
+      --color-inverse: var(--in-content-page-background) !important;
+      --color-text: var(--in-content-page-color) !important;
+      --color-moz-text: var(--in-content-page-color) !important;
+      --color-moz-heading: var(--in-content-page-color) !important;
+      --color-text-light: var(--in-content-deemphasized-text) !important;
+      --color-link: var(--in-content-link-color) !important;
+      --color-success: var(--green-70) !important;
+      --color-warning: var(--yellow-80) !important;
+      --color-error: var(--red-60) !important;
+      --color-error-hover: var(--red-50) !important;
+      --color-moz-heading: #fff;
+      --color-moz-inverse-bg: var(red) !important;
+      --focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent),
+        0 0 0 2px var(--in-content-primary-button-background-active);
+    }
+    .warning {
+      --color-link: rgb(55, 255, 255) !important;
+    }
+
+    body,
+    #main-content,
+    #instant-search-content,
+    #mzp-c-menu-panel-help,
+    .mzp-c-navigation,
+    .kbox-container {
+      color: var(--in-content-page-color) !important;
+      background: var(--in-content-page-background) !important;
+    }
+
+    /* Text */
+    .mzp-c-menu-category .mzp-c-menu-title,
+    .mzp-c-menu-item .mzp-c-menu-item-link,
+    .mzp-c-menu-item .mzp-c-menu-item-link > *,
+    .mzp-c-menu-item .mzp-c-menu-item-list a,
+    #doc-content .menu,
+    .document--content .menu,
+    .forum--entry-content .menu,
+    .tag-name a {
+      color: var(--in-content-page-color) !important;
+    }
+
+    .ts-select-trigger,
+    input[type="date"],
+    input[type="email"],
+    input[type="number"],
+    input[type="password"],
+    input[type="search"],
+    input[type="tel"],
+    input[type="text"],
+    input[type="time"],
+    input[type="url"],
+    select,
+    textarea,
+    #doc-content .button,
+    #doc-content .key,
+    .document--content .button,
+    .document--content .key,
+    .forum--entry-content .button,
+    .forum--entry-content .key {
+      color: var(--in-content-deemphasized-text) !important;
+    }
+
+    .tag-list a {
+      color: var(--color-marketing-gray-10) !important;
+    }
+    .tag-list a:hover,
+    .sidebar-nav a:hover {
+      color: var(--color-link) !important;
+    }
+    .tag-list li {
+      background: var(--in-content-page-color) !important;
+    }
+    .tag-list li:hover {
+      background: var(--in-content-deemphasized-text) !important;
+    }
+
+    /* Background */
+    .sidebar-nav.topics,
+    .sidebar-nav.topics > li {
+      background: var(--in-content-page-background) !important;
+    }
+    .mzp-c-menu-panel {
+      color: var(--in-content-page-color) !important;
+      background: var(--in-content-page-background) !important;
+    }
+
+    /* Fill */
+    .sumo-nav--logo,
+    .sumo-nav--search-button,
+    .sumo-nav--toggle-button,
+    .card:not(.is-inverse) .card--icon-sm,
+    .mzp-c-menu-item-icon,
+    .mzp-c-menu-button-close,
+    .topic-article--icon,
+    .card--topic > .card--icon,
+    .mzp-c-details .is-summary button::before,
+    details .is-summary button::before,
+    summary::before,
+    .icon-button > button,
+    .search-button {
+      filter: invert(95%) !important;
+    }
+    button.markup-toolbar-button {
+      /*using 0.5 because in middle*/
+      filter: invert(0.5) !important;
+    }
+
+    /* Others */
+    .support-callouts > .card.is-inverse {
+      background: #20133a !important;
+    }
+    .support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) {
+      color: var(--in-content-page-color) !important;
+    }
+
+    .sumo-button.secondary-button {
+      border-color: none !important;
+    }
+    .mzp-c-menu-panel {
+      border-color: var(--in-content-button-background-hover) !important;
+    }
+    .mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title {
+      border-color: var(--in-content-page-color) !important;
+    }
+
+    @media screen and (min-width: 768px) {
+      .mzp-c-menu-panel {
+        box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important;
+      }
+    }
+    .card--product,
+    .card--topic,
+    .card--article {
+      box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12),
+        0 8px 12px 1px rgba(82, 82, 94, 0.04) !important;
+    }
+  }
+
+  /*= Accounts.com ===========================================================*/
+  @-moz-document url-prefix("https://accounts.firefox.com")
+  {
+    /* Basic */
+    body {
+      color: var(--in-content-page-color) !important;
+      background: var(--in-content-page-background) !important;
+    }
+    .button.primary-button,
+    .button[type="submit"]:not(.secondary-button),
+    .settings-button.primary-button,
+    .settings-button[type="submit"]:not(.secondary-button),
+    button.primary-button,
+    button[type="submit"]:not(.secondary-button) {
+      color: var(--in-content-primary-button-text-color) !important;
+      background: var(--in-content-primary-button-background) !important;
+    }
+
+    /* Text */
+    header h1,
+    .info,
+    .info a,
+    .faint a:hover,
+    .cta-neutral:hover {
+      color: var(--in-content-page-color) !important;
+    }
+    #main-content.panel a,
+    .links a,
+    .link-blue,
+    .text-blue-500 {
+      color: var(--in-content-link-color) !important;
+    }
+    .link-blue:hover {
+      color: var(--in-content-link-color-hover) !important;
+    }
+
+    .signed-in-email-message,
+    .verification-email-message,
+    .verification-message,
+    .verification-recovery-code-message,
+    .verification-totp-message,
+    .input-row input[type="email"],
+    .input-row input[type="number"],
+    .input-row input[type="password"],
+    .input-row input[type="tel"],
+    .input-row input[type="text"],
+    .input-row input::placeholder,
+    .firefox-family-services > ul > .firefox-service,
+    .faint,
+    .faint a,
+    .text-grey-400 {
+      color: var(--in-content-deemphasized-text) !important;
+    }
+
+    /* Background */
+    .password-row .show-password-label {
+      background-color: unset !important;
+    }
+    #main-content,
+    .modal,
+    .firefox-family-services,
+    .input-row input[type="email"],
+    .input-row input[type="number"],
+    .input-row input[type="password"],
+    .input-row input[type="tel"],
+    .input-row input[type="text"],
+    header,
+    .bg-white:not(nav) {
+      background: var(--in-content-box-background) !important;
+    }
+    #suggest-sync,
+    .cta-neutral {
+      background: var(--in-content-button-background) !important;
+    }
+    .cta-neutral:hover,
+    .bg-grey-50:hover,
+    .hover\:bg-grey-100:hover {
+      background: var(--in-content-button-background-hover) !important;
+    }
+    .hover\:bg-grey-200:hover {
+      background: var(--in-content-button-background-active) !important;
+    }
+    .button.primary-button:hover:enabled,
+    .button[type="submit"]:not(.secondary-button):hover:enabled,
+    .settings-button.primary-button:hover:enabled,
+    .settings-button[type="submit"]:not(.secondary-button):hover:enabled,
+    button.primary-button:hover:enabled,
+    button[type="submit"]:not(.secondary-button):hover:enabled {
+      background: var(--in-content-primary-button-background-hover) !important;
+    }
+    .tooltip,
+    .tooltip::before {
+      background: var(--in-content-danger-button-background) !important;
+    }
+
+    /* Fill */
+    .dismiss,
+    #about-mozilla,
+    .show-password-label,
+    footer a[data-testid="link-mozilla"] {
+      filter: invert(95%) !important;
+    }
+    header button svg,
+    header .rounded svg,
+    #service svg {
+      filter: brightness(15) !important;
+    }
+    button.relative,
+    #fxa-settings nav svg {
+      filter: brightness(2) !important;
+    }
+
+    /* Others */
+    .input-row input[type="email"],
+    .input-row input[type="number"],
+    .input-row input[type="password"],
+    .input-row input[type="tel"],
+    .input-row input[type="text"],
+    .unit-row-hr .border-grey-100 {
+      border-color: var(--in-content-border-color) !important;
+    }
+    .input-row input[type="email"]:hover,
+    .input-row input[type="number"]:hover,
+    .input-row input[type="password"]:hover,
+    .input-row input[type="tel"]:hover,
+    .input-row input[type="text"]:hover {
+      border-color: var(--in-content-border-hover) !important;
+    }
+    #main-content {
+      box-shadow: 0 12px 18px 2px rgba(249, 249, 250, 0.12), 0 6px 22px 4px rgba(91, 91, 102, 0.12),
+        0 6px 10px -4px rgba(82, 82, 94, 0.04) !important;
+    }
+    .input-row input[type="email"]:focus,
+    .input-row input[type="number"]:focus,
+    .input-row input[type="password"]:focus,
+    .input-row input[type="tel"]:focus,
+    .input-row input[type="text"]:focus {
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important;
+    }
+  }
+}
diff --git a/src/userContent.scss b/src/userContent.scss
index 45c5269..8826bf1 100644
--- a/src/userContent.scss
+++ b/src/userContent.scss
@@ -12,516 +12,7 @@
 /** Fully Dark Mode ***********************************************************/
 /*= Fully Dark Mode - Dark Mode Colors =======================================*/
 @import "theme/proton_color";
-
-@media (-moz-toolbar-prefers-color-scheme: dark), (prefers-color-scheme: dark) {
-  /*= Addons.org =============================================================*/
-  @-moz-document url-prefix("https://addons.mozilla.org")
-  {
-    /* Basic */
-    .Page-content,
-    .SecondaryHero,
-    body,
-    main[aria-label="Content"] {
-      color: var(--in-content-page-color) !important;
-      background: var(--in-content-page-background) !important;
-    }
-
-    /* Text */
-    .AutoSearchInput-query,
-    .AutoSearchInput-suggestions-list,
-    .Page-content h1,
-    .Page-content h2,
-    .SearchResult-link,
-    .Home-SubjectShelf-link:link,
-    .Home-SubjectShelf-link:visited,
-    .DropdownMenuItem-link a,
-    .Select,
-    .Badge,
-    .Notice-generic,
-    .Notice-genericWarning,
-    .Notice-button,
-    .Paginate .Button.Paginate-item:first-child,
-    .Paginate .Button.Paginate-item:last-child,
-    .Paginate .Button.Paginate-item--current-page,
-    .Button--neutral,
-    .blog-entry-title,
-    .blogpost-nav * {
-      color: var(--in-content-text-color) !important;
-    }
-    .AutoSearchInput-suggestions-item:is(:active, :focus, :hover),
-    .AutoSearchInput-suggestions-item--highlighted,
-    .SecondaryHero-message-link,
-    .SecondaryHero-module-link,
-    .Card-contents a:not(.Button),
-    .Card-footer-link a,
-    .Card-shelf-footer-in-header a,
-    .SearchResult-link:is(:active, :focus, :hover),
-    .SearchResult:hover .SearchResult-link,
-    .Home-SubjectShelf-link:is(:active, :focus, :hover),
-    .DropdownMenuItem-link a:is(:active, :focus, :hover),
-    .AddonMeta .MetadataCard-title a:is(:active, :hover),
-    .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link:is(:active, :hover),
-    .AddonMeta .MetadataCard-content a:is(:active, :hover),
-    .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link:is(:active, :hover),
-    .Addon-summary a,
-    .RatingsByStar-count a:hover,
-    .RatingsByStar-star a:hover,
-    .Paginate .Button.Paginate-item:not(:first-child, :last-child, .Paginate-item--current-page),
-    .AddonTitle-author a,
-    .PermissionsCard-learn-more,
-    .DefinitionList a,
-    .ShowMoreCard-contents a,
-    .AddonDescription-contents a,
-    .AddonTitle a,
-    .TooltipMenu-opener,
-    .LanguageTools .Card-contents a,
-    .blog-entry-read-more-link,
-    .blogpost-nav-next.blogpost-nav-no-prev:hover p,
-    .blogpost-content-wrapper p a,
-    .blogpost-nav-prev:hover p,
-    .blogpost-nav-next:hover p {
-      color: var(--in-content-link-color) !important;
-    }
-    .SearchResult--meta-section,
-    .MetadataCard-title,
-    .MetadataCard-title a,
-    .MetadataCard-content a,
-    .CollectionSort-label,
-    .SearchResult-summary,
-    .AddonMeta .MetadataCard-content a.AddonMeta-reviews-content-link,
-    .AddonMeta .MetadataCard-title a.AddonMeta-reviews-content-link,
-    .PermissionsCard-subhead--optional,
-    .PermissionsCard-subhead--required,
-    .Definition-dt,
-    .RatingsByStar-count a,
-    .RatingsByStar-star a,
-    .Paginate-page-number,
-    .AddonSummaryCard-addonAverage,
-    .AddonReviewCard-authorByLine,
-    .UserReview-byLine,
-    .UserReview-reply-header,
-    .Home-heroHeader-subtitle,
-    .blog-entry-date,
-    .blogpost-breadcrumb *,
-    .AddonTitle-author,
-    .ExpandableCard-ToggleLink,
-    .SearchFilters-label,
-    .PromotedBadge-label--line {
-      color: var(--in-content-deemphasized-text) !important;
-    }
-    .PromotedBadge-label--recommended {
-      color: color-mix(in srgb, #712b00 15%, #ff9400) !important;
-    }
-
-    /* Background */
-    .Button--action {
-      color: var(--in-content-primary-button-text-color) !important;
-      background: var(--in-content-primary-button-background) !important;
-    }
-    .Select,
-    .Button--neutral,
-    .Button--neutral:link,
-    .Notice-button,
-    .AMInstallButton .AMInstallButton-loading-button {
-      background-color: var(--in-content-button-background) !important;
-    }
-    .Button--neutral.Button--micro:not(.Button--disabled):hover,
-    .Button--neutral:not(.Button--disabled):hover,
-    .Notice-button:hover {
-      background: var(--in-content-button-background-hover) !important;
-    }
-    .Button--action.Button--micro:not(.Button--disabled):hover,
-    .Button--action:not(.Button--disabled):hover {
-      background: var(--in-content-primary-button-background-hover) !important;
-    }
-    .ShowMoreCard-contents::after {
-      background: linear-gradient(hsla(0, 0%, 100%, 0), var(--in-content-table-background)) !important;
-    }
-    .AutoSearchInput-query,
-    .AutoSearchInput-suggestions-list,
-    .SecondaryHero-module,
-    .Card-header,
-    .Card-contents,
-    .CardList ul > li,
-    .AddonsCard--horizontal ul.AddonsCard-list .SearchResult-wrapper:is(:focus, :hover),
-    .Paginate,
-    .LandingPage-header,
-    .DropdownMenu-items,
-    .DropdownMenu-items::after,
-    .MetadataCard,
-    .AddonsCard-list,
-    .Card-footer,
-    .StaticAddonCard,
-    .blogpost-nav,
-    .blogpost-nav * {
-      background: var(--in-content-table-background) !important;
-    }
-
-    .Paginate .Button.Paginate-item:is(:active, :hover) {
-      background: var(--in-content-button-background-hover) !important;
-    }
-    .Notice-generic,
-    .Notice-genericWarning {
-      background: color-mix(
-        in srgb,
-        var(--in-content-page-background) 40%,
-        var(--in-content-table-background)
-      ) !important;
-    }
-
-    .LanguageTools-header-row {
-      color: var(--in-content-table-header-color) !important;
-      background: var(--in-content-table-header-background) !important;
-    }
-    .LanguageTools-table.responsiveTable tbody tr:nth-child(2n) {
-      background-color: var(--in-content-box-background-odd) !important;
-    }
-
-    /* Fill */
-    .Icon-arrow-blue.SearchSuggestion-icon-arrow {
-      filter: hue-rotate(330deg) brightness(1.3) !important;
-    }
-    .SecondaryHero-module-icon {
-      filter: invert(85%) !important;
-    }
-    .Icon-magnifying-glass,
-    .Notice-icon {
-      filter: invert(65%) !important;
-    }
-    .PermissionsCard-learn-more .Icon,
-    .Permission .Icon {
-      filter: invert(100%) !important;
-    }
-    .Icon-heart {
-      filter: brightness(0) !important;
-    }
-
-    /* Others */
-    .DropdownMenu-items {
-      box-shadow: 0 0 2px var(--in-content-border-color) !important;
-    }
-
-    .AutoSearchInput-query {
-      border: 1px solid var(--in-content-table-background) !important;
-    }
-    .AutoSearchInput-query:is(:hover, :focus) {
-      border-color: var(--in-content-primary-button-background) !important;
-    }
-    .AutoSearchInput-query:focus {
-      box-shadow: inset 0 0 0 1px var(--in-content-primary-button-background),
-        0 0 0 1px var(--in-content-primary-button-background), 0 0 0 4px rgba(0, 211, 255, 0.3) !important;
-    }
-
-    .PromotedBadge-link--line {
-      border-color: var(--in-content-deemphasized-text) !important;
-    }
-    .PromotedBadge-link--line:hover {
-      border-color: var(--in-content-button-background-hover) !important;
-    }
-
-    .blog-entry-read-more-link {
-      border-color: var(--in-content-link-color) !important;
-    }
-
-    .blogpost-nav-arrow-left .cls-1,
-    .blogpost-nav-arrow-right .cls-1 {
-      stroke: var(--in-content-text-color) !important;
-    }
-  }
-
-  /*= Support.org ============================================================*/
-  @-moz-document url-prefix("https://support.mozilla.org")
-  {
-    /* Basic */
-    :root {
-      --color-blue-06: var(--in-content-link-color) !important;
-      --color-blue-07: var(--in-content-link-color-hover) !important;
-      --color-blue-09: var(--in-content-link-color-active) !important;
-
-      --page-bg: var(--in-content-page-background) !important;
-      --color-white: var(--in-content-page-background) !important;
-      --color-shade-bg: var(--in-content-page-background) !important;
-      --color-marketing-gray-02: var(--card-outline-color) !important;
-      --color-inverse-bg: var(--in-content-page-color) !important;
-      --color-inverse: var(--in-content-page-background) !important;
-      --color-text: var(--in-content-page-color) !important;
-      --color-moz-text: var(--in-content-page-color) !important;
-      --color-moz-heading: var(--in-content-page-color) !important;
-      --color-text-light: var(--in-content-deemphasized-text) !important;
-      --color-link: var(--in-content-link-color) !important;
-      --color-success: var(--green-70) !important;
-      --color-warning: var(--yellow-80) !important;
-      --color-error: var(--red-60) !important;
-      --color-error-hover: var(--red-50) !important;
-      --color-moz-heading: #fff;
-      --color-moz-inverse-bg: var(red) !important;
-      --focus-shadow: 0 0 0 4px color-mix(in srgb, var(--in-content-primary-button-background) 30%, transparent),
-        0 0 0 2px var(--in-content-primary-button-background-active);
-    }
-    .warning {
-      --color-link: rgb(55, 255, 255) !important;
-    }
-
-    body,
-    #main-content,
-    #instant-search-content,
-    #mzp-c-menu-panel-help,
-    .mzp-c-navigation,
-    .kbox-container {
-      color: var(--in-content-page-color) !important;
-      background: var(--in-content-page-background) !important;
-    }
-
-    /* Text */
-    .mzp-c-menu-category .mzp-c-menu-title,
-    .mzp-c-menu-item .mzp-c-menu-item-link,
-    .mzp-c-menu-item .mzp-c-menu-item-link > *,
-    .mzp-c-menu-item .mzp-c-menu-item-list a,
-    #doc-content .menu,
-    .document--content .menu,
-    .forum--entry-content .menu,
-    .tag-name a {
-      color: var(--in-content-page-color) !important;
-    }
-
-    .ts-select-trigger,
-    input[type="date"],
-    input[type="email"],
-    input[type="number"],
-    input[type="password"],
-    input[type="search"],
-    input[type="tel"],
-    input[type="text"],
-    input[type="time"],
-    input[type="url"],
-    select,
-    textarea,
-    #doc-content .button,
-    #doc-content .key,
-    .document--content .button,
-    .document--content .key,
-    .forum--entry-content .button,
-    .forum--entry-content .key {
-      color: var(--in-content-deemphasized-text) !important;
-    }
-
-    .tag-list a {
-      color: var(--color-marketing-gray-10) !important;
-    }
-    .tag-list a:hover,
-    .sidebar-nav a:hover {
-      color: var(--color-link) !important;
-    }
-    .tag-list li {
-      background: var(--in-content-page-color) !important;
-    }
-    .tag-list li:hover {
-      background: var(--in-content-deemphasized-text) !important;
-    }
-
-    /* Background */
-    .sidebar-nav.topics,
-    .sidebar-nav.topics > li {
-      background: var(--in-content-page-background) !important;
-    }
-    .mzp-c-menu-panel {
-      color: var(--in-content-page-color) !important;
-      background: var(--in-content-page-background) !important;
-    }
-
-    /* Fill */
-    .sumo-nav--logo,
-    .sumo-nav--search-button,
-    .sumo-nav--toggle-button,
-    .card:not(.is-inverse) .card--icon-sm,
-    .mzp-c-menu-item-icon,
-    .mzp-c-menu-button-close,
-    .topic-article--icon,
-    .card--topic > .card--icon,
-    .mzp-c-details .is-summary button::before,
-    details .is-summary button::before,
-    summary::before,
-    .icon-button > button,
-    .search-button {
-      filter: invert(95%) !important;
-    }
-    button.markup-toolbar-button {
-      /*using 0.5 because in middle*/
-      filter: invert(0.5) !important;
-    }
-
-    /* Others */
-    .support-callouts > .card.is-inverse {
-      background: #20133a !important;
-    }
-    .support-callouts > .card.is-inverse :is(h1, h2, h3, h4, h5, h6, li, p) {
-      color: var(--in-content-page-color) !important;
-    }
-
-    .sumo-button.secondary-button {
-      border-color: none !important;
-    }
-    .mzp-c-menu-panel {
-      border-color: var(--in-content-button-background-hover) !important;
-    }
-    .mzp-c-menu-item:is(:focus, :hover, :active) .mzp-c-menu-item-link .mzp-c-menu-item-title {
-      border-color: var(--in-content-page-color) !important;
-    }
-
-    @media screen and (min-width: 768px) {
-      .mzp-c-menu-panel {
-        box-shadow: 0 16px 16px -16px rgba(255, 255, 255, 0.3) !important;
-      }
-    }
-    .card--product,
-    .card--topic,
-    .card--article {
-      box-shadow: 0 5px 10px -3px rgba(249, 249, 250, 0.12), 0 3px 16px 2px rgba(91, 91, 102, 0.12),
-        0 8px 12px 1px rgba(82, 82, 94, 0.04) !important;
-    }
-  }
-
-  /*= Accounts.com ===========================================================*/
-  @-moz-document url-prefix("https://accounts.firefox.com")
-  {
-    /* Basic */
-    body {
-      color: var(--in-content-page-color) !important;
-      background: var(--in-content-page-background) !important;
-    }
-    .button.primary-button,
-    .button[type="submit"]:not(.secondary-button),
-    .settings-button.primary-button,
-    .settings-button[type="submit"]:not(.secondary-button),
-    button.primary-button,
-    button[type="submit"]:not(.secondary-button) {
-      color: var(--in-content-primary-button-text-color) !important;
-      background: var(--in-content-primary-button-background) !important;
-    }
-
-    /* Text */
-    header h1,
-    .info,
-    .info a,
-    .faint a:hover,
-    .cta-neutral:hover {
-      color: var(--in-content-page-color) !important;
-    }
-    #main-content.panel a,
-    .links a,
-    .link-blue,
-    .text-blue-500 {
-      color: var(--in-content-link-color) !important;
-    }
-    .link-blue:hover {
-      color: var(--in-content-link-color-hover) !important;
-    }
-
-    .signed-in-email-message,
-    .verification-email-message,
-    .verification-message,
-    .verification-recovery-code-message,
-    .verification-totp-message,
-    .input-row input[type="email"],
-    .input-row input[type="number"],
-    .input-row input[type="password"],
-    .input-row input[type="tel"],
-    .input-row input[type="text"],
-    .input-row input::placeholder,
-    .firefox-family-services > ul > .firefox-service,
-    .faint,
-    .faint a,
-    .text-grey-400 {
-      color: var(--in-content-deemphasized-text) !important;
-    }
-
-    /* Background */
-    .password-row .show-password-label {
-      background-color: unset !important;
-    }
-    #main-content,
-    .modal,
-    .firefox-family-services,
-    .input-row input[type="email"],
-    .input-row input[type="number"],
-    .input-row input[type="password"],
-    .input-row input[type="tel"],
-    .input-row input[type="text"],
-    header,
-    .bg-white:not(nav) {
-      background: var(--in-content-box-background) !important;
-    }
-    #suggest-sync,
-    .cta-neutral {
-      background: var(--in-content-button-background) !important;
-    }
-    .cta-neutral:hover,
-    .bg-grey-50:hover,
-    .hover\:bg-grey-100:hover {
-      background: var(--in-content-button-background-hover) !important;
-    }
-    .hover\:bg-grey-200:hover {
-      background: var(--in-content-button-background-active) !important;
-    }
-    .button.primary-button:hover:enabled,
-    .button[type="submit"]:not(.secondary-button):hover:enabled,
-    .settings-button.primary-button:hover:enabled,
-    .settings-button[type="submit"]:not(.secondary-button):hover:enabled,
-    button.primary-button:hover:enabled,
-    button[type="submit"]:not(.secondary-button):hover:enabled {
-      background: var(--in-content-primary-button-background-hover) !important;
-    }
-    .tooltip,
-    .tooltip::before {
-      background: var(--in-content-danger-button-background) !important;
-    }
-
-    /* Fill */
-    .dismiss,
-    #about-mozilla,
-    .show-password-label,
-    footer a[data-testid="link-mozilla"] {
-      filter: invert(95%) !important;
-    }
-    header button svg,
-    header .rounded svg,
-    #service svg {
-      filter: brightness(15) !important;
-    }
-    button.relative,
-    #fxa-settings nav svg {
-      filter: brightness(2) !important;
-    }
-
-    /* Others */
-    .input-row input[type="email"],
-    .input-row input[type="number"],
-    .input-row input[type="password"],
-    .input-row input[type="tel"],
-    .input-row input[type="text"],
-    .unit-row-hr .border-grey-100 {
-      border-color: var(--in-content-border-color) !important;
-    }
-    .input-row input[type="email"]:hover,
-    .input-row input[type="number"]:hover,
-    .input-row input[type="password"]:hover,
-    .input-row input[type="tel"]:hover,
-    .input-row input[type="text"]:hover {
-      border-color: var(--in-content-border-hover) !important;
-    }
-    #main-content {
-      box-shadow: 0 12px 18px 2px rgba(249, 249, 250, 0.12), 0 6px 22px 4px rgba(91, 91, 102, 0.12),
-        0 6px 10px -4px rgba(82, 82, 94, 0.04) !important;
-    }
-    .input-row input[type="email"]:focus,
-    .input-row input[type="number"]:focus,
-    .input-row input[type="password"]:focus,
-    .input-row input[type="tel"]:focus,
-    .input-row input[type="text"]:focus {
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-content-primary-button-background-hover) 80%, transparent) !important;
-    }
-  }
-}
+@import "contents/dark_mode";
 
 /** Fully Proton Mode *********************************************************/
 @import "contents/proton_commons";