Theme colors - How To?

CatalinCernat

created 2 years ago

Hi, Support Team!

I was trying to follow your example here: https://surveyjs.io/form-library/examples/custom-theme/jquery#content-code to change some text colors, button colors, etc, but to no avail. Theme = modern.

What did I do wrong?

My survey.js file looks something like this (called from Blazor ):

JavaScript
Survey.StylesManager.applyTheme("modern");
var defaultThemeColors = Survey.StylesManager.ThemeColors["modern"];
defaultThemeColors["$main-color"] = "#92C14D";
defaultThemeColors["$main-hover-color"] = "#92C14D";
defaultThemeColors["$text-color"] = "#92C14D";
defaultThemeColors["$header-color"] = "#92C14D";
defaultThemeColors["$header-background-color"] = "#4a4a4a";
defaultThemeColors["$body-container-background-color"] = "#f8f8f8";
Survey.StylesManager.applyTheme();

let patientSurvey = new Survey.Model();

export function setIsDoctorValue(isDoctor) {
    patientSurvey.getQuestionByName("IsDoctor").value = isDoctor;
};

export function setPatientName(PatientName) {    
    patientSurvey.description = "Patient Name: " + PatientName;
};
export function setSurveyJsonData(JsonData, SurveyResult, objRef) {  
    patientSurvey = new Survey.Model(JsonData);  
    patientSurvey.data = JSON.parse(SurveyResult);   
    $("#surveyElement").Survey({ model: patientSurvey });
    patientSurvey.onComplete.add(function (sender) {
        objRef.invokeMethodAsync('SendJsonSurveyResult', JSON.stringify(sender.data, null, 3));
        document.querySelector('#surveyResult').textContent = "You will be redirected to your submissions page in 4 seconds...";
    });   
};

patientSurvey.onComplete.add(function (sender) {
    DotNet.invokeMethodAsync('MHU.Blazor.Public', 'SendJsonSurveyResult', JSON.stringify(sender.data, null, 3));    
});

Answers approved by surveyjs Support

Jane

created 2 years ago

Hello Catalin,
If you're using the latest Form Library version, you can override theme colors using SCSS variables, as shown in the following demo: Theme Customization.

CSS
#surveyElement {
  --main-color: #92c14d;
  --main-hover-color: #92c14d;
  --text-color: #92c14d;
  --header-color: #92c14d;
  --header-background-color: #4a4a4a;
  --body-container-background-color: #f8f8f8;
}

Example.
Also note that if you apply a single theme to your application, no need to call the applyTheme function. For more information, refer to Form Library: Themes & Styles.

Let me know if you have any questions or require further assistance.

Show previous comments (3)

CatalinCernat 2 years ago

Hi, Jane!

Thanks a lot for replying!

I have a Blazor app and this razor page:

HTML
@if (PatientId.HasValue || DoctorId.HasValue)
{
    <div id="surveyElement"></div>  
    <div id="surveyResult"></div>

}
else
{
    <div class="ftralert ftralert-warning">
        <i class="fa-solid fa-lock" style="font-size:24px;"></i>  
        You are not supposed to be here, <strong>@CurrentUser.SurName</strong>.
    </div>
}

So basically I should create a scoped scss file for this razor page in which to include those variables? As I cannot use scss in the <style> section of the razor page.

In index.html I have this in the <body> section, I suppose it is the latest forms library version:

Sorry for bothering you with this, it is a little different on Blazor and I don't know exactly where I should put those scss variables.

Clipboard-File-1.png

Jane 2 years ago

Hello,
You don't require to append another scss file for these variables. It is a regular CSS, and I believe you can include it in the style tag on your page:

Razor
<style>
#surveyElement {
  --main-color: #92c14d;
  --main-hover-color: #92c14d;
  --text-color: #92c14d;
  --header-color: #92c14d;
  --header-background-color: #4a4a4a;
  --body-container-background-color: #f8f8f8;
}
</style>

Please try this and let me know if it works.

CatalinCernat 2 years ago

Hi, Jane!

Did it. Unfortunately it doesn't work. :(

If you have any more tips / ideas, will be grateful.

Thank you very much.

Catalin

Jane 2 years ago

Hello Catalin,
I would suggest that you check to make sure that you use the proper survey HTML container name as a CSS selector. You may additionally need to reload your page with Ctrl+F5 to see the applied changes.

I attached a sample Blazor app for your reference. Please review index.html. I registered CSS variables for the #surveyElement in the <head>...<style>... section.

Index.razor
Index.html

Razor
<div id="surveyElement"></div>

HTML
<head>
   ...
    <style>
        #surveyElement {
            --main-color: #92c14d;
            --main-hover-color: #92c14d;
            --text-color: #92c14d;
            --header-color: #92c14d;
            --header-background-color: #4a4a4a;
            --body-container-background-color: #f8f8f8;
        }
    </style>
</head>

Hope it helps. Please feel free to contact us if you have any questions or require further assistance.

BlazorAppS...Sample.zip Clipboard-File-1.png

CatalinCernat 2 years ago

it worked, but only after I added --primary: #92c14d;

Thank you so much!

I will take advantage of this open thread to ask fast another curiosity:

I have a date in the form of:

JavaScript
var date = new Date(model.PatientBirthDate);
var localDateString = date.toLocaleDateString('en-US', { year: 'numeric', month: '2-digit', day: '2-digit' });

So I would get something like "mm/dd/yyyy".

I have a datepicker in the survey, who asks for this specific date format, to which I am assigning the date value like this:

JavaScript
patientSurvey.getQuestionByName("birthDate").value = localDateString;

Where birthDate is the name of the question in the survey.

But the date won't get assigned to the datepicker.

Any tips would help.

Jane 2 years ago

Hello,
Thank you for the update. It's better not to mix multiple questions in one thread.
I created a separate ticket on your behalf: T12049: Specify the default DatePicker date. We placed it in our processing queue and will process it shortly.

Theme colors - How To?

Answers approved by surveyjs Support

Recently viewed tickets