fiddlek/modules/themes/themes.scss

@import '~elements-sk/themes/themes';
/*
  Only define deltas from the original theme and global changes from elemets-sk
  elements.
*/

.body-sk.darkmode {
  --primary: var(--light-blue-500);
  --primary-variant: var(--light-blue-200);
  --on-primary-variant: var(--black);
}

.body-sk {
  --secondary: var(--green-500);
  --primary-variant: var(--light-blue-600);

  input {
    border: solid 1px var(--on-surface);
    color: solid 1px var(--on-surface);
    background: solid 1px var(--surface);
    display: inline-block;
  }

  button {
    min-width: auto;
    text-align: center;
    text-transform: none;
    outline: none;
    padding: 4px;
    margin: 4px;
    height: fit-content;
  }

  select,
  checkbox-sk {
    margin: 8px 0;
  }

  a {
    color: var(--primary);
    background: var(--on-primary);
  }

  multi-select-sk {
    border: solid 1px var(--on-surface);
    background-color: var(--surface);
    color: var(--on-surface);
  }

  multi-select-sk > * {
    background-color: var(--surface);
    border: solid 1px var(--surface);
  }

  multi-select-sk > [selected] {
    background: var(--surface-1dp);
  }

  multi-select-sk > :hover {
    border: var(--surface-1dp) solid 1px;
  }

  select-sk,
  select-sk > * {
    background-color: var(--surface);
    color: var(--on-surface);
  }

  select-sk > [selected] {
    background: var(--surface-1dp);
  }

  select-sk > * {
    border: var(--surface) solid 1px;
  }

  select-sk > :hover {
    border: var(--surface-1dp) solid 1px;
  }

  select-sk > :focus {
    background-color: var(--surface-1dp);
    transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  }

  select-sk > [selected] {
    background-color: var(--surface-1dp);
  }
}