What is layout: dark supposed to do?

[tiptronic]

What is the 'layout' key supposed to do?
I tried default, white, dark, but couldn't detect any change (no matter if theme is ios, material or something else).

[scriptPilot]

Find here more details:
https://github.com/scriptPilot/app-framework/blob/master/docs/application-style.md

[tiptronic]

I was referring to the setting, which basically does nothing if set in the config file.

The problem seems, that currently documentation and code are out-of-sync - so better to have a look at it, when everything is on v2.

[scriptPilot]

@tiptronic , I updated the documentation links all over in App Framework7 docs.

Does this helps you?
http://v1.framework7.io/docs/color-themes.html

[tiptronic]

@scriptPilot No - it doesn't really help, but I understand what it is supposed to do ;).
The reason is: some/most options in the config file included in app-framework don't do anything in the sample app (kitchensink), because they're overwritten by kitchensink obviously...

[scriptPilot]

Ah, year the kitchen sink has some additional CSS.
But if you use a clean installation, it should work.
Please let me know :-)

[ehausen]

I installed a clean app according to instructions and tried to edit the config.json.
Changing from
"layout": "default", -->"layout": "dark",
has no effect

[tiptronic]

@ehausen If you tried with kitchen-sink, you tapped into the same issue... the config is overwritten by kitchen-sink. I guess when starting a fresh project it works

[ehausen]

The documentation, v1 and
http://framework7.io/docs/color-themes.html

say that it should be
<div class="page theme-dark">
but it does not work

this works:
<div class="page" layout="dark">

[ehausen]

@tiptronic I didn't try with the kitchen sink. I created a new project according to the instructions. The new project only has home.vue page by default.

[ehausen]

Solved!

The values are stored quite persistently in browser local storage.

To clear (in Google Chrome or similar) you can:

• Right click.. Inspect --> Opens dev tools
• Click "Application" Tab
• Select Storage > Local Storage > localhost:8080
• Find icon that looks like forbidden sign (clear all) and click it to clear values

[scriptPilot]

Explanations for upcoming Framework7 / App Framework 3 here:
https://framework7.io/vue/colors.html