add light theme for leftpane conversation list view
Audric Ackermann
5 years ago
parent
39463d2f93
commit
422c2610b6
@ -0,0 +1,108 @@
|
||||
// copy pasted from the android Session app. Some might not be used and some might be missing
|
||||
// also, some are sometimes applied with a opacity setting (most likely 0.6)
|
||||
$themes: (
|
||||
light: (
|
||||
accent: #00e97b,
|
||||
destructive: #ff453a,
|
||||
unimportant: #d8d8d8,
|
||||
unimportantButtonBackground: #0000,
|
||||
border: #979797,
|
||||
cellBackground: #fcfcfc,
|
||||
searchBarPlaceholder: #8e8e93,
|
||||
searchBarBackground: #8e8e931f,
|
||||
separator: #36383c,
|
||||
buttonBackground: #fcfcfc,
|
||||
modalBackground: #fcfcfc,
|
||||
modalBorder: #212121,
|
||||
fakeChatBubbleBackground: #f5f5f5,
|
||||
fakeChatBubbleText: #000,
|
||||
navigationBarBackground: #fcfcfc,
|
||||
newConversationButtonShadow: hsl(151, 89%, 26%),
|
||||
// text
|
||||
textColor: #000,
|
||||
textColorSubtle: #a0a0a0,
|
||||
textColorOpposite: #fff,
|
||||
// inbox
|
||||
inboxBackground: #fff,
|
||||
// buttons
|
||||
backgroundPrimary: #272726,
|
||||
foregroundPrimary: #fff,
|
||||
// conversation view
|
||||
messageSelected:
|
||||
linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)),
|
||||
composeViewBackground: #fcfcfc,
|
||||
composeViewTextFieldBackground: #ededed,
|
||||
receivedMessageBackground: #f5f5f5,
|
||||
sentMessageBackground: #00e97b,
|
||||
// left pane
|
||||
conversationList: #fff,
|
||||
conversationItemHasUnread: #fcfcfc,
|
||||
conversationItemSelected: #f0f0f0,
|
||||
clickableHovered: #dfdfdf,
|
||||
borderActionPanel: 1px solid #f1f1f1,
|
||||
),
|
||||
dark: (
|
||||
accent: #00f782,
|
||||
destructive: #ff453a,
|
||||
unimportant: #d8d8d8,
|
||||
unimportantButtonBackground: #323232,
|
||||
border: #979797,
|
||||
cellBackground: #1b1b1b,
|
||||
searchBarPlaceholder: #8e8e93,
|
||||
searchBarBackground: #8e8e931f,
|
||||
separator: #36383c,
|
||||
buttonBackground: #1b1b1b,
|
||||
modalBackground: #101011,
|
||||
modalBorder: #212121,
|
||||
fakeChatBubbleBackground: #3f4146,
|
||||
fakeChatBubbleText: #000,
|
||||
navigationBarBackground: #161616,
|
||||
newConversationButtonShadow: #077c44,
|
||||
// text
|
||||
textColor: #fff,
|
||||
textColorSubtle: #a0a0a0,
|
||||
textColorOpposite: #000,
|
||||
// inbox
|
||||
inboxBackground: linear-gradient(180deg, #171717 0%, #121212 100%),
|
||||
// buttons
|
||||
backgroundPrimary: #474646,
|
||||
foregroundPrimary: #fff,
|
||||
// conversation view
|
||||
messageSelected:
|
||||
linear-gradient(270deg, rgba(#00f480, 1), rgba(#00f480, 0.6)),
|
||||
composeViewBackground: #1b1b1b,
|
||||
composeViewTextFieldBackground: #141414,
|
||||
receivedMessageBackground: #222325,
|
||||
sentMessageBackground: #3f4146,
|
||||
// left pane
|
||||
conversationList: #1b1b1b,
|
||||
conversationItemHasUnread: #2c2c2c,
|
||||
conversationItemSelected: #404040,
|
||||
clickableHovered: #414347,
|
||||
borderActionPanel: none,
|
||||
),
|
||||
);
|
||||
|
||||
@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);
|
||||
}
|
||||
Loading…
Reference in New Issue