Custom theme for deltachat (draft)

readme.md

this is just an experiment to demo what can be done with the theming system, I tried to make messages look a bit like glass.

install it by saving glass-theme.css into your custom-themes directory:

• Linux: ~/.config/DeltaChat/custom-themes
• Windows (setup exe): AppData\\Local\\DeltaChat\\custom-themes
• Windows (appx / ms-store): AppData\\Local\\Packages\\merlinux.DeltaChat_v2ry5hvxhdhyy\\LocalCache\\Local\\DeltaChat\\custom-themes
• MacOS: ~/Library/Application\ Support/DeltaChat/custom-themes

read more about custom themes in deltachat desktop on: https://github.com/deltachat/deltachat-desktop/blob/main/docs/THEMES.md

glass-theme-source.scss

/* Set theme variables used for theme Generation */
@use "./_themebase" with (
    $themeDarkOrLight: light,
    $accentColor: #2090ea,
    $bgChatView: #e6dcd4,
    $bgImage: url("./images/background_light.svg"),
    $bgMessageBubbleIncoming: rgba(255, 255, 255, 0.5),
    $bgMessageBubbleOutgoing: rgba(#efffded0, 0.5),
    $messageOutgoingStatusColor: #4200f5,
    $bgNavBar: #606060,
    $bgPrimary: #fff,
    $bgSecondary: #f5f5f5,
    $chatListItemSelectedBg: #4c6e7d,
    $colorDanger: #f96856,
    $colorNone: #a0a0a0,
    $colorPrimary: #4200f5,
    $newChatButtonBg: #415e6b,
    $keybindingHintsBoxBackground: rgba(0, 0, 0, 0.05),
    $keybindingActionBackground: rgba(0, 0, 0, 0.05),
    $keybindingKeyBackground: lightgray,
    $keybindingKeyBorder: gray,
    $keybindingKeyShadow: rgba(0, 0, 0, 0.35),
    $textNavBar: #fff,
    $textPrimary: #010101,
    $textSecondary: #585a5f,
    $btnPrimaryText: #fff,
    $btnDangerText: #fff,
    $btnDangerBackground: #f96856,
    $colorLessContrast: #676767,

    $scrollbarTransparency: 0.5
);

.theme-meta {
    --name: "Glass Experiment";
    --description: "experiment";
}

/* overwrite themedata */
:root {
    --scrollbarThumb: #666666;
    --scrollbarThumbHover: #606060;
    --bp4DialogBgSecondary: #ececec;
    --chatListItemBgHover: rgb(242, 242, 242);
    --cli-search-result-divider: var(--delta-dialog-separator);
    --cli-search-result-divider-border-width: 0px;
    --emojiMartSelect: var(--chatListItemBgHover);
}

.msg-container,
.info-message .bubble {
    backdrop-filter: blur(3px) grayscale(30%);
    box-shadow: #00000042 0px 0px 2px;
}

.styles_module_reactions .styles_module_emoji {
    backdrop-filter: blur(3px);
    box-shadow: #00000082 0px 0px 2px;
}

glass-theme.css

/* Set theme variables used for theme Generation */
/* Functions */
/* Root Variables */
:root {
  --themeDarkOrLight: light;
  --colorPrimary: #4200f5;
  --colorDanger: #f96856;
  --colorNone: #a0a0a0;
  --bgPrimary: #fff;
  /* Buttons */
  --buttonPrimaryBackground: #4200f5;
  --buttonPrimaryText: #fff;
  --buttonPrimaryHover: rgb(98.6489795918, 41, 255);
  --buttonSecondaryBackground: #f5f5f5;
  --buttonSecondaryText: #585a5f;
  --buttonSecondaryHover: rgb(219.5, 219.5, 219.5);
  --buttonDangerText: #fff;
  --buttonDangerBackground: #f96856;
  --buttonDangerHover: rgb(247.2514285714, 59.9942857143, 36.7485714286);
  --buttonDisabledBackground: rgb(219.5, 219.5, 219.5);
  --buttonDisabledText: rgb(151.4344262295, 153.6147540984, 159.0655737705);
  /* NavBar */
  --navBarBackground: #606060;
  --navBarHeight: 50px;
  --navBarText: #fff;
  --navBarButtonHover: rgba(143, 153, 168, 0.15);
  --navBarButtonActive: rgba(143, 153, 168, 0.3);
  --navBarSearchPlaceholder: rgb(186.15, 186.15, 186.15);
  --navBarGroupSubtitle: rgb(186.15, 186.15, 186.15);
  /* ChatView */
  --chatViewBg: #e6dcd4;
  --chatViewBgImgPath: url("./images/background_light.svg");
  /* ChatView - Composer */
  --composerBg: #fff;
  --composerText: #010101;
  --composerPlaceholderText: rgba(1, 1, 1, 0.5);
  --composerBtnColor: rgba(1, 1, 1, 0.9);
  --composerSendButton: #415e6b;
  --emojiSelectorSelectionColor: #2090ea;
  /* Chat List */
  --chatListItemSelectedBg: #4c6e7d;
  --chatListItemSelectedBgHover: rgb(81.7850746269, 118.3731343284, 134.5149253731);
  --chatListItemSelectedText: #fff;
  --chatListItemBgHover: rgb(249.9, 249.9, 249.9);
  --chatListItemBgPinned: rgb(237.15, 237.15, 237.15);
  --chatListItemBgPinnedHover: rgb(232.05, 232.05, 232.05);
  --chat-list-item-summary-text: rgb(85.15, 85.15, 85.15);
  --chat-list-item-archived-label: #343434;
  --chat-list-item-archived-label-border: rgb(85.15, 85.15, 85.15);
  /* Chat List - search */
  --cli-search-result-divider: rgb(232.25, 232.25, 232.25);
  --cli-search-result-divider-border: rgb(219.5, 219.5, 219.5);
  --cli-search-result-divider-border-width: 2px;
  /* ContactList / AccountList */
  --contactListItemBgHover: rgb(249.9, 249.9, 249.9);
  --contactListItemBgFocus: rgb(224.4, 224.4, 224.4);
  /* Keybindings Cheatsheet */
  --keybindingHintsBoxBackground: rgba(0, 0, 0, 0.05);
  --keybindingKeyBackground: lightgray;
  --keybindingKeyBorder: gray;
  --keybindingKeyFontColor: black;
  --keybindingKeyShadow: rgba(0, 0, 0, 0.35);
  --keybindingActionBackground: rgba(0, 0, 0, 0.05);
  /* Floating Action Button */
  --newChatButtonBg: #415e6b;
  /* Message Bubble */
  --messageText: #010101;
  --messageQuotedText: rgb(115.75, 115.75, 115.75);
  /* same as message text */
  --setupMessageText: #ed824e;
  --infoMessageBubbleBg: #0000008c;
  --infoMessageBubbleText: white;
  --messageIncomingBg: rgba(255, 255, 255, 0.5);
  --messageOutgoingBg: rgba(239, 255, 222, 0.5);
  --messageOutgoingStatusColor: #4200f5;
  /* Message Bubble - Metadata */
  --messageStatusIcon: #4caf50;
  --messageStatusIconSending: #62656a;
  --messageMetadataIconColorOutgoing: #4caf50;
  --messageMetadataIconColorIncoming: #a4a6a9;
  --messageMetadataDate: #62656a;
  --messageMetadataIncoming: rgba(#ffffff, 0.7);
  /* Message Bubble - Attachments */
  --messageAttachmentIconExtentionColor: #070c14;
  /* Manual value: This will not get generated in the future */
  --messageAttachmentIconBg: transparent;
  /* Manual value: This will not get generated in the future */
  --messageAttachmentFileInfo: #010101;
  --showInChatButtonBg: #a0a0a0;
  /* Login Screen */
  --loginInputFocusColor: #4200f5;
  --deltaChatPrimaryFgLight: #585a5f;
  /* Context Menu */
  --contextMenuBg: #fff;
  --contextMenuBorder: rgb(219.5, 219.5, 219.5);
  --contextMenuText: #585a5f;
  --separatorColor: #f5f5f5;
  --bp4DialogHeaderBg: #fff;
  /* BlueprintJS overwrites, used in code, just weren't renamed for the sake of renaming */
  --bp4DialogBgSecondary: #f5f5f5;
  --bp4DialogBgPrimary: #fff;
  --bp4Heading: #010101;
  --bp4InputText: #010101;
  --bp4InputPlaceholder: lightgray;
  --bp4MenuText: #010101;
  --bp4MenuBg: #fff;
  --bp4Switch: #7a8084;
  --bp4SwitchShadow: unset;
  --bp4SwitchChecked: #acd4e8;
  --bp4SwitchShadowChecked: unset;
  --bp4SwitchKnob: #f5f5f5;
  --bp4SwitchKnobShadow: 0px 2px 0 0px #d2cfcfad;
  --bp4SwitchKnobChecked: #42a5f5;
  --bp4SwitchKnobShadowChecked: 0px 1px 0 0px #c9d4d2d1;
  --dialogBackdropBackground: rgba(17, 20, 24, 0.7);
  --outlineProperties: 1px solid transparent;
  --delta-dialog-separator: #f5f5f5;
  --delta-dialog-separator-text: rgb(183.8, 183.8, 183.8);
  /* progressBar */
  --progressBarBg: rgb(229.5, 229.5, 229.5);
  --progressBarSuccess: green;
  --progressBarPrimary: var(--colorPrimary);
  --progressBarDanger: var(--colorDanger);
  /* Misc */
  --galleryBg: #fff;
  --avatarLabelColor: #ffffff;
  --avatarGradientMixFactor: 80%;
  --avatarGradientAngle: -45deg;
  --brokenMediaText: #070c14;
  --brokenMediaBg: #ffffff;
  --unreadCountBg: #2090ea;
  --unreadCountLabel: #ffffff;
  --contactEmailColor: #585a5f;
  --errorColor: #f44336;
  --globalLinkColor: #2090ea;
  --globalBackground: #fff;
  --globalText: #010101;
  --globalHoverBg: rgb(247.35, 247.35, 247.35);
  --textLessContrast: #676767;
  --videoPlayBtnIcon: #2090ea;
  --videoPlayBtnBg: #ffffff;
  --videoPlayBtnBorder: #eaeaea;
  --videoPlayBtnBgHover: #eeeeee;
  --fullScreenMediaButtons: #8b8e91;
  --messageHightlightColor: rgba(66, 165, 245, 0.8);
  --addMemberChipBackgroundColor: #f5f5f5;
  --searchInputBackgroundColor: ##666
    --galleryWebxdcItem: rgb(229.5, 229.5, 229.5);
  --galleryFileRowHover: rgb(237.15, 237.15, 237.15);
  --recently-seen-indicator-color: #34c759;
  /* Emoji, Sticker & App picker overwrites */
  --picker-Background: #fff;
  --picker-BorderRadius: 5px;
  --picker-background-rgb: 255, 255, 255;
  --picker-text-rgb: 1, 1, 1;
  --picker-accent-rgb: 66, 0, 245;
  --picker-selected-input-bg-rgb: 245, 245, 245;
  --picker-border-and-hover-color: rgb(
    224.6, 224.6, 224.6
  );
  /** HTML Email Window */
  --htmlEmail-themeDarkOrLight: light;
  --htmlEmail-background: #fff;
  --htmlEmail-color: #010101;
  --htmlEmail-border-color: #cccccc;
  /** MessageDetails Colors **/
  --MessageDetails-ReadReceipt-Bg: rgb(229.5, 229.5, 229.5);
  --MessageDetails-ReadReceipt-Date: rgb(77.5, 77.5, 77.5);
  /** generic reusable colors */
  --summary-text-color: rgb(85.15, 85.15, 85.15);
  --textPrimary: #010101;
  --textSecondary: #585a5f;
  --iconColorPrimary: #343434;
  --scrollbarThumb: rgba(128, 128, 128, 0.5);
  --scrollbarThumbHover: rgba(128, 128, 128, 0.64);
  --jumpDownButtonBackgroundColor: white;
  --jumpDownButtonIconColor: #808080;
  --unreadCountBgMuted: #b6b6bb;
  --SPECIAL-emoji-picker-category-icon-style: outline;
}

.theme-meta {
  --name: "Glass Experiment";
  --description: "experiment";
}

/* overwrite themedata */
:root {
  --scrollbarThumb: #666666;
  --scrollbarThumbHover: #606060;
  --bp4DialogBgSecondary: #ececec;
  --chatListItemBgHover: rgb(242, 242, 242);
  --cli-search-result-divider: var(--delta-dialog-separator);
  --cli-search-result-divider-border-width: 0px;
  --emojiMartSelect: var(--chatListItemBgHover);
}

.msg-container,
.info-message .bubble {
  backdrop-filter: blur(3px) grayscale(30%);
  box-shadow: rgba(0, 0, 0, 0.2588235294) 0px 0px 2px;
}

.styles_module_reactions .styles_module_emoji {
  backdrop-filter: blur(3px);
  box-shadow: rgba(0, 0, 0, 0.5098039216) 0px 0px 2px;
}