zeruniverse/Password-Manager

Adding theme or background page

Closed this issue · 10 comments

tusharjambhekar commented

Hi,
I would like to have themes or fixed customized background image for every page.
Which can be a good idea when night time user can have light-theme with the background image.

How can this is possible at setting tab or somewhere else?

Thanks,

BenjaminHae commented

This is not implemented by default. Doing this is not trivial either.
Implementing it globally is possible by changing the CSS stylesheets. But per user with settings requires some dynamic generation of styles.
If you are interested in doing this yourself, I'd be glad to give you further guidance.

tusharjambhekar commented

Hi,
Yes I would like to do, I am not just learner.If dynamic generation for all user is possible via css would be gud.
I am interested & would like to learn too.

thanks,

BenjaminHae commented

Alright so let's get started.
For creating the theme stylesheet you have two options:
Create a .css file and load it everytime (whether or not the user wants the theme or not), you have to load it in src/function/basic.php.
Or do the style via javascript: (https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule) - for this see below when I explain the javascript plugins.

All your css rules should only apply for elements under the <body> tag and only if the body tag has the class themeDark (or any other name that starts with theme).
So users could choose to use your theme by applying the themeDark class to the body tag.

You then need to create a plugin. This plugin needs to check what theme the user has chosen, please take a look at the other plugins.

registerPlugin("preferencesLoaded",function(data){
    if (data["theme"] == "themeDARK") {
        // here apply theme
    }
});

Within this block either add the themeDark class to body, or insert the rules via javascript as described at the top.
The method preferencesLoaded is not yet implemented. I will do this if your plugin is in a state where we can see it will work.
For testing you can invoke callPlugins("preferencesLoaded",{"theme":"themeDark"}) in your browsers developer console.

I think that's a good starting point. If something is unclear or you need more specific information, please ask, I'm glad to help.

tusharjambhekar commented

Can I create like this simple css file called as style.css & call it at src/function/basic.php

body{
background-color: #FFFFFF;
}

#box{
position: absolute;
background-color: #0000FF;
border-radius: 15px;
top: 100px;
width: 400px;
height: 300px;
left: 60px;
line-height: 18px;
padding-left: 15px;
padding-right: 12px;
}

BenjaminHae commented
tusharjambhekar commented

Yes. I do agree from this user unable to choose the themes.
For theme, I think I have to create the plugins right.

zeruniverse commented
zeruniverse commented
BenjaminHae commented

@tusharjambhekar If you want the user to choose you have to implement the plugin. Then it's easier to implement the styles in separate files (probably called themeX.css) or directly in the plugin.

zeruniverse commented

closed. If @tusharjambhekar finished this feature, you may submit a pull request.