ダークモードスタイルガイド

本マニュアルのダークモード時にカスタムエレメントに対して適用しているスタイルです。
カスタムエレメントを使用したいページでダークモードがある場合、以下のコードでの対応が可能です。

:root {
  --main-bg-color: #1e1e1e;
  --hover-bg-color: #333;
  --default-color: #eee;
  --border-color: #999;
  --dropdown-bg-color: #2b2b2b;
  --focus-border-color: #007bff;
  --disabled-text-color: #333;
  --disabled-border-color: #666;
  --disabled-bg-color: #555;
  --selected-bg-color: #007bff2c;
  --active-page-bg-color: #006eff;
}

  .mf-search-box {
    color: var(--default-color);
  }

  /* Input */
  .mf-search-box .mf-search-bar_input {
    border-color: var(--border-color);
    background-color: transparent;
  }

  .mf-search-box .mf-search-bar_input:focus {
    outline: 2px solid #fff !important;
  }

  /* Common styles for elements that share background, color, and border color */
  .mf-search-box .mf-custom-select-wrapper_custom-select,
  .mf-search-box .mf-filters_use-links_item_buttons button,
  .mf-pagination .mf-pagination_button,
  .mf-related-keywords .mf-related-keywords_list_item .mf-related-keywords_list_item_button,
  .mf-search-bar_input_alt-btn_icon {
    background-color: var(--main-bg-color) !important;
    color: var(--default-color) !important;
    border-color: var(--border-color) !important;
  }

  .mf-search-bar_dropdown-list {
    background-color: var(--dropdown-bg-color) !important;
    color: var(--default-color) !important;
  }

  .mf-search-bar_input_clear-icon-btn,
  .mf-search-bar_mf-search-bar_dropdown-list_item_icon,
  .mf-search-bar_mf-search-bar_dropdown-list_item_icon-button {
    color: var(--default-color) !important;
  }



  .mf-search-bar_input_separator {
    background-color: var(--border-color) !important;
  }

  /* Hover states shared by multiple elements */
  .mf-search-box .mf-custom-select-wrapper_custom-select:hover,
  .mf-search-box .mf-filters_use-links_item_buttons button:hover,
  .mf-pagination .mf-pagination_button:hover,
  .mf-related-keywords .mf-related-keywords_list_item .mf-related-keywords_list_item_button:hover,
  .mf-featured-contents .mf-featured-contents_list_item:hover,
  .mf-drill-down .mf-drill-down_list-item:hover,
  .mf-drill-down .mf-drill-down_reset-button:hover {
    background-color: var(--hover-bg-color) !important;
    border-color: var(--focus-border-color) !important;
  }

  .mf-search-bar_input_alt-btn_icon:hover {
    color: var(--focus-border-color) !important;
  }

  .mf-search-box .mf-custom-select-wrapper .mf-custom-select-wrapper_custom-select:focus {
    outline: 2px solid #fff !important;
  }

  .mf-search-box .mf-custom-select-wrapper_custom-select_caret {
    border-color: var(--default-color);
  }

  .mf-search-box .mf-filters_use-links_item_buttons .mf-filters_use-links_item_buttons_button--selected {
    background-color: var(--selected-bg-color) !important;
    border-color: var(--focus-border-color) !important;
  }


  /* Result image */
  .mf-search-results_body_result_image {
    filter: brightness(0.9);
  }

  .mf-search-results_body_result_image:hover {
    filter: brightness(1);
  }

  .mf-search-results_body_result_texts_url_text {
    color: var(--default-color);
  }

  /* Featured Contents */
  .mf-featured-contents .mf-featured-contents_list_item {
    background-color: #222;
  }

  .mf-featured-contents .mf-featured-contents_list_item .mf-featured-contents_list_item_title {
    color: var(--default-color);
  }

  /* Drill downs */
  .mf-drill-down,
  .mf-related-keywords {
    border-color: var(--border-color);
  }

  .mf-drill-down .mf-drill-down_list-item .mf-drill-down_list-item_count {
    background-color: #444;
    color: var(--default-color);
  }

  .mf-drill-down .mf-drill-down_list-item .mf-drill-down_list-item_arrow {
    background-color: var(--hover-bg-color);
    color: var(--default-color);
    border-color: var(--border-color);
  }

  .mf-drill-down .mf-drill-down_list-item .mf-drill-down_list-item_arrow:hover {
    border-color: var(--focus-border-color);
    color: var(--focus-border-color);
  }

  .mf-drill-down .mf-drill-down_list-item .mf-drill-down_list-item_arrow:disabled {
    color: var(--disabled-text-color) !important;
    border-color: var(--disabled-border-color) !important;
    background-color: var(--disabled-bg-color) !important;
  }

  .mf-drill-down .mf-drill-down_reset-button {
    background-color: var(--hover-bg-color);
    color: var(--default-color);
    border-color: var(--border-color);
  }

  .mf-drill-down .mf-drill-down_selected-item .mf-drill-down_list-item_arrow {
    color: var(--border-color)
  }

  /* Pagination */
  .mf-pagination .mf-pagination_button:disabled {
    color: var(--disabled-text-color) !important;
    border-color: var(--disabled-border-color) !important;
    background-color: var(--disabled-bg-color) !important;
  }

  .mf-pagination .mf-pagination_button.active-page {
    background-color: var(--active-page-bg-color) !important;
    border-color: var(--active-page-bg-color) !important;
  }

想定される使い方

上記のコードをダークモードを実装しているCSSの中にコピーしてお使いください。

html.dark {
 ...
}

/* 又は */

@media (prefers-color-scheme: dark) {
  ...
}

/* など */

結果は以下のようになります。右上のダークモード切替ボタンを押して、ダークモードを切り替えてみてください。

SCSSの例

// Defining variables for colors
$main-bg-color: #1e1e1e;
$hover-bg-color: #333;
$default-color: #eee;
$border-color: #999;
$focus-border-color: #007bff;
$disabled-text-color: #333;
$disabled-border-color: #666;
$disabled-bg-color: #555;
$selected-bg-color: #007bff2c;
$active-page-bg-color: #006eff;

html.dark {
 .mf-search-box {
  color: var(--default-color);

  .mf-search-bar_input {
    border-color: var(--border-color);
    background-color: transparent;

    &:focus {
      outline: 2px solid #fff !important;
    }
  }

  .mf-custom-select-wrapper_custom-select, .mf-filters_use-links_item_buttons button {
    background-color: var(--main-bg-color) !important;
    color: var(--default-color) !important;
    border-color: var(--border-color) !important;
  }
}

/* Input */

/* Common styles for elements that share background, color, and border color */

.mf-pagination .mf-pagination_button, .mf-related-keywords .mf-related-keywords_list_item .mf-related-keywords_list_item_button, .mf-search-bar_input_alt-btn_icon {
  background-color: var(--main-bg-color) !important;
  color: var(--default-color) !important;
  border-color: var(--border-color) !important;
}

.mf-search-bar_dropdown-list {
  background-color: var(--dropdown-bg-color) !important;
  color: var(--default-color) !important;
}

.mf-search-bar_input_clear-icon-btn, .mf-search-bar_mf-search-bar_dropdown-list_item_icon, .mf-search-bar_mf-search-bar_dropdown-list_item_icon-button {
  color: var(--default-color) !important;
}

.mf-search-bar_input_separator {
  background-color: var(--border-color) !important;
}

/* Hover states shared by multiple elements */

.mf-search-box {
  .mf-custom-select-wrapper_custom-select:hover, .mf-filters_use-links_item_buttons button:hover {
    background-color: var(--hover-bg-color) !important;
    border-color: var(--focus-border-color) !important;
  }
}

.mf-pagination .mf-pagination_button:hover, .mf-related-keywords .mf-related-keywords_list_item .mf-related-keywords_list_item_button:hover, .mf-featured-contents .mf-featured-contents_list_item:hover {
  background-color: var(--hover-bg-color) !important;
  border-color: var(--focus-border-color) !important;
}

.mf-drill-down {
  .mf-drill-down_list-item:hover, .mf-drill-down_reset-button:hover {
    background-color: var(--hover-bg-color) !important;
    border-color: var(--focus-border-color) !important;
  }
}

.mf-search-bar_input_alt-btn_icon:hover {
  color: var(--focus-border-color) !important;
}

.mf-search-box {
  .mf-custom-select-wrapper .mf-custom-select-wrapper_custom-select:focus {
    outline: 2px solid #fff !important;
  }

  .mf-custom-select-wrapper_custom-select_caret {
    border-color: var(--default-color);
  }

  .mf-filters_use-links_item_buttons .mf-filters_use-links_item_buttons_button--selected {
    background-color: var(--selected-bg-color) !important;
    border-color: var(--focus-border-color) !important;
  }
}

/* Result image */

.mf-search-results_body_result_image {
  filter: brightness(0.9);

  &:hover {
    filter: brightness(1);
  }
}

.mf-search-results_body_result_texts_url_text {
  color: var(--default-color);
}

/* Featured Contents */

.mf-featured-contents .mf-featured-contents_list_item {
  background-color: #222;

  .mf-featured-contents_list_item_title {
    color: var(--default-color);
  }
}

/* Drill downs */

.mf-drill-down, .mf-related-keywords {
  border-color: var(--border-color);
}

.mf-drill-down {
  .mf-drill-down_list-item {
    .mf-drill-down_list-item_count {
      background-color: #444;
      color: var(--default-color);
    }

    .mf-drill-down_list-item_arrow {
      background-color: var(--hover-bg-color);
      color: var(--default-color);
      border-color: var(--border-color);

      &:hover {
        border-color: var(--focus-border-color);
        color: var(--focus-border-color);
      }

      &:disabled {
        color: var(--disabled-text-color) !important;
        border-color: var(--disabled-border-color) !important;
        background-color: var(--disabled-bg-color) !important;
      }
    }
  }

  .mf-drill-down_reset-button {
    background-color: var(--hover-bg-color);
    color: var(--default-color);
    border-color: var(--border-color);
  }

  .mf-drill-down_selected-item .mf-drill-down_list-item_arrow {
    color: var(--border-color);
  }
}

/* Pagination */

.mf-pagination .mf-pagination_button {
  &:disabled {
    color: var(--disabled-text-color) !important;
    border-color: var(--disabled-border-color) !important;
    background-color: var(--disabled-bg-color) !important;
  }

  &.active-page {
    background-color: var(--active-page-bg-color) !important;
    border-color: var(--active-page-bg-color) !important;
  }
}

}