Themes v3 Part 1 "2.1" codenamed "One step for themes, a giant burder for code reviewers"
* Adding missing color slots
* Refactor copypasta spaghetti into something declarative
Changes in general:
- More color slots
- Better text contrast calculation and text color generation
- All color slots are overridable
- Single point of truth - all color slots must be declared in one place (
theme_data.service.js), everything else will be made based on that.
- Limited backward compatibility with v2
- Better forward compatibility and future-proofing.
Updated color input
- Updated layout to include color input and text input in same visual box
transparentkeyword, displays checkerboard
Support for computed colors (i.e.
--accent), shows resulting color (technically, fallback)
- FIX shadow control not showing color
- Better control of "override" checkbox
Updated opacity input
- Better control of "override" checkbox
- Added bunch of controls to "Advanced" tab, this will be refactored later. UI needs to be changed drastically in a later MR.
New color/opacity slots
Accent (mutually optional with Link)
- Interface links (i.e. not post contents)
- Toggled (previously Pressed)
- Tab color+text color
Active tab text color, inherits from
bgsince active tab is essentially transparent
- LightBg now redefinable, completely with its own Faint, FaintLink, Link, Text, Icon colors.
- SelectedPost - background/text of selected post
- SelectedMenu - background/text of hovered/selected menu items, this includes navigation, autocompletion and some selectable list in user settings
- Popover color/opacity slots
- Dropdown menu hover slots (or make them use SelectedMenu)
allTODOs in the code mentioning needing new slots. Removed SOME TODOs, the only remaining colors seem to be affecting the buttons, i.e. "primary button" and "danger button". Given how complex and copy-pasty button colors are, i would rather refactor theme framework to properly support states/variants/layers without the need for copy-paste, however i've exhaused my refactor quota for now.
- Initially load only needed theme for anon viewer, don't wait until all themes are loaded.
Major overhaul of how slots are computed: copypaste, manual cloning and short-circuiting are gone, now replaced by defining slots, dependencies and how they are defined in declarative way.
Color slots are defined in a
SLOT_INHERITANCEobject, slots can have dependencies and color functions. This allows define color slots declaratively, this clears up which color depends on which and how specific colors are defined. It also eliminates need for cloning colors manually, since system clones colors for you.
Text colors are defined with
LAYERSobject defines what layers there are in UI (i.e.
btnlies on top of
bgwhich lies on top of
underlay), and this information is used to properly generate text color i.e.
getTextColorfor semi-transparent areas by alpha-blending layers beneath text.
NOTE: I'm not entirely pleased with this solution and presence of
DEFAULT_OPACITYobject, but this will do for now until next steps and I've figured out how to make it more reusable.
Dependency resolution is handled by sorting slots topologically (i used some approach from wikipedia)
- Add additional sorting to ensure that "basic" colors are usable for computed properties. (partially implemented)
- ALL slots can be redefined by theme now. Just in case.
- Color slots are defined in a
transparentkeyword - allows forcefully setting
opacityto 0 without affecting user's opacity and allows user to change color to their choosing if needed or avoid it changing.
computed color support - same as with colors in shadows - you can use
--accent) as color for (some) slots, in additional you can supply a number after a comma (i.e.
--accent,20) to make color brighter or darker (depending on if theme is light on dark or dark on light
added better backward/forward compatibility
Theme snapshots - exporting theme can also store ALL slots that theme generated at the moment, so exporting theme from newer FE version and importing into older FE version will allow importing a snapshot instead so theme looks as intended - mainly because inheritance may change in future,
getTextColorfunction, etc. etc. and it could potentially break themes. Right now some themes give slightly different text colors for alerts in panel header for instance.
Make it work for possible v2.1 -> v2 downgrades in localstorage
It mostly works, but there is a problem with
- It mostly works, but there is a problem with
Test v2.1 on v2
lightBgdoesn't work well with v2 - it's definable but you can't control text color for it, so it really should be left alone for snapshots and other field used instead
- Test more themes v2 on v2.1
- Test v1 on v2.1
- Add compatibility mode for colors not definable in v2?
- v2.1 -> v2 -> v2.1 doesn't work properly
- Make it work for possible v2.1 -> v2 downgrades in localstorage
themeis now used for snapshot, for v2 compatibility (because of possible missing fields)
Add UI for allowing forcefully importing
theme(snapshot) if version of
sourcenewer that FE's version.
- Test pseudo-v2.5 themes
- Add UI for allowing forcefully importing
- Theme snapshots - exporting theme can also store ALL slots that theme generated at the moment, so exporting theme from newer FE version and importing into older FE version will allow importing a snapshot instead so theme looks as intended - mainly because inheritance may change in future,