session-desktop/stylesheets/themes.scss

// 13592 lines for manifest.css on date 25 august

$themes: (
  light: (
    accent: #00e97b,
    accentButton: #000,
    destructive: #ff453a,
    cellBackground: #fcfcfc,
    modalBackground: #fcfcfc,
    fakeChatBubbleBackground: #f5f5f5,
    // input
      inputBackground: #8e8e931f,
    // text
      textColor: #000,
    textColorSubtle: #a0a0a0,
    textColorOpposite: #fff,
    // inbox
      inboxBackground: #fff,
    // buttons
      backgroundPrimary: #272726,
    foregroundPrimary: #fff,
    buttonGreen: #272726,
    // conversation view
      composeViewBackground: #fcfcfc,
    composeViewTextFieldBackground: #ededed,
    receivedMessageBackground: #f5f5f5,
    sentMessageBackground: #00e97b,
    receivedMessageText: #000,
    sentMessageText: #000,
    sessionShadow: 0 0 4px 0 rgba(#000, 0.37),
    // left pane
      conversationList: #fff,
    conversationItemHasUnread: #fcfcfc,
    conversationItemSelected: #f0f0f0,
    clickableHovered: #dfdfdf,
    sessionBorder: 1px solid #f1f1f1,
    leftpaneOverlayBackground: #fff,
    // scrollbars
      scrollBarTrack: #fcfcfc,
    scrollBarThumb: #474646,
    // pill divider:
      pillDividerColor: #0000001a,
    pillDividerTextColor: #555,
    // context menu
      contextMenuBackground: #f5f5f5,
    filterSessionText: brightness(0) saturate(100%),
    steelColor: #6b6b78,
    steelColorShade: #5a5a63,
    lastSeenIndicatorColor: #62656a,
    lastSeenIndicatorTextColor: #070c14,
    quoteBottomBarBackground: #f0f0f0,
  ),
  dark: (
    accent: #00f782,
    accentButton: #00f782,
    destructive: #ff453a,
    cellBackground: #1b1b1b,
    modalBackground: #101011,
    fakeChatBubbleBackground: #212121,
    // input
      inputBackground: #8e8e931f,
    // text
      textColor: #fff,
    textColorSubtle: #a0a0a0,
    textColorOpposite: #000,
    // inbox
      inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%),
    // buttons
      backgroundPrimary: #474646,
    foregroundPrimary: #fff,
    buttonGreen: #00f782,
    // conversation view
      composeViewBackground: #1b1b1b,
    composeViewTextFieldBackground: #141414,
    receivedMessageBackground: #222325,
    sentMessageBackground: #3f4146,
    receivedMessageText: #fff,
    sentMessageText: #fff,
    sessionShadow: 0 0 4px 0 rgba(#fff, 0.2),
    // left pane
      conversationList: #1b1b1b,
    conversationItemHasUnread: #2c2c2c,
    conversationItemSelected: #404040,
    clickableHovered: #414347,
    sessionBorder: 1px solid #ffffff0f,
    leftpaneOverlayBackground: linear-gradient(180deg, #171717 0%, #121212 100%),
    // scrollbars
      scrollBarTrack: #1b1b1b,
    scrollBarThumb: #474646,
    // pill divider:
      pillDividerColor: #353535,
    pillDividerTextColor: #a0a0a0,
    // context menu
      contextMenuBackground: #212121,
    filterSessionText: none,
    steelColor: #6b6b78,
    steelColorShade: #5a5a63,
    lastSeenIndicatorColor: #353535,
    lastSeenIndicatorTextColor: #a8a9aa,
    quoteBottomBarBackground: #404040,
  ),
);

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {
    .#{$theme}-theme & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), '#{$key}');
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value,
          )
        ) !global;
      }

      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}