FlorisBoard 0.3.14 New theme engine + stylesheet editor mega-thread

[patrickgold]

This discussion area intents to serve as a mega-thread for giving feedback and posting suggestions for the new theme engine and its completely re-written stylesheet editor coming in 0.3.14. This thread is intended to be open for duration of all beta releases beginning from beta09 up to 0.3.14 stable release.

If you have feedback/suggestions regarding all other areas of the preference rework, consider posting it in #1235!

Known issues:

• The stylesheet editor does not really work well on a landscape phone screen due to space issues

[tasmo]

The idea is very nice and the editor is stylish.

Didn't find a way to put hex or even rgb color codes in.

[patrickgold]

Thanks for your feedback! I agree entering codes manually should be an option and will be an option in the next beta release.

[patrickgold]

PR #1538 adds a manual color string editor. Will be included in the next beta release 0.3.14-beta10

[mnrsuristic]

that would be great actually

[pokegamer5547]

I tried it just now and it looks very cool! :)
Btw i couldn't find any option to change the color of gesture trail, i checked all colors for my custom theme in theme editor to change the color but its still green. Am i missing something or is it meant to be implemented later?

[patrickgold]

Yup something I forgot to add. Will be an option in beta10.

[patrickgold]

PR #1538 adds the ability to customize the color of the glide trail (aka gesture trail). Will be included in the next beta release 0.3.14-beta10

[BrudiBanani]

Currently i have not found a way to manually enter colorcodes. That should be an option. If i want to choose the same color for two or more parameters it is very unpleasant to find the exact position with the correct color again.

[patrickgold]

Yup I somehow didn't think of that. In the next beta release you will be able to enter codes manually as well.

[patrickgold]

PR #1538 adds a manual color string editor. Will be included in the next beta release 0.3.14-beta10

[Lurux]

Feedback on the theme editor

There are many points to mention so I'll try to keep it short and clean. Please let me know if I should turn any of these into a dedicated issue !

QOL aka. nitpicking

• The mode toggle is unclear, I only found it because I knew it existed but otherwise I would have completely ignored it as some kind of documentation button. I think a proper dropdown at the top of the page would be more appropriate. Also I noticed it started in "advanced" mode by default, I don't know if this was intentional.

• I feel like, in basic mode, the calls to a variable could be replaced with the variable's display name directly (for example, key background: var(--surface) would become key background: Common surface)

• Finally I think it would be very nice to have a property to directly define an invisible color instead of having to use a "solid color" and setting it to completely transparent (12 items are concerned in the default theme)

• The notion of "bundled theme component" could be confusing for new users, maybe it should be rephrased to just "bundled theme" (and "create theme component > from existing component" would then become "create theme > from existing theme") ?

Default theme

I think the default theme could be simplified a bit to be more easy for new users.
I'm willing to help with this if you agree with my points.

• Apart from --on-surface, the three other foreground variables are unused. I think they should either be used or removed, especially considering they're all the same color.

• Inversely, 12 elements are colored using colors not coming from a variable. I think we should use variables for these whenever possible.

• We might also want to move the key shape into a variable for easy access

• Finally, depending how Florisboard infers undefined properties, I wonder if properties such as the various smartbar's row colors could be removed to make the default theme more manageable.

Smartbar

• I'm not very satisfied by the fact we're forced to style the buttons on different rows (as well as the toggle for these rows) separately - see smartbar action button vs smartbar key. I think an approach similar to the keyboard keys would be more appropriate, with one generic property affecting all smartbar keys (except word candidates, obviously), but optional selectors and keycodes allowing to freely match specific rows and keys.

---

Apart from this, the editor is very flexible and pleasant to use. Nice job !

Here's a quick analysis of the usage of variables in Florisboard's default theme

[patrickgold]

I have now reworked them default themes quite a bit in terms of variables usage and came to the following results:

• --on-primary and --on-secondary have been removed, but would still be translated if manually re-added by a user (if someone wants to implement these Material Design colors in their own theme)
• Added --on-surface-variant. Color usages slightly differentiate from your theme, but in general I halved the remaining fixed colors and improved/corrected color variable usage.
• Added --shape and --shape-variant. The former is for keys, key popups and Smartbar keys, the latter for all rounded stuff in clipboard history. The Smartbar clip candidate has its own directly defined shape, this will not change in the default theme.
• Added generic circle() shape, which replaces all `rounded-corner(50%,...) shapes.

Other changes thus far based on your feedback:

• The level selection icon has been replaced by a tune symbol, when pressing this a dialog shows up with all fine tune settings regarding editing related stuff. In here the level is choosable, as well as an option to modify color string appearance (hex vs rgba, where hex is the default now).
• Var names are now translated in basic and advanced in the secondary line within a rule set.

If you want you can try out the debug artifact (will not alter your current installation) of #1538 and give a short feedback of the changes thus far.

[patrickgold]

I'm also starting to think it could be very interesting to be able to use a slightly lightened / darkened version of variables for coloring items (thus alleviating the need for color variants), but I think I'm getting really off-scope there smile

Yes this would be quite off-scope xD. For now I am concentrating on getting the existing fixed up and also add some other theme-related properties (border, elevation, ...). But someday in the future I may be coming back on this idea.

[Lurux]

Will try that !

(edit: not sure how, though ?)

[patrickgold]

https://github.com/florisboard/florisboard/pull/1538/checks Then Artifacts > app-debug.apk

You need to be signed in on the browser you are viewing the link else it won't work though (GitHub restriction)

[Lurux]

LMAO

I've been searching on this page for 5 minutes and didn't see the button 😆

[GoRaN909]

Thank you for new theme screen editor i like it it's great i have 2 suggestion for you

1- Can you add custom background image for the keyboard user use there images as background,
2- Let users use custom font .ttf or .otf file for the characters on the keyboard view.

[Humorist2601]

Custom fonts would be awesome.

[hegocre]

Hi. I used the theme editor to create my own theme, and apart from the ideas already suggested, it would be nice to have some sort of reference to know what KeyCode each key has, like maybe showing it on the popup while on the editor screen, or a table with the info.

Thanks!

[Krusty27]

Yes I also thought of something similar and I'd add another thing: some explanation of the variables. It could be a short sentence or, even better, a photo of the object the user is modifying.

[BrudiBanani]

A key code reference sheet is linked when pressing on add code.

@patrickgold
But in my opinion atleast basic and maybe also the advanced modes should map the keycode to the according keys. So most users actually will be able to see which key they are editing.

As additional proposal it would be neat if it would be possible to add key codes by actually pressing on the keys on the keyboard when you are in the add code menu:)

[Humorist2601]

The new theme editor is awesome, quite OP indeed. I made a material you styled theme by selecting specific keys to accent and specific keys to make round. I think this is the only keyboard on the market with this good of a theme editor so awesome work dude

Edit 1: Cannot theme the following "Enable Clipboard History" button

Screenshots

Edit 2: Also include an easy way to export a theme, right now you have to go to advance settings, export data to zip archive, select the .flux theme from the archive and then import it.

[patrickgold]

Great to hear you like the theme editor!

Edit 1: Cannot theme the following "Enable Clipboard History" button

That's true, it is currently not styleable at all

Edit 2: Also include an easy way to export a theme, right now you have to go to advance settings, export data to zip archive, select the .flux theme from the archive and then import it.

You can just click on the theme name either in the theme manage or theme select screen and then use the export button.

[Humorist2601]

Tapping on the theme name does nothing, but tapping on "My Themes" or "local.themes..." brings the view up

Green brings theme export menu, red doesnt

Screenshots

Edit: I think it must be related to the above but the radio buttons on the "Manage installed themes" view currently serve no purpose

Screenshots

[suhan-paradkar]

Well.... @patrickgold ... I think that we need to move Create theme extension and Import options to the main Theme sections instead of keeping inside Manage Installed themes, which is kinda ironic..... It took me some time to figure out how to create a new theme as the Create new theme Extension option was inside Manage Installed Themes section

Screenshots

Overall, I feel the new theme editor is much better... Kudos on that...

[patrickgold]

Tapping on the theme name does nothing, but tapping on "My Themes" or "local.themes..." brings the view up

My bad, I meant to tap on the extension name

I think that we need to move Create theme extension and Import options to the main Theme sections instead of keeping inside Manage Installed themes

If I do that the manage themes screen becomes totally useless, meaning I need to rethink the theme selection/import/create design. But I agree, it is confusing, so I will see with what new layout I will come up for this.

[Lurux]

@patrickgold, maybe just rephrase "manage installed themes" to "manage and customize themes" ?

Also I agree the export button is particularly hard to find, because the extension name doesn't look like something clickable. The option should be at the top of the "edit extension" screen.

[Glitchy-Tozier]

@patrickgold Have we talked about random colours yet? It would be neat to have "random" as a color-option, meaning that each time the element would show up on the screen, a new random color would be assigned to it.

For example,

• the enter-key could choose it's color once every time the keyboard was opened/loaded.
• Every new pop-up would have a different color
• etc

I understand that this might be difficult.

An easier alternative would be to only add the random-color-option to the glide typing trail. In this case, every new glide-trail (=every new word) would have itsown color.

[patrickgold]

That's an interesting proposal, never heard or thought of this idea yet. From a technical side I see a problem that the UI elements pull its visual properties from a compiled stylesheet. Compiled means it is fully immutable and if I want to change the color (due to randomness) I either have to add a wonky variables system for all color property usages (which I am not a fan of) or I re-compile the stylesheet on window open (which is performance wise not ideal).

Generally this idea is cool though, so in the future I am open to try to find a solution using seeds and salts, this way I can minimize object re-allocation for color re-computation I think. This is currently low-priority for me though as there are some other more fundamental things in themes to fix atm.

[nift4]

I wondered how do you think about allowing replacing icons with svg files?

[bege10]

Crash when saving an edited new style

#### Environment information
- FlorisBoard Version: 0.3.14-beta09 (65)
- Device: Fairphone FP3
- Android: 10 (cn=Q sdk=29)

#### Features enabled
```kt
smartbar = true
suggestions = false
suggestions_clipboard = true
suggestions_next_word = true
glide = false
clipboard_internal = false
clipboard_history = true

Attached stacktrace files

1644266740700.stacktrace

java.lang.IllegalStateException: Check failed.
	at dev.patrickgold.florisboard.snygg.value.SnyggStringValueSpec.pack-RQoFFkw(SnyggValueSpec.kt:121)
	at dev.patrickgold.florisboard.snygg.value.SnyggFunctionValueSpec.pack-RQoFFkw(SnyggValueSpec.kt:142)
	at dev.patrickgold.florisboard.snygg.value.SnyggDefinedVarValue$Companion.serialize-IoAF18A(SnyggVarValue.kt:35)
	at dev.patrickgold.florisboard.snygg.SnyggStylesheetSerializer.serialize(SnyggStylesheet.kt:259)
	at dev.patrickgold.florisboard.snygg.SnyggStylesheetSerializer.serialize(SnyggStylesheet.kt:250)
	at kotlinx.serialization.json.internal.StreamingJsonEncoder.encodeSerializableValue(StreamingJsonEncoder.kt:219)
	at kotlinx.serialization.json.Json.encodeToString(Json.kt:85)
	at dev.patrickgold.florisboard.app.ui.ext.ExtensionEditScreenKt$EditScreen$1.invoke$handleSave(ExtensionEditScreen.kt:930)
	at dev.patrickgold.florisboard.app.ui.ext.ExtensionEditScreenKt$EditScreen$1.access$invoke$handleSave(ExtensionEditScreen.kt:225)
	at dev.patrickgold.florisboard.app.ui.ext.ExtensionEditScreenKt$EditScreen$1$2$1$2.invoke(ExtensionEditScreen.kt:313)
	at dev.patrickgold.florisboard.app.ui.ext.ExtensionEditScreenKt$EditScreen$1$2$1$2.invoke(ExtensionEditScreen.kt:312)
	at androidx.compose.foundation.ClickableKt$clickable$4$gesture$1$2.invoke-k-4lQ0M(Clickable.kt:153)
	at androidx.compose.foundation.ClickableKt$clickable$4$gesture$1$2.invoke(Clickable.kt:142)
	at androidx.compose.foundation.gestures.TapGestureDetectorKt$detectTapAndPress$2$1$1.invokeSuspend(TapGestureDetector.kt:223)
	at kotlin.coroutines.jvm.internal.BaseContinuationImpl.resumeWith(ContinuationImpl.kt:33)
	at kotlinx.coroutines.DispatchedTaskKt.resume(DispatchedTask.kt:178)
	at kotlinx.coroutines.DispatchedTaskKt.dispatch(DispatchedTask.kt:166)
	at kotlinx.coroutines.CancellableContinuationImpl.dispatchResume(CancellableContinuationImpl.kt:397)
	at kotlinx.coroutines.CancellableContinuationImpl.resumeImpl(CancellableContinuationImpl.kt:431)
	at kotlinx.coroutines.CancellableContinuationImpl.resumeImpl$default(CancellableContinuationImpl.kt:420)
	at kotlinx.coroutines.CancellableContinuationImpl.resumeWith(CancellableContinuationImpl.kt:328)
	at androidx.compose.ui.input.pointer.SuspendingPointerInputFilter$PointerEventHandlerCoroutine.offerPointerEvent(SuspendingPointerInputFilter.kt:511)
	at androidx.compose.ui.input.pointer.SuspendingPointerInputFilter.dispatchPointerEvent(SuspendingPointerInputFilter.kt:406)
	at androidx.compose.ui.input.pointer.SuspendingPointerInputFilter.onPointerEvent-H0pRuoY(SuspendingPointerInputFilter.kt:419)
	at androidx.compose.ui.input.pointer.Node.dispatchMainEventPass(HitPathTracker.kt:310)
	at androidx.compose.ui.input.pointer.Node.dispatchMainEventPass(HitPathTracker.kt:297)
	at androidx.compose.ui.input.pointer.Node.dispatchMainEventPass(HitPathTracker.kt:297)
	at androidx.compose.ui.input.pointer.Node.dispatchMainEventPass(HitPathTracker.kt:297)
	at androidx.compose.ui.input.pointer.Node.dispatchMainEventPass(HitPathTracker.kt:297)
	at androidx.compose.ui.input.pointer.NodeParent.dispatchMainEventPass(HitPathTracker.kt:179)
	at androidx.compose.ui.input.pointer.HitPathTracker.dispatchChanges(HitPathTracker.kt:98)
	at androidx.compose.ui.input.pointer.PointerInputEventProcessor.process-BIzXfog(PointerInputEventProcessor.kt:80)
	at androidx.compose.ui.platform.AndroidComposeView.sendMotionEvent-8iAsVTc(AndroidComposeView.android.kt:1159)
	at androidx.compose.ui.platform.AndroidComposeView.handleMotionEvent-8iAsVTc(AndroidComposeView.android.kt:1109)
	at androidx.compose.ui.platform.AndroidComposeView.dispatchTouchEvent(AndroidComposeView.android.kt:1059)
	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2755)
	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2755)
	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2755)
	at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:3060)
	at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2755)
	at com.android.internal.policy.DecorView.superDispatchTouchEvent(DecorView.java:465)
	at com.android.internal.policy.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1849)
	at android.app.Activity.dispatchTouchEvent(Activity.java:4011)
	at com.android.internal.policy.DecorView.dispatchTouchEvent(DecorView.java:423)
	at android.view.View.dispatchPointerEvent(View.java:14212)
	at android.view.ViewRootImpl$ViewPostImeInputStage.processPointerEvent(ViewRootImpl.java:5649)
	at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:5452)
	at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4955)
	at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:5008)
	at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4974)
	at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:5114)
	at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4982)
	at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:5171)
	at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4955)
	at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:5008)
	at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:4974)
	at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:4982)
	at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:4955)
	at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:7672)
	at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:7641)
	at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:7602)
	at android.view.ViewRootImpl$WindowInputEventReceiver.onInputEvent(ViewRootImpl.java:7797)
	at android.view.InputEventReceiver.dispatchInputEvent(InputEventReceiver.java:188)
	at android.os.MessageQueue.nativePollOnce(Native Method)
	at android.os.MessageQueue.next(MessageQueue.java:336)
	at android.os.Looper.loop(Looper.java:174)
	at android.app.ActivityThread.main(ActivityThread.java:7356)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:491)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:940)

[patrickgold]

You seem to have added a variable which contained invalid characters, which in turn caused this validation crash during the stylesheet json build process. I've now restricted the input and added an appropriate error message, which will be included in the hotfix release 0.3.14-beta11 today.

[lawson85]

It is fantastic that i can customise to such an extent! I would like to be able to change the height/width of keys individually. I would like to see customisation on key long press shortxuts. For example, I am used to having the question mark under long press of the M key. Is it possible to customise smart bar tools? I also can't seem to colour the backspace key. I am so glad that this theme editor is a thing though, I am making FlorisBoard look like Multiling

[patrickgold]

It is fantastic that i can customise to such an extent!

Great to hear you like the new theme editor!

I would like to be able to change the height/width of keys individually.

That'd be an interesting idea, but currently don't know how or if this will be implemented.

I also can't seem to colour the backspace key

The backspace key is the delete key, so it has code -7 according to the internal keycodes list (question mark in the add/edit code dialog)

[jm355]

Would it be possible to implement a barebones emoji view while we wait on a more complete rework? It's a huge hassle switching to another keyboard just to type a couple of emojis, especially since for some conversations I use a lot of emojis

[patrickgold]

Yes this is my plan, because I cannot simply remove the emoji view in 0.3.14

[min7-i]

The new theme editor and the customizability it offers is great!

Here are a few things I noticed while testing it.

Meta data of bundle

• Homepage & Issue Tracker fields: I entered a URL like www.google.com which was saved, but wasn't visible in the meta data view. I had to add https:// to make it display the link correctly.

screenshots

• Multi-value fields like tags & maintainers: to me it wasn't clear that the separator for multiple values is just a new line. I first tried space and comma 😅 Maybe it's just me, but it might be helpful to add a note how values are separated.
• In the default theme you can tap on the maintainer's name which shows an email address. I wasn't able to do this for a custom theme. While I'm not sure if this is really needed as there are options to add a homepage and issue tracker I just noticed this difference between default and custom themes and wanted to share it.

screenshot

Others

• I wondered why there are radio buttons for the different themes in the "manage installed themes" view. Will this be used for a feature in a future release?
• In the "edit theme component" view I found it more cumbersome than helpful that the keyboard always pops up after making a change. I would prefer if it kept the state it was in before making an edit.

Edit - color preview

One more thing I want to add: if a color for a property is set to be fully transparent, it is previewed as solid white instead.

Example:
The default background color of the clipboard header is fully transparent. In the overview the color is shown as solid white. Only when editing the background property it becomes obvious that the color is fully transparent.

screenshots

Although some users might directly look at the rgba or hexadecimal value instead of the visual preview, I think it might help - especially more inexperiended users - to also visually indicate the transparency, e.g. by using the checkerboard background when the color is fully transparent.

[patrickgold]

Thanks for your feedback, really appreciate it!

PR #1569 is my current working branch and contains a lot of fixes and small improvements.

Two changes are already based on your feedback:

1. URLs without the http:// or https:// prefix now work perfectly fine, so this should not be an issue anymore.
2. Within the editor the keyboard now only auto-opens after closing dialogs when it was open before opening it. This is configurable however by clicking on the "Fine tune" symbol top-right within the editor. Available options are Remember last state (default), Always show and Never show, so every user can configure this to their likings.

Multi-value fields like tags & maintainers: to me it wasn't clear that the separator for multiple values is just a new line. I first tried space and comma sweat_smile Maybe it's just me, but it might be helpful to add a note how values are separated.

What would be the minimum sufficient note that new line is required in your opinion? I am trying to minimize the text displayed and thought maybe adding a new line symbol besides the label could work, but not sure if everyone thinks of that.

In the default theme you can tap on the maintainer's name which shows an email address. I wasn't able to do this for a custom theme. While I'm not sure if this is really needed as there are options to add a homepage and issue tracker I just noticed this difference between default and custom themes and wanted to share it.

You are able to do this for custom themes as well, the doc string of extension maintainer explains the format:

florisboard/app/src/main/java/dev/patrickgold/florisboard/res/ext/ExtensionMeta.kt

Lines 84 to 97 in b5b8283

	/**
	* A list of maintainers who (actively) worked on putting the content together for this extension. Note that
	* the actual author of each file within the extension (theme, layout, e.g.) may be different and is specified
	* in the file meta itself.
	*
	* Format: `Your Name <email@address.com> (www.maintainer.com)`
	* - Name is required
	* - Email is optional, if included must be within the `<` and `>` symbols
	* - URL is optional, if included must be within the `(` and `)` symbols
	*
	* Order of the above fields is important for parsing.
	*/
	@JsonNames("authors")
	val maintainers: List<ExtensionMaintainer>,

I wondered why there are radio buttons for the different themes in the "manage installed themes" view. Will this be used for a feature in a future release?

Yes and no. It was actually in use in a debug version, but all public versions of that screen don't utilize the radio buttons atm. It is not yet decided if this screen even stays, because some users suggested merging the selection and managing screens into one, and I also have some ideas on how to rework the selection process for themes. Should the screen live like it does in the future I will either remove the radio buttons or give them a proper use.

One more thing I want to add: if a color for a property is set to be fully transparent, it is previewed as solid white instead.

Yes I know, this is because drawing the checkerboard is quite annoying (code and technical wise) and thus it is currently only drawn within the color picker itself. I agree that this should be added though and will address this before 0.3.14 stable.

[min7-i]

Thanks for already considering three of the topics in beta 12. I tested all of them successfully.

multi-value fields

What would be the minimum sufficient note that new line is required in your opinion? I am trying to minimize the text displayed and thought maybe adding a new line symbol besides the label could work, but not sure if everyone thinks of that.

I agree, reducing the amount of text is a good idea. I'm not sure if a symbol behind the label would help. The shortest note in the label I could come up with would be "label (separate by new line)" or "label (separator: new line)". But honestly I don't really like the idea of adding the note to the label.

What about using a helper text for those input fields? Like this one:

Then the note would only be displayed when the field is active and one could use a proper sentence, e.g. "Use new lines to enter multiple values." / "Enter additional values on new lines.".

maintainer's email

You are able to do this for custom themes as well, the doc string of extension maintainer explains the format

Thanks for the tip. When using the correct format it did work.

[imDusht]

How to theme hinted symbols & number row, i can't find a way to do this.

[DaRandomCube]

How about posting our themes here?

[TheLastZombie]

Just updated to 0.3.14, looks good so far!

One idea: Maybe there could be a custom URL scheme (e.g. fbtheme://) that the app could then intercept and display in a kind of preview activity with an import button. Or, to take this even further, a website instead of a scheme that, when opened in the browser (at which point we can assume that FlorisBoard isn't installed), displays a preview and download buttons for both FlorisBoard and the theme itself. (I could work on the web part if desired.)

[shary998]

can someone please tell me from where I can change the color of specific button like spacebar?

[patrickgold]

One idea: Maybe there could be a custom URL scheme (e.g. fbtheme://) that the app could then intercept and display in a kind of preview activity with an import button. Or, to take this even further, a website instead of a scheme that, when opened in the browser (at which point we can assume that FlorisBoard isn't installed), displays a preview and download buttons for both FlorisBoard and the theme itself. (I could work on the web part if desired.)

That's the ultimate goal for the community repo, having the theme store as a web site and then make the installation process as easy as possible. As FlorisBoard probably won't have Internet permission this means I need to let the browser do the downloading part, then when the user clicks on open the file is opened within FlorisBoard and ready for install. Lots of ideas but absolutely nothing sure yet, there are still a lot of other things (including word suggestions to fix first.

[patrickgold]

can someone please tell me from where I can change the color of specific button like spacebar?

Add a background attribute to a key rule with the code 32. If you copied from the default themes, then this rule will already exist.

[lunaneff]

This may be something that LineageOS has added to Android, but there's an option to change the accent color in some parts of the system UI. It would be great to have a way to make FlorisBoard respect this option.

[patrickgold]

Yes this is a LineageOS only. Hard to integrate such a niche case into the theme system, but maybe with dynamic Material You added in the future there is the necessary API to include this ROM-dependent functionality as well.

[stpnwf]

Maybe some of the things have already been mentioned, but here are my suggestions/thoughts after just updating to 3.14 via F-Droid:

Basic mode suggestion:

Have more preinstalled themes. Borderless, different shapes, etc. So that users choose the template they like the most and just change the colors to their liking.
I also believe it would be very useful for "basic" users to have the name of the keys that are being edited be displayed instead of codes. So have Space bar, Enter button, A-Z, Numbers, etc. Well, at least on the included themes (since most users will just edit those rather than create from scratch). If this is hard to do, a workaround could be a "comment property" that is added on the pre included themes with that info.

Hard to create a new theme.

To me the steps to create a new theme was very confusing. Things like "Create Theme Extension" seemed very unfriendly to me. It took me what felt like forever to discover that I had to click on the little "+" next to "Bundled themes" to actually create a theme.
Maybe this is a clever way to do things (having different containers (?)), but from an end user's point of view it seems very unintuitive. Again, there are only two themes that come preinstalled and most users will want to make some sort of customization to them. I think the current UX has too many steps to do something, I think, most users will want to do.

Theme name

Also imo, the name (Label) of the theme should be displayed under "Selected theme" instead of the long name that is currently displayed. Makes it much easier to determine if you have the right theme selected, which I think is more relevant to the majority of users. Maybe the long name can be displayed if developer mode is selected under "Editing level"? But personally I don't care for it.

Export theme

How can I export a theme? I have Florisboard on my Work profile as well and I would love to export the theme I just created to use there, instead of having to create it all over, but I can't seem to find it. Is it possible to export? I couldn't find how to do it.
Just saw your reply in Discussion 1635, guess I will have to wait until it is included in the next stable.

Edit button dimensions - unsure if this should be an issue instead

I would like to be able to edit the height of the space bar and the enter button. I was unable to do it in the advanced mode (can this be done?). As a workaround I added a border to them and set it the color of the keyboard background as shown below. However this solution doesn't work perfectly as there is a glitch with the outline. Can also be seen in the space bar, but much harder due to it being a darker color.

[patrickgold]

Thanks for your detailed feedback! WIll now try to respond to some of the most important points you talk about.

Have more preinstalled themes. Borderless, different shapes, etc. So that users choose the template they like the most and just change the colors to their liking.

This is true and in 0.3.13 there where more themes. See #1702, I will soon re-add additional core themes for selection, with this also borderless themes.

I also believe it would be very useful for "basic" users to have the name of the keys that are being edited be displayed instead of codes. So have Space bar, Enter button, A-Z, Numbers, etc.

0.3.15-beta02 fixed this issue, the preview of the key and the key name+type is shown above the code now. Additionally you can record a key press within the code dialog so you don't need to manually write the code anymore. Is part of 0.3.15-beta02 and will soon be in 0.3.15 stable.

To me the steps to create a new theme was very confusing. Things like "Create Theme Extension" seemed very unfriendly to me.

To an extend I agree but I haven't really found a better UI for this yet, especially because creating a theme without an extension is impossible, so the first step is the extension container (one extension can then house multiple themes however).

Just saw your reply in Discussion 1635, guess I will have to wait until it is included in the next stable.

You can export in the current stable, either by using the backup tool or by clicking on the extension name. I just need to make it more discoverable but it is already implemented in 0.3.14.

I would like to be able to edit the height of the space bar and the enter button. I was unable to do it in the advanced mode (can this be done?).

Nope individual key height adjustment is not available atm, maybe I can add it, not sure yet when and how though.

[stpnwf]

0.3.15-beta02 fixed this issue, the preview of the key and the key name+type is shown above the code now. Additionally you can record a key press within the code dialog so you don't need to manually write the code anymore. Is part of 0.3.15-beta02 and will soon be in 0.3.15 stable.

Amazing!

Nope individual key height adjustment is not available atm, maybe I can add it, not sure yet when and how though.

No worries, I found a work around, but it would be nice if changing the color of the border didn't miss some pixels.

You can export in the current stable, either by using the backup tool or by clicking on the extension name. I just need to make it more discoverable but it is already implemented in 0.3.14.

Awesome, completely missed this, will give it a try.

To an extend I agree but I haven't really found a better UI for this yet, especially because creating a theme without an extension is impossible, so the first step is the extension container (one extension can then house multiple themes however).

If you are open to suggestions, this is a mock up with some of mine:

1. Button to create new theme, upon clicking user is shown a dialog with the options to 1. "Create new theme" in My themes or 2. "Create a new theme container" (personally I think the word container is more self-explanatory than extension). The container "My themes" should already exist, so users can create a theme as soon as they install the app. If and when a user has more than one container, then there should be an option in the "Create theme" dialog to choose a container for them to be created in.
2. Add an Export button where upon clicking, user is shown a dialog with the options to: 1. "Export individual theme(s)" or 2. "Export an entire container".
3. Add an info or pencil icon, that indicates that there is more to a container.
   Further, in the Container Screen, the current Export button, could be replaced by an "Edit" button instead, where users can Manage metadata, dependencies and archive files of the Extension/container. Essentially part of the current "Edit theme extension" dialog be moved here. Moving container stuff to this area imo, makes things simpler.
4. The Delete and Edit buttons should only show up when a Theme is selected, and they should apply to the theme selected, not the container. So delete deletes the theme and edit edits the theme, no need for an extra screen.
   Further because now selecting a Theme allows users to Edit/Delete it, and because the core themes can't be edited/deleted, then those should not be able to be selected imo.

This makes it one less "screen" between users and editing a theme, and is more intuitive imo, as it buries container stuff into its own area, and theme stuff is given priority, as users would expect. Also,I am not sure why, currently, users can select themes, when that doesn't seem to lead into anything else. This confused me at first because I expected something to happen, once nothing did, I assumed, erroneously, I was choosing the applied keyboard theme. This behavior takes care of that.

Also, if/once more core themes are added, I would propose that user-made containers come first, and the Floris one be last. Since it is more likely that users will want to manage their themes, given they can't "manage" much in the Floris container.

[victorbnl]

The new theme engine seems nice! Borderless themes should be included again

[patrickgold]

Latest stable release 0.3.15 has borderless themes included again :)

[victorbnl]

Okay thanks!

[bege10]

The icons of the primary smartbar are much smaller than those in secondary. I need them on both bars as on secondary.
smartbar-key font-size only affects secondary smartbar.

[victorbnl]

See #1781

[D3SOX]

I would appreciate a simple method to change just the accent color.
For example, I want the Floris Pure Night theme, just with a purple accent.

Furthermore, a mode where it picks the system accent color like with Lawnchair would be nice

[bege10]

Please, add font-weight as option for key.

[magnus-ISU]

Adding local themes is broken on the newest beta.

I thought I was going crazy until I decided to download stable and try it

Android 12, Pixel 6 Pro

[patrickgold]

Can you provide further information where the creation fails? I just tried it locally and had no issues.

[magnus-ISU]

Yes. I was able to open the themes page but after hitting save it would take me to the previous page as if nothing had happened.

However, I just tried opening it again and it now has six new themes, which were the six times I tried to create a new theme in the beta unsure if I was doing something wrong.

Additionally, making a new theme it popped up immediately.

So, no idea what went wrong or how to reproduce it. Don't wprry about it

[corniest]

This also happens to me. The themes seem to get deleted after restart as well. Very annoying

[ssssamstrup]

Just made a theme that fits my device theme and wanted to say that the editor is great! Didn't have any struggles understanding how it worked. Good job Patrick!
Looking forward to new releases making Florisboard even better. :)

[atikattar1104]

I Actually Was About To Create An Issue For This Feature Request, But Thankfully I Found This Discussion. My Feature Request Is :- To Add Shadow Coloring Option In Editor. This Way, It Would Feel Like Having Neon Lights On Cars.
Thanks!

[tsiflimagas]

#1547

[Megadash452]

hello, is there any plans to allow images as property values for themes?

For example have a --background variable , select property type "Image", bring up the Android file picker for the user to select an image from their device, crop the image, and save it in the app's local storage (idk if that's how it works on android?). Also when a property has type "Image", it could have additional properties within its own property for filtering and sizing options similar to CSS.

I've looked at the theme stylesheets and an image could be an object with a path (?) and some options:

{
  "@defines": {
    "--background": {
      "path": "/app/florisboard/user-images/...",
      "size": "cover", // See https://www.w3schools.com/cssref/css3_pr_background-size.php
      "repeat": "false",
      // blur, opacity, saturate, ..., See https://www.w3schools.com/cssref/css3_pr_filter.php
    },
  },

  "keyboard": {
    "background": "var(--background)"
  },
}

[RokeJulianLockhart]

I really need Material 3/You support, since I've no desire for a custom appearance – I just want the keyboard to be visually consistent with the rest of the OS.

[Jiffy15]

I'm trying to install custom themes(gboard-ish) but it always gives me this output. Any method of resolving this? P.s.: I'm using the debug version provided in the github page of gboard-ish

[itsmartashub]

Hi there. Given that Material You is now officially implemented in Florisboard starting from version v0.4.0-alpha05, there is no longer a need to use that temporarly debug version.

If you still wish to try Gboardish, I would kindly ask you to carefully read the floristyle README, specifically the "Version Recommendation" and "Known Issues" sections.

PS. please make sure to create a Florisboard backup beforehand to avoid losing your current settings.

[Ansarmughal99]

Material you is not present in florisboard 0.4.0 beta 1

[lm41]

Yes it is, but the app uses jetpref and the jetpref ui has no material you/material 3 yet. The material you support is therefore only available in the keyboard itself

[Ansarmughal99]

Yes got it. It has to be manually imported. I was thinking it is pre installed with 0.4.0 beta 1 .
Hope to see it in a stable version with pre installed all the material you Themes.