Can't get checkbox cell color correct in selection bar and table body

[esd100]

The checkbox cell color in the selection bar and table body is inheriting the paper-datatable-card background color in paper-datatable > div > table > thead > tr > th and paper-datatable > div > table > tbody > tr > td.

I am really struggling to get it to be the right color.

I want the checkbox cell color on the side of the selection to match the color for the selection bar, and I want the checkbox cell color on the side of a table row to match the color for the row.

Can you help me figure out the needed CSS for this?

[bhargavkonkathi]

Hello @esd100 ,

• Please have a look into this file file or demo at following url
• Please try following code snippet may be work for you to change checkbox color.

<style is="custom-style"> :root { --accent-color: #03A9F4 ; // Replace with your color } </style>

or

<style is="custom-style"> html { --accent-color: #FF9800; }</style>

Please let us know if above solution doesn't work for you. Thanks.

[esd100]

Hey @bhargavkonkathi,

Unfortunately that doesn't work.

All of the other variables and mixins work appropriately with my setup.

  <template>
    <style>
      :host {
        display: block;
        --primary-color: #E00122;
        --light-primary-color: #FE2041;
        --dark-primary-color: #A30119;
        --primary-background-color: #000000;
        --light-background-color: #5E5E5E;
        --dark-background-color: #000000;
        --primary-text-color: #FFFFFF;
        --secondary-text-color: rgba(255,255,255,0.7);
        --disabled-text-color: rgba(255,255,255,0.5);
        --dark-secondary-text-color: rgba(0,0,0,0.7);
        --dark-disabled-text-color: rgba(0,0,0,0.5);
        --light-divider-color: rgba(255,255,255,0.12);
        --dark-divider-color: rgba(0,0,0,0.12);
        --accent-color: #A30119;
        --paper-card-background-color: #000000;

      }

      paper-card {
        border-radius: 2px;
        margin: 1%;
        padding: 1%;
        width: 98%;
        height: 98%;
        @apply(--paper-card-background-color);
      }

      /* Datatable styles */
      paper-datatable-card {
        --paper-datatable-divider-color: var(--dark-divider-color);
        --paper-datatable-top-toolbar-text-color: var(--primary-text-color);
        --paper-datatable-top-toolbar-icon-color: var(--primary-text-color);
        --paper-datatable-selection-toolbar-color: var(--dark-primary-color);
        --paper-datatable-selection-toolbar-text-color: var(--primary-text-color);
        --paper-datatable-selection-toolbar-icon-color: var(--primary-text-color);
        --paper-datatable-navigation-bar-text-color: var(--primary-text-color);

        --paper-datatable-card: {
          margin: 1%;
          padding: 1%;
          color: var(--primary-color);
          background-color: var(--primary-background-color);

        };

        --paper-datatable-top-toolbar: {
          background-color: var(--primary-color);
        };

        --paper-datatable-navigation-bar: {
          background-color: var(--primary-color);
        };
      }

      paper-datatable {
        --paper-datatable-divider-color: var(--dark-divider-color);
        --paper-datatable-row-hover-color: var(--dark-disabled-text-color:);
        --paper-datatable-row-selection-color: var(--dark-disabled-text-color:);
        --paper-datatable-checkbox-border-color: var(--primary-text-color);
        --paper-datatable-header-checkbox-border-color: var(--primary-text-color);
        --paper-datatable-icon-color: var(--primary-text-color);
        --paper-datatable-column-header: {
            color: var(--primary-text-color);
            background-color: var(--primary-color);
            padding-left: 0.2%;
            padding-right: 0.2%;
        };
        --paper-datatable-column-header: {
          color: var(--primary-text-color);
          background-color: var(--primary-background-color);
        };

        --paper-datatable-column-header-sorted: {
            color: var(--primary-text-color);
            background-color: var(--primary-color);
        };
        --paper-datatable-column-header-sort-icon-hover: {
            color: var(--dark-disabled-text-color:);
        };

        --paper-datatable-cell: {
            color: var(--primary-background-color);
            background-color: var(--primary-text-color);
            padding-left: 0.1%;
            padding-right: 0.1%;
        };

        --paper-datatable-cell-last: {
            padding-right: 0.2%;
        };
      }

    </style>

    <paper-card>
      <paper-datatable-card id="datatableCard" header="{{tableName}}">

        <div slot="toolbar-main">
          <paper-input value="{{searchTerm}}" label="Search by Category..." style="display:inline-block" no-label-float>
            <div prefix>
              <iron-icon icon="search"></iron-icon>
            </div>
          </paper-input>
          <paper-icon-button icon="cached" on-tap="retrieveResults"></paper-icon-button>
        </div>

        <div slot="toolbar-select">
          <paper-icon-button icon="delete" on-tap="deleteSelected"></paper-icon-button>
        </div>

        <div slot="toolbar-select-single">
          <paper-icon-button icon="datatable:editable" on-tap="editDialogForSelected"></paper-icon-button>
        </div>

        <paper-datatable id="datatable" data="{{logs}}" selectable multi-selection on-row-tap="rowTapped">

          <paper-datatable-column header="Date" property="Date" type="String" sortable></paper-datatable-column>
          <paper-datatable-column header="Minutes" property="Minutes" type="Number" sortable></paper-datatable-column>
          <paper-datatable-column header="Category" property="Category" type="String" sortable></paper-datatable-column>
          <paper-datatable-column header="Topic" property="Topic" type="String" sortable></paper-datatable-column>
          <paper-datatable-column header="Location" property="Location" type="String" sortable></paper-datatable-column>
        </paper-datatable>
      </paper-datatable-card>
    </paper-card>
  </template>

[dhrytsenko]

Hi @esd100 ! Do you still have this problem?

[dhrytsenko]

Closed due to inactivity. Please open it again if you have any questions