You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
4.1 KiB
SCSS
142 lines
4.1 KiB
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);
|
|
|
|
$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(#8e8e93, 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(#8e8e93, 0.12),
|
|
// text
|
|
textColor: $white,
|
|
textColorSubtle: #a0a0a0,
|
|
textColorOpposite: $black,
|
|
textHighlight: rgba($accentDarkTheme, 0.6),
|
|
// inbox
|
|
inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%),
|
|
// buttons
|
|
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);
|
|
}
|