Creating multiple radio buttons for color themes

sebastian_afadzie · June 4, 2022, 7:13pm

for example there are 5 color themes of which they can choose from via a radio button

Red
Blue
Orange
Green
Yellow

After they choose one of them, can also choose fill or empty

Fill
Empty

and also choose between light and dark

Light
Dark

i have created some color-themes in the root but the problem is how to use radio bottoms to let it take effect.

deejay · June 5, 2022, 11:41am

github.com

framework7io/framework7/blob/master/kitchen-sink/vue/src/pages/color-themes.vue

<template>
  <f7-page>
    <f7-navbar large title="Color Themes" back-link="Back"></f7-navbar>
    <f7-block-title medium>Layout Themes</f7-block-title>
    <f7-block strong>
      <p>Framework7 comes with 2 main layout themes: Light (default) and Dark:</p>
      <f7-row>
        <f7-col
          width="50"
          class="bg-color-white demo-theme-picker"
          @click="setLayoutTheme('light')"
        >
          <f7-checkbox v-if="theme === 'light'" checked disabled />
        </f7-col>
        <f7-col width="50" class="bg-color-black demo-theme-picker" @click="setLayoutTheme('dark')">
          <f7-checkbox v-if="theme === 'dark'" checked disabled />
        </f7-col>
      </f7-row>
    </f7-block>
    <f7-block-title medium>Navigation Bars Style</f7-block-title>

This file has been truncated. show original

sebastian_afadzie · June 7, 2022, 4:08am

i have tried but the colors are not working. i have even copied the original code from github. The light and dark check boxes and the color are not working. it is only the color picker which is working.

deejay · June 7, 2022, 12:28pm

here => laughing-mclaren-zyze31 - CodeSandbox

sebastian_afadzie · June 8, 2022, 12:56am

Thank you very much. This is exactly what i am looking for.

sebastian_afadzie · June 8, 2022, 1:07pm

There is one other problem.
i know i can set a custom theme but i want to customize the default light and dark theme or create additional theme with it own name and add it to the default themes.
how do i do that?