This is actually a non-trivial task. Those options are setup as an f7 action sheet, which means that they are one of the f7 modal types. The reason this impacts you is that the f7 modals are rendered in a portion of the page that is out of the scope of the widget custom css so you can’t really impact their styling directly. There also aren’t any options that I’m aware of that the user can set.
Pretty much the only way to get custom colors on that would be to build your own version in the widget. Here’s a sample that simulates the basic oh action sheet but with oh-link components that could have whatever oh action you want to set.
uid: actions_demo
props:
parameterGroups: []
parameters: []
tags: []
component: oh-card
config:
title: Custom Action Sheet
slots:
content:
- component: oh-button
config:
text: Custom options
actionsOpen: .demo-actions
- component: f7-actions
config:
class:
- demo-actions
slots:
default:
- component: f7-actions-group
slots:
default:
- component: oh-link
config:
class:
- actions-button
- color-blue
slots:
default:
- component: Label
config:
class:
- actions-button-text
text: Option 1
- component: oh-link
config:
class:
- actions-button
- color-blue
slots:
default:
- component: Label
config:
class:
- actions-button-text
text: Option 2
- component: f7-actions-group
slots:
default:
- component: oh-link
config:
actionsClose: .demo-actions
class:
- actions-button
- color-red
slots:
default:
- component: Label
config:
class:
- actions-button-text
text: Cancel
Clicking on the Custom options button opens an actions sheet that looks like this:
Add on to that the fact that the repeater does have an itemCommandOptions property that means you could loop through preset options for a supplied item to produce the buttons. That way you have a complete replica of the oh built-in options sheet but you now can control the color and whatever other style you want.