Skip to content

Commit 8587bd9

Browse files
author
Brian Genisio
committed
applying a custom theme to match the Learn theme
1 parent 3856933 commit 8587bd9

File tree

3 files changed

+107
-16
lines changed

3 files changed

+107
-16
lines changed

‎index.html‎

Lines changed: 107 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,18 @@
55
<meta charset="utf-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link href="survey/defaultV2.min.css" type="text/css" rel="stylesheet">
8+
<style>
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
}
13+
</style>
814
</head>
9-
<body style="margin: 0; padding: 0;">
15+
<body>
1016
<div id="surveyContainer"></div>
1117

1218
<script type="text/javascript" src="survey/survey.core.min.js"></script>
1319
<script type="text/javascript" src="survey/survey-js-ui.min.js"></script>
14-
<script type="text/javascript" src="survey/borderless-dark.min.js"></script>
1520
<script>
1621
let survey;
1722
let saveTimeout;
@@ -32,8 +37,9 @@
3237
answers = persistedAnswers;
3338

3439
survey = new Survey.Model(surveyJson);
35-
survey.applyTheme(SurveyTheme.BorderlessDark);
40+
survey.applyTheme(customTheme);
3641
survey.data = answersToData();
42+
console.log(survey.data);
3743
survey.onValueChanged.add(onValueChanged);
3844
survey.render(document.getElementById("surveyContainer"));
3945
})
@@ -56,7 +62,7 @@
5662
};
5763

5864
clearTimeout(saveTimeout);
59-
saveTimeout = setTimeout(() => saveAnswers(), 500);
65+
saveTimeout = setTimeout(() => saveAnswers(), 250);
6066
}
6167

6268
function saveAnswers() {
@@ -77,6 +83,103 @@
7783
})
7884
.catch(error => console.error('Error posting answers:', error));
7985
}
86+
87+
const customTheme = {
88+
"themeName": "borderless",
89+
"colorPalette": "dark",
90+
"isPanelless": false,
91+
"backgroundImage": "",
92+
"backgroundOpacity": 1,
93+
"backgroundImageAttachment": "scroll",
94+
"backgroundImageFit": "cover",
95+
"cssVariables": {
96+
"--sjs-questionpanel-backcolor": "rgba(44, 56, 85, 1)",
97+
"--sjs-corner-radius": "4px",
98+
"--sjs-base-unit": "8px",
99+
"--sjs-shadow-small": "0px 0px 0px 0px rgba(0, 0, 0, 0.35)",
100+
"--sjs-shadow-inner": "inset 0px 0px 0px 0px rgba(0, 0, 0, 0.2)",
101+
"--sjs-border-default": "rgba(65, 72, 90, 1)",
102+
"--sjs-border-light": "rgba(55, 62, 79, 1)",
103+
"--sjs-general-backcolor": "rgba(45, 38, 55, 1)",
104+
"--sjs-general-backcolor-dark": "rgba(50, 55, 72, 1)",
105+
"--sjs-general-backcolor-dim-light": "rgba(36, 41, 55, 1)",
106+
"--sjs-general-backcolor-dim-dark": "rgba(40, 46, 61, 1)",
107+
"--sjs-general-forecolor": "rgba(255, 255, 255, 0.78)",
108+
"--sjs-general-forecolor-light": "rgba(114, 120, 137, 1)",
109+
"--sjs-general-dim-forecolor": "rgba(255, 255, 255, 0.79)",
110+
"--sjs-general-dim-forecolor-light": "rgba(114, 120, 137, 1)",
111+
"--sjs-secondary-backcolor": "rgba(255, 152, 20, 1)",
112+
"--sjs-secondary-backcolor-light": "rgba(255, 152, 20, 0.1)",
113+
"--sjs-secondary-backcolor-semi-light": "rgba(255, 152, 20, 0.25)",
114+
"--sjs-secondary-forecolor": "rgba(48, 48, 48, 1)",
115+
"--sjs-secondary-forecolor-light": "rgba(48, 48, 48, 0.25)",
116+
"--sjs-shadow-small-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.35)",
117+
"--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.2)",
118+
"--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.2)",
119+
"--sjs-shadow-inner-reset": "inset 0px 0px 0px 0px rgba(0, 0, 0, 0.2)",
120+
"--sjs-border-inside": "rgba(255, 255, 255, 0.08)",
121+
"--sjs-special-red-forecolor": "rgba(48, 48, 48, 1)",
122+
"--sjs-special-green": "rgba(36, 197, 164, 1)",
123+
"--sjs-special-green-light": "rgba(36, 197, 164, 0.1)",
124+
"--sjs-special-green-forecolor": "rgba(48, 48, 48, 1)",
125+
"--sjs-special-blue": "rgba(91, 151, 242, 1)",
126+
"--sjs-special-blue-light": "rgba(91, 151, 242, 0.1)",
127+
"--sjs-special-blue-forecolor": "rgba(48, 48, 48, 1)",
128+
"--sjs-special-yellow": "rgba(255, 152, 20, 1)",
129+
"--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
130+
"--sjs-special-yellow-forecolor": "rgba(48, 48, 48, 1)",
131+
"--sjs-article-font-xx-large-textDecoration": "none",
132+
"--sjs-article-font-xx-large-fontWeight": "700",
133+
"--sjs-article-font-xx-large-fontStyle": "normal",
134+
"--sjs-article-font-xx-large-fontStretch": "normal",
135+
"--sjs-article-font-xx-large-letterSpacing": "0",
136+
"--sjs-article-font-xx-large-lineHeight": "64px",
137+
"--sjs-article-font-xx-large-paragraphIndent": "0px",
138+
"--sjs-article-font-xx-large-textCase": "none",
139+
"--sjs-article-font-x-large-textDecoration": "none",
140+
"--sjs-article-font-x-large-fontWeight": "700",
141+
"--sjs-article-font-x-large-fontStyle": "normal",
142+
"--sjs-article-font-x-large-fontStretch": "normal",
143+
"--sjs-article-font-x-large-letterSpacing": "0",
144+
"--sjs-article-font-x-large-lineHeight": "56px",
145+
"--sjs-article-font-x-large-paragraphIndent": "0px",
146+
"--sjs-article-font-x-large-textCase": "none",
147+
"--sjs-article-font-large-textDecoration": "none",
148+
"--sjs-article-font-large-fontWeight": "700",
149+
"--sjs-article-font-large-fontStyle": "normal",
150+
"--sjs-article-font-large-fontStretch": "normal",
151+
"--sjs-article-font-large-letterSpacing": "0",
152+
"--sjs-article-font-large-lineHeight": "40px",
153+
"--sjs-article-font-large-paragraphIndent": "0px",
154+
"--sjs-article-font-large-textCase": "none",
155+
"--sjs-article-font-medium-textDecoration": "none",
156+
"--sjs-article-font-medium-fontWeight": "700",
157+
"--sjs-article-font-medium-fontStyle": "normal",
158+
"--sjs-article-font-medium-fontStretch": "normal",
159+
"--sjs-article-font-medium-letterSpacing": "0",
160+
"--sjs-article-font-medium-lineHeight": "32px",
161+
"--sjs-article-font-medium-paragraphIndent": "0px",
162+
"--sjs-article-font-medium-textCase": "none",
163+
"--sjs-article-font-default-textDecoration": "none",
164+
"--sjs-article-font-default-fontWeight": "400",
165+
"--sjs-article-font-default-fontStyle": "normal",
166+
"--sjs-article-font-default-fontStretch": "normal",
167+
"--sjs-article-font-default-letterSpacing": "0",
168+
"--sjs-article-font-default-lineHeight": "28px",
169+
"--sjs-article-font-default-paragraphIndent": "0px",
170+
"--sjs-article-font-default-textCase": "none",
171+
"--sjs-general-backcolor-dim": "#101523",
172+
"--sjs-primary-backcolor": "#FFFFFF",
173+
"--sjs-primary-backcolor-dark": "rgba(255, 255, 255, 1)",
174+
"--sjs-primary-backcolor-light": "rgba(255, 255, 255, 0.1)",
175+
"--sjs-primary-forecolor": "rgba(32, 32, 32, 1)",
176+
"--sjs-primary-forecolor-light": "rgba(32, 32, 32, 0.25)",
177+
"--sjs-special-red": "rgba(254, 76, 108, 1)",
178+
"--sjs-special-red-light": "rgba(254, 76, 108, 0.1)",
179+
"--sjs-font-surveytitle-family": "Arial, sans-serif"
180+
},
181+
"headerView": "basic"
182+
};
80183
</script>
81184
</body>
82185
</html>

‎survey/borderless-dark.min.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎survey/borderless-light.min.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)