session-desktop/stylesheets/themes.scss

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

$white: #ffffff;
$black: #000000;
$destructive: #ff453a;
$accentLightTheme: #00e97b;
$accentDarkTheme: #00f782;

$borderLightTheme: #f1f1f1; // search for references on ts TODO: make this exposed on ts
$borderDarkTheme: rgba($white, 0.06);
$inputBackgroundColor: #8e8e93;

$borderAvatarColor: unquote(
  '#00000059'
); // search for references on ts TODO: make this exposed on ts

$themes: (
  light: (
    accent: $accentLightTheme,
    accentButton: $black,
    cellBackground: #fcfcfc,
    destructive: $destructive,
    modalBackground: #fcfcfc,
    fakeChatBubbleBackground: #f5f5f5,
    // input
      inputBackground: rgba($inputBackgroundColor, 0.12),
    // text
      textColor: $black,
    textColorSubtle: #a0a0a0,
    textColorOpposite: $white,
    textHighlight: rgba($black, 0.2),
    // inbox
      inboxBackground: $white,
    // buttons
      backgroundPrimary: #272726,
    foregroundPrimary: $white,
    buttonGreen: #272726,
    // conversation view
      composeViewBackground: #fcfcfc,
    composeViewTextFieldBackground: #ededed,
    receivedMessageBackground: #f5f5f5,
    sentMessageBackground: $accentLightTheme,
    receivedMessageText: $black,
    sentMessageText: $black,
    sessionShadow: 0 0 4px 0 rgba($black, 0.37),
    sessionShadowColor: rgba($black, 0.37),
    // left pane
      conversationList: $white,
    conversationItemHasUnread: #fcfcfc,
    conversationItemSelected: #f0f0f0,
    clickableHovered: #dfdfdf,
    sessionBorder: 1px solid $borderLightTheme,
    sessionUnreadBorder: 4px solid $accentLightTheme,
    leftpaneOverlayBackground: $white,
    // scrollbars
      scrollBarTrack: #fcfcfc,
    scrollBarThumb: #474646,
    // pill divider:
      pillDividerColor: rgba($black, 0.1),
    pillDividerTextColor: #555555,
    // context menu
      contextMenuBackground: #f5f5f5,
    filterSessionText: brightness(0) saturate(100%),
    lastSeenIndicatorColor: #62656a,
    lastSeenIndicatorTextColor: #070c14,
    quoteBottomBarBackground: #f0f0f0,
  ),
  dark: (
    accent: $accentDarkTheme,
    accentButton: $accentDarkTheme,
    destructive: $destructive,
    cellBackground: #1b1b1b,
    modalBackground: #101011,
    fakeChatBubbleBackground: #212121,
    // input
      inputBackground: rgba($inputBackgroundColor, 0.12),
    // text
      textColor: $white,
    textColorSubtle: #a0a0a0,
    textColorOpposite: $black,
    textHighlight: rgba($accentDarkTheme, 0.6),
    // inbox
      // buttons
      inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%),
    backgroundPrimary: #474646,
    foregroundPrimary: $white,
    buttonGreen: $accentDarkTheme,
    // conversation view
      composeViewBackground: #1b1b1b,
    composeViewTextFieldBackground: #141414,
    receivedMessageBackground: #222325,
    sentMessageBackground: #3f4146,
    receivedMessageText: $white,
    sentMessageText: $white,
    sessionShadow: 0 0 4px 0 rgba($white, 0.2),
    sessionShadowColor: rgba($white, 0.2),
    // left pane
      conversationList: #1b1b1b,
    conversationItemHasUnread: #2c2c2c,
    conversationItemSelected: #404040,
    clickableHovered: #414347,
    sessionBorder: 1px solid $borderDarkTheme,
    sessionUnreadBorder: 4px solid $accentDarkTheme,
    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,
    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);
}