[Feature request] no automatic light/dark mode switching

[TheMorc]

I didn't take a look at gtk3 properly as if it supports automatic light/dark mode switching on macOS (or maybe also Linux) Introducing it would bring a small issue where the css is currently only for one theme style and isn't duplicated to have a light mode or doesn't dynamically change somehow.

same could be applied for windows theme switching and it could probably fix the white titlebar too?

[ouwou]

i made the (perhaps stupid) decision to basically try and trample over whatever the system theme is to get everything to look nice cuz im a filthy windows user and didnt really know what i was doing. so that being said i guess the real issue here would be trying to respect the system theme. afaik on linux thats how dark vs light mode would be implemented too (e.g. you have Adwaita and Adwaita:dark as a variant). and iirc if the system theme switches then GTK applications automatically are able to pick that up.

[wyatt8740]

I've written css for abaddon to make it not break with my gtk3 theme, and also to put it in a 'dark mode.'

For what it's worth. You can enable the gtk3 inspector (or read the source code) and write your own CSS to theme it. I've done that to make it play relatively nicely under my esoteric GTK3 theme/environment, and also to make it show in 'dark mode.'

You can make a file called main.css (IIRC) and put it in ~/.config/abaddon/css/ (make the directory structure if needed. Technically, it's actually under $XDG_CONFIG_DIR/abaddon/css/ if $XDG_CONFIG_DIR is set.).

Here's mine, if you think it'll be useful. It's not perfect, but it's good enough in my environment that I've not felt like messing with it more. It's huge, so I have it collapsed in the 'details' field below.

@define-color background_color #484848; @define-color secondary_color #303030; @define-color text_color #fbfbfb; @define-color borders_color_01 @background_color; @define-color borders_color_02 #404040; @define-color color_0023 #484848; @define-color color_0025 #303030; @define-color bevel_light #6a6a6a; @define-color bevel_dark #101010; @define-color dark_fill #242424; .embed { background-color: rgba(0, 0, 0, 0.2); color: #cbcbcb; border-radius: 5px; padding: 10px; } .embed-footer { margin-top: 5px; font-size: 11px; } .embed-author { margin-bottom: 10px; font-size: 12px; } .channel-list { background-color: @secondary_color; } .channel-list treeview{ background-color: @dark_fill; } .channel-list treeview:selected { background-color: black; } .channel-row-label { padding: 5px; } .channel-row-label, .channel-row-label text { color: @text_color; background: rgba(0, 0, 0, 0); } .channel-row-label.nsfw text { text-shadow: rgba(0,0,0,0); color: #ed6666; } .channel-row:focus { background-color: #34495e; } .channel-row-category { padding-left: 15px; color: #ff5370; } .channel-row-channel { padding-left: 30px; } .messages, .message-container { background-color: @background_color; } .messages { padding: 15px; } .message-container-extra { color: #78909c; } .message-container-timestamp { color: #78909c; } .message-text { /* this isnt stricly necessary but it fixes emoji clipping */ padding-bottom: 5px; } .message-text:not(.failed) text, .message-reply { color: @text_color; } .message-text.pending text { color: shade(@text_color, 0.5); } .message-text.failed text { color: #b72d4f; } .message-reply { border-left: 2px solid gray; padding-left: 20px; padding-top: 6px; padding-bottom: 6px; opacity: 0.7; } .message-text + .message-text { padding-top: 5px; } .message-text text { background-color: @background_color; } .message-input, .message-input textview, .message-input textview text { background-color: @dark_fill; color: #adadad; /*border-radius: 3px;*/ border: 1px solid transparent; } .message-input { border: 1px solid #444444; margin-right: 15px; } .message-input.replying { border: 1px solid #026FB9; } .message-input.bad-input { border: 1px solid #dd3300; } .message-input-browse-icon { color: #b9bbbe; margin-left: 5px; margin-top: 11px; } /* i dont think theres a way to circumvent having to do this to adjust around the browse icon */ .message-input:not(.with-browser-icon) { padding: 0px 0px 0px 5px; } .message-input.with-browse-icon { padding: 0px 0px 0px 30px; } .frame .members { background-color: @dark_fill; } .members { background-color: @background_color; } .members row { background-color: @dark_fill; } .members row:selected { background-color: black; } .members-row-label { color: @text_color; padding: 5px; } .members-row-member { padding: 0; padding-left: 15px; } .message-attachment-box { color: #aaaaaa; border: 1px solid #aaaaaa; padding: 2px 5px 2px 5px; } .message-attachment-box label { margin: 5px; } .message-component { margin: 5px; } .message-component.primary { background: #5865F2; } .message-component.secondary, .message-component.link { background: #4F545C; } .message-component.success { background: #43B581; } .message-component.danger { background: #F04747; } .reaction-box { padding: 2px 5px 2px 5px; margin: 0px 0px 0px 0px; background-color: rgba(0.4, 0.4, 0.4, 0.4); border-radius: 5px; border: 1px solid transparent; } .reaction-box.reacted { border: 1px solid white; } .reaction-count { color: @text_color; } .completer { background-color: @secondary_color; padding: 5px; } .completer-entry { color: @text_color; } .completer-entry-image { margin-right: 6px; } .typing-indicator { margin-top: 10px; margin-bottom: -7px; color: @text_color; } .status-indicator.dnd { color: #982929; } .status-indicator.online { color: #43B581; } .status-indicator.offline { color: #808080; } .status-indicator.idle { color: #FAA61A; } .profile-main-container { padding: 20px; } .profile-username { margin-left: 10px; font-size: 20px; } .profile-badge { margin-right: 10px; } .profile-switcher { padding-top: 5px; } .profile-connections { margin-top: 10px; } .profile-connection { background: @secondary_color; border-radius: 15px; margin-right: 20px; } .profile-connection box { padding: 5px; } .profile-stack { padding-top: 5px; } .profile-notes-label { padding-top: 5px; padding-bottom: 5px; } .profile-notes-text, .profile-notes-text text { background: @secondary_color; } .profile-notes-text text { border-radius: 5px; border: 1px solid #36515e; color: @text_color; padding-bottom: 5px; } .profile-badges { padding-left: 5px; } .guild-members-pane-info { padding: 10px; } .drag-hover-top { background: linear-gradient(to bottom, rgba(255, 66, 66, 0.65) 0%, rgba(0, 0, 0, 0) 35%); } .drag-hover-bottom { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 65%, rgba(255, 66, 66, 0.65) 100%); } .friends-list list { background: @background_color; padding-left: 10px; } .friends-list-row-bot { color: #ff0000; } .channel-tab-switcher .box { margin: -7px -1px -7px -1px; background: #2a2a2a; border: 1px solid black; } .channel-tab-switcher tab:hover { box-shadow: inset 0 -6px #17633e; } .channel-tab-switcher tab:checked { box-shadow: inset 0 -6px #2feb90; } .channel-tab-switcher tab { background: #1A1A1A; border: 1px solid #808080; min-height: 35px; } .channel-tab-switcher tab.needs-attention:not(:checked) { font-weight: bold; animation: 150ms ease-in; /* background-image: radial-gradient(ellipse at bottom, #FF5370, #1A1A1A 30%); */ box-shadow: inset 0 -6px red; } .channel-tab-switcher tab > button { border: none; padding: 0; margin: 5px; min-width: 16px; min-height: 16px; color: #FF5370; background-color: rgba(0.21, 0.21, 0.21, 0.5); } .channel-tab-switcher tab > button:hover { background-color: alpha(#ff0000, 0.5); color: black; } box menubar menuitem { background-color: @background_color; border-left-color: @background_color; border-right-color: @background_color; border-top-color: @background_color; border-bottom-color: @background_color; } box menubar menuitem:active, box menubar menuitem:hover { background-color: @secondary_color; border-left-color: @secondary_color; border-right-color: @secondary_color; border-top-color: @secondary_color; border-bottom-color: @secondary_color; } scrollbar { background: none; background-image: none; border-image: none; min-width: 2px; min-height: 2px; background-color: alpha(@color_0022, 0.4); /* transition: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);*/ margin: 0px; padding: 0px; } scrollbar.top { border-bottom: 1px solid @color_0023; } scrollbar.bottom { border-top: 1px solid @color_0023; } scrollbar.left { border-right: 1px solid @color_0023; } scrollbar.right { border-left: 1px solid @color_0023; } scrollbar:backdrop { background-color: @color_0023; border-color: @color_0025; /* transition: 200ms ease-out;*/ } scrollbar slider { min-width: 9px; min-height: 9px; border: 2px solid @color_0023; /* border-radius: 6px;*/ background-color: @background_color; border-left-color: @bevel_light; border-right-color: @bevel_dark; border-top-color: @bevel_light; border-bottom-color: @bevel_dark; } scrollbar.vertical slider { margin: 3px 0px; } scrollbar.horizontal slider { margin: 0px 3px; } scrollbar slider:hover { background-color: @color_0025; } scrollbar slider:hover:active { background-color: @color_0025; } scrollbar slider:disabled { background-color: @color_0065; } .view, .channel-list { text-shadow: none; outline: none; } .messages list { outline: none; border-bottom-color: black; background-color: @secondary_color; } .frame{ outline-color: black; border-bottom-color: black; } scrolledwindow, .frame { border-bottom-color: @borders_color_02; border-left-color: @borders_color_01; border-top-color: @borders_color_01; border-right-color: @secondary_color; } scrollbar slider { background-color: @secondary_color; border-right-color: @secondary_color; border-left-color: @borders_color_01; border-top-color: @borders_color_01; border-bottom-color: @borders_color_02; border-width: 1px; } scrollbar trough, scrollbar .horizontal { border-right-color: @borders_color_01; border-left-color: @secondary_color; border-bottom-color: @secondary_color; border-top-color: @borders_color_01; } scrollbar trough { background-color: @dark_fill; } .messages list * { background-color: @secondary_color; } menubar { border-top-color: #555555; border-left-color: #555555; border-bottom-color: @secondary_color; border-right-color: @secondary_color; } .message-progress { border: none; margin-bottom: -8px; } .message-progress trough { border: none; background-color: transparent; } .message-progress progress { border: none; background-color: #86004a; margin-left: 1px; } .message-progress { margin-top: 14px; background-color: @dark_fill; } /*progress { background-color: #86004a; }*/ /* only powerbook seems to need these? theme update a good idea? */ paned box scrolledwindow viewport { background-color: @secondary_color; } scrolledwindow viewport { background-color: @dark_fill; } paned stack { background-color: @borders_color_02; } scrolledwindow .attachment-container { background-color: @dark_fill; } .message-input { border-image-width: 0px; border-width: 0px; margin-top: 0px; margin-bottom: 0px; margin-left: 3px; }

[aaronliu0130]

What's the status of system theme support?

[ouwou]

well, i think "automatic light/dark mode switching" is probably a system thing and not a me thing so ill close this. but as for respecting the system theme in general, maybe you/someone can open an issue about that. i expect itll take some back and forth to figure it out since i dont use gnome/any environment where gtk themes really exist