Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.reactivesearch.io/docs/reactivesearch/vue/theming/overview/ below:

Reactivesearch.io Docs - Search stack for Elasticsearch, OpenSearch, Solr, MongoDB

1 min read

Themes can be used to change the default styles for all the ReactiveSearch components. These include basic styles like fonts, colors or component styles. The component styles are applied to most of the components.

ReactiveBase acts as the theme provider for all the child ReactiveSearch components. It supports a theme prop which accepts an object with the following defaults:

{
  typography: {
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Droid Sans", "Helvetica Neue", sans-serif',
      fontSize: '16px',
  },

  colors: {
    textColor: '#424242',
    primaryTextColor: '#fff',
    primaryColor: '#0B6AFF',
    titleColor: '#424242',
    alertColor: '#d9534f',
  }
};

You can overwrite the aforementioned default styles by providing the respective key/values as theme prop. The supported keys are typography, colors and component. For example:

<ReactiveBase
  app="good-books-ds"
  url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@arc-cluster-appbase-demo-6pjy6z.searchbase.io"
  :enable-appbase="true"
  :theme="{
      typography: {
          fontFamily: 'Raleway, Helvetica,      sans-serif',
          },
      colors: {
          primaryColor: '#008000',
          titleColor: 'white',
        },
      component: {
          padding: 10
        }
    }"
>
  <Component1 .. />
  <Component2 .. />
</ReactiveBase>

Looking to customize styles, rendering of a UI component or bring your own design system? See the ReactiveSearch UI customization guide.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4