☰

Dark Theme for Kadokawa Taiwan

A tailor-made dark theme for Kadokawa Taiwan.

  1. /* ==UserStyle==
  2. @name               Dark Theme for Kadokawa Taiwan
  3. @description        A tailor-made dark theme for Kadokawa Taiwan.
  4. @author             Jason Kwok
  5. @namespace          https://jasonhk.dev/
  6. @version            1.3.0
  7. @license            MIT
  8. ==/UserStyle== */
  9.  
  10. @-moz-document domain("www.kadokawa.com.tw")
  11. {
  12.     :root
  13.     {
  14.         --background-color: #212529;
  15.         --primary-color: #748ffc;
  16.         --primary-hover-color: #4c6ef5;
  17.         --primary-focus-outline-color: #748ffc7f;
  18.         --primary-active-color: #91a7ff;
  19.         --primary-text-color: #212529;
  20.         --header-background-color: #343a40;
  21.         --text-color: #f1f3f5;
  22.         --footer-text-color: #adb5bd;
  23.     }
  24.     
  25.     html, body
  26.     {
  27.         background-color: var(--background-color);
  28.     }
  29.     
  30.     body
  31.     {
  32.         color: var(--text-color);
  33.     }
  34.     
  35.     
  36.     /* Common Elements */
  37.     
  38.     .button-primary, .product-form--atc-button
  39.     {
  40.         border: 1px solid var(--primary-color);
  41.         color: var(--primary-text-color);
  42.         background-color: var(--primary-color);
  43.     }
  44.     
  45.     :is(.button-primary, .product-form--atc-button):not(.disabled):hover
  46.     {
  47.         border: 1px solid var(--primary-hover-color);
  48.         background-color: var(--primary-hover-color);
  49.     }
  50.     
  51.     :is(.button-primary, .product-form--atc-button):active
  52.     {
  53.         border: 1px solid var(--primary-active-color);
  54.         background-color: var(--primary-active-color);
  55.     }
  56.     
  57.     
  58.     .site-header-wrapper
  59.     {
  60.         color: var(--primary-color);
  61.         background-color: var(--background-color);
  62.         box-shadow: 0 1px 4px #495057;
  63.     }
  64.     
  65.     .site-header-main
  66.     {
  67.         background-color: var(--background-color);
  68.     }
  69.     
  70.     .site-header-menu-toggle--button, .site-header-mobile-search-button--button, .site-header-cart--button
  71.     {
  72.         color: var(--primary-color);
  73.     }
  74.     
  75.     .site-header-menu-toggle--button .toggle-icon--bar
  76.     {
  77.         background-color: var(--primary-color);
  78.     }
  79.     
  80.     .site-logo-image
  81.     {
  82.         filter: brightness(250%);
  83.     }
  84.     
  85.     .site-navigation-wrapper, .site-navigation, .site-navigation .navmenu-submenu
  86.     {
  87.         background-color: var(--background-color);
  88.     }
  89.     
  90.     .site-navigation a
  91.     {
  92.         color: var(--primary-color);
  93.     }
  94.     
  95.     .site-navigation a:focus
  96.     {
  97.         outline: solid var(--primary-focus-outline-color);
  98.     }
  99.     
  100.     .mobile-nav-panel
  101.     {
  102.         color: var(--text-color);
  103.         background-color: var(--background-color);
  104.     }
  105.     
  106.     .navmenu-button
  107.     {
  108.         color: var(--text-color);
  109.     }
  110.     
  111.     .mobile-nav-content .navmenu-link-parent-active
  112.     {
  113.         color: var(--primary-hover-color);
  114.     }
  115.     
  116.     .mobile-nav-content .navmenu-link-parent-active ~ .navmenu-button
  117.     {
  118.         color: var(--primary-hover-color);
  119.         background-color: #343a40;
  120.     }
  121.     
  122.     .mobile-nav-content .navmenu-depth-2
  123.     {
  124.         background-color: #343a40;
  125.     }
  126.     
  127.     .mobile-nav-content .navmenu-depth-2 .navmenu-link-parent-active ~ .navmenu-button
  128.     {
  129.         background-color: #495057;
  130.     }
  131.     
  132.     .productgrid--search-button, .live-search-button
  133.     {
  134.         border: 1px solid var(--primary-color);
  135.         color: var(--primary-text-color);
  136.         background-color: var(--primary-color);
  137.     }
  138.     
  139.     .productgrid--search-button:not(.disabled):hover, .live-search-button:not(.disabled):hover
  140.     {
  141.         border: 1px solid var(--primary-hover-color);
  142.         background-color: var(--primary-hover-color);
  143.     }
  144.     
  145.     .productgrid--search-button:active, .live-search-button:active
  146.     {
  147.         border: 1px solid var(--primary-active-color);
  148.         background-color: var(--primary-active-color);
  149.     }
  150.     
  151.     .breadcrumbs-container span
  152.     {
  153.         color: #e9ecef;
  154.     }
  155.     
  156.     .site-footer-wrapper
  157.     {
  158.         color: var(--footer-text-color);
  159.         background: var(--background-color);
  160.     }
  161.     
  162.     .site-footer-information .navmenu .navmenu-item:not(:last-child)
  163.     {
  164.         border-right: 1px solid var(--footer-text-color);
  165.     }
  166.     
  167.     .site-footer-wrapper .navmenu-link:hover, .site-footer-wrapper .site-footer-credits a:hover, .site-footer-wrapper .rte a:hover
  168.     {
  169.         color: #868e96;
  170.     }
  171.     
  172.     .site-footer-credits
  173.     {
  174.         color: var(--footer-text-color);
  175.     }
  176.     
  177.     .product-reviews--content .spr-content .spr-pagination a, .product-reviews--content .spr-content .spr-review .spr-review-footer a, .product-reviews--content .spr-summary-caption a.spr-summary-actions-togglereviews, .product-recently-viewed__clear, .shopify-payment-button .shopify-payment-button__more-options, .product-vendor a, .utils-showby-item.utils-showby-item--active, .utils-sortby-button, .utils-filter-button, .productgrid--sidebar-menu .navmenu-link--active, .productgrid-listview .productitem--link, .productgrid--footer-results-list a, .filter-item--grid-simple a, [data-filter-active="true"], .filter-item a.filter-text--link, .pagination--inner a, .search-flydown--content-item a, .search-flydown--continue, .live-search-takeover-cancel, .collection__item-title, .breadcrumbs-container a, .article--excerpt-readmore, .account-page-content a, .tweet--content a, .menulist-menu__show-more-trigger, .blogposts--footer-link, .product-link, .passwordentry-contents a, .password-page-footer--item a, .cart-continue, .cart-shipping .cart-shipping-toggle, .article--pagination .article--pagination-item-left > a, .article--pagination .article--pagination-item-right > a, .article--tags a, .rte a, .pxs-newsletter-text a, .shoppable-image__text-box-subheading a, .image-with-text__text a
  178.     {
  179.         color: var(--primary-color);
  180.     }
  181.     
  182.     .product-reviews--content .spr-content .spr-pagination a:hover, .product-reviews--content .spr-content .spr-review .spr-review-footer a:hover, .product-reviews--content .spr-summary-caption a.spr-summary-actions-togglereviews:hover, .product-recently-viewed__clear:hover, .shopify-payment-button .shopify-payment-button__more-options:hover, .product-vendor a:hover, .utils-showby-item.utils-showby-item--active:hover, .utils-sortby-button:hover, .utils-filter-button:hover, .productgrid--sidebar-menu .navmenu-link--active:hover, .productgrid-listview .productitem--link:hover, .productgrid--footer-results-list a:hover, .filter-item--grid-simple a:hover, [data-filter-active="true"]:hover, .filter-item a.filter-text--link:hover, .pagination--inner a:hover, .search-flydown--content-item a:hover, .search-flydown--continue:hover, .live-search-takeover-cancel:hover, .collection__item-title:hover, .breadcrumbs-container a:hover, .article--excerpt-readmore:hover, .account-page-content a:hover, .tweet--content a:hover, .menulist-menu__show-more-trigger:hover, .blogposts--footer-link:hover, .product-link:hover, .passwordentry-contents a:hover, .password-page-footer--item a:hover, .cart-continue:hover, .cart-shipping .cart-shipping-toggle:hover, .article--pagination .article--pagination-item-left > a:hover, .article--pagination .article--pagination-item-right > a:hover, .article--tags a:hover, .rte a:hover, .pxs-newsletter-text a:hover, .shoppable-image__text-box-subheading a:hover, .image-with-text__text a:hover
  183.     {
  184.         color: var(--primary-hover-color);
  185.     }
  186.     
  187.     .rte .tabs li, .rte .tabs li > a, .site-navigation .navmenu-meganav--image-link, .site-navigation .navmenu-depth-2 .navmenu-link, .utils-showby-item, .productgrid--sidebar-menu .navmenu-link, .filter-item, .productitem--title a, .cart-item--remove-link, .tweet--footer, .tweet--header-screenname, .hotspot__tooltip, .menulist-menu__link
  188.     {
  189.         color: var(--text-color);
  190.     }
  191.     
  192.     .productitem, .productitem--info
  193.     {
  194.         background: var(--background-color);
  195.     }
  196.     
  197.     .productitem__price .price__current
  198.     {
  199.         color: var(--primary-color);
  200.     }
  201.     
  202.     .product__tax, .productitem__tax
  203.     {
  204.         color: var(--text-color);
  205.     }
  206.     
  207.     .product-details
  208.     {
  209.         color: var(--text-color);
  210.     }
  211.     
  212.     .product-title
  213.     {
  214.         color: var(--text-color);
  215.     }
  216.     
  217.     .home-section--title, .cart-title, .account-page-title, .collection--title, .blog-title
  218.     {
  219.         color: var(--text-color);
  220.     }
  221.     
  222.     .article--excerpt-title
  223.     {
  224.         color: var(--text-color);
  225.     }
  226.     
  227.     .productitem, .disclosure-list, .cart-item, .article--excerpt-wrapper, .account-address, .pxs-map-card, .pxs-map-section-layout-x-outside-left .pxs-map-card-wrapper, .pxs-map-section-layout-x-outside-right .pxs-map-card-wrapper, .pxs-map-wrapper, .testimonial, .twitter--inner:not(.flickity-enabled), .twitter--inner .flickity-slider, .hotspot__tooltip-wrapper, .menulist-inner, .featured-product--container .featured-product--inner, #shopify-product-reviews, .rte table, .pxs-newsletter-text table, .shoppable-image__text-box-subheading table, .image-with-text__text table
  228.     {
  229.         border: 1px solid #495057;
  230.         box-shadow: 0 1px 4px #495057;
  231.     }
  232.     
  233.     
  234.     /* Home Page */
  235.     
  236.     .highlights-banner__1621847442b3f81c63.highlights-banner__container
  237.     {
  238.         background-color: var(--background-color);
  239.     }
  240.     
  241.     .highlights-banner__1621847442b3f81c63 .highlights-banner__content::before
  242.     {
  243.         background: linear-gradient( to right, var(--background-color) 10%, rgba(255, 255, 255, 0) 100%);
  244.     }
  245.     
  246.     .highlights-banner__1621847442b3f81c63 .highlights-banner__content::after
  247.     {
  248.         background: linear-gradient( to left, var(--background-color) 10%, rgba(255, 255, 255, 0) 100%);
  249.     }
  250.     
  251.     .highlights-banner__1621847442b3f81c63 .highlights-banner__block
  252.     {
  253.         color: var(--primary-color);
  254.     }
  255.     
  256.     .highlights-banner__icon .highlights-banner__custom-icon
  257.     {
  258.         filter: brightness(250%);
  259.     }
  260.     
  261.     
  262.     /* Cart Page */
  263.     
  264.     .cart-item--content-title
  265.     {
  266.         color: var(--text-color);
  267.     }
  268.     
  269.     .cart-item--product-options, .cart-item--content-price, .cart-item--unit-price
  270.     {
  271.         color: var(--text-color);
  272.     }
  273.     
  274.     .cart-item--total
  275.     {
  276.         color: var(--text-color);
  277.     }
  278. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址