Fix dark theme colors and remove remaining DocuSeal branding

- Fix DaisyUI theme: base-200/300 changed from bright teal (#93bec7) to
  proper dark shades (#252525/#333333) so cards and surfaces blend with
  the dark background
- Fix neutral color from teal to dark (#2a2a2a) for proper button styling
- Replace all hardcoded bg-white with bg-base-300 in SCSS and Vue components
  so form inputs, checkboxes, radios, and buttons match the dark theme
- Update start_form logo partial from DocuSeal to Disruptive Records
- Fix autocomplete dropdown background colors for dark theme

https://claude.ai/code/session_01SMJoL1Hzz3b5qqDhyD63jF
pull/580/head
Claude 2 months ago
parent 66e6775227
commit a57d46b53c
No known key found for this signature in database

@ -48,11 +48,11 @@ button[disabled] .enabled, button.btn-disabled .enabled {
} }
.base-input { .base-input {
@apply input input-bordered bg-white; @apply input input-bordered bg-base-300;
} }
.base-textarea { .base-textarea {
@apply textarea textarea-bordered bg-white rounded-3xl; @apply textarea textarea-bordered bg-base-300 rounded-3xl;
} }
.base-button { .base-button {
@ -60,15 +60,15 @@ button[disabled] .enabled, button.btn-disabled .enabled {
} }
.white-button { .white-button {
@apply btn btn-outline text-base bg-white border-2; @apply btn btn-outline text-base bg-base-300 border-2;
} }
.base-checkbox { .base-checkbox {
@apply checkbox rounded bg-white checkbox-sm no-animation; @apply checkbox rounded bg-base-300 checkbox-sm no-animation;
} }
.base-radio { .base-radio {
@apply radio bg-white radio-sm no-animation; @apply radio bg-base-300 radio-sm no-animation;
} }
.base-select { .base-select {
@ -115,7 +115,7 @@ button[disabled] .enabled, button.btn-disabled .enabled {
} }
.autocomplete { .autocomplete {
background: white; background: #333333;
z-index: 1000; z-index: 1000;
font: 16px/25px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font: 16px/25px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
overflow: auto; overflow: auto;
@ -132,7 +132,7 @@ button[disabled] .enabled, button.btn-disabled .enabled {
} }
.autocomplete .group { .autocomplete .group {
background: #eee; background: #3a3a3a;
} }
.autocomplete > div:hover:not(.group), .autocomplete > div:hover:not(.group),

@ -48,7 +48,7 @@ button[disabled] .enabled, button.btn-disabled .enabled {
} }
.base-textarea { .base-textarea {
@apply textarea textarea-bordered bg-white rounded-3xl; @apply textarea textarea-bordered bg-base-300 rounded-3xl;
} }
.btn { .btn {
@ -56,7 +56,7 @@ button[disabled] .enabled, button.btn-disabled .enabled {
} }
.base-input { .base-input {
@apply input input-bordered bg-white; @apply input input-bordered bg-base-300;
} }
.base-button { .base-button {
@ -64,15 +64,15 @@ button[disabled] .enabled, button.btn-disabled .enabled {
} }
.white-button { .white-button {
@apply btn btn-outline text-base bg-white border-2; @apply btn btn-outline text-base bg-base-300 border-2;
} }
.base-checkbox { .base-checkbox {
@apply checkbox rounded bg-white checkbox-sm; @apply checkbox rounded bg-base-300 checkbox-sm;
} }
.base-radio { .base-radio {
@apply radio bg-white radio-sm; @apply radio bg-base-300 radio-sm;
} }
.font-times { .font-times {

@ -559,7 +559,7 @@
:key="step[0].uuid" :key="step[0].uuid"
href="#" href="#"
class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1" class="inline border border-base-300 h-3 w-3 rounded-full mx-1 mt-1"
:class="{ 'bg-base-300 steps-progress-current': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-white': index > currentStep }" :class="{ 'bg-base-300 steps-progress-current': index === currentStep, 'bg-base-content': (index < currentStep && stepFields[index].every((f) => !f.required || ![null, undefined, ''].includes(values[f.uuid]))) || isCompleted, 'bg-base-200': index > currentStep }"
@click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]" @click.prevent="isCompleted ? '' : [saveStep(), goToStep(index, true)]"
/> />
</div> </div>

@ -120,7 +120,7 @@
id="kba_fn" id="kba_fn"
v-model="form.fn" v-model="form.fn"
type="text" type="text"
class="input input-bordered !h-10 w-full bg-white" class="input input-bordered !h-10 w-full bg-base-300"
required required
> >
</div> </div>
@ -133,7 +133,7 @@
id="kba_ln" id="kba_ln"
v-model="form.ln" v-model="form.ln"
type="text" type="text"
class="input input-bordered !h-10 w-full bg-white" class="input input-bordered !h-10 w-full bg-base-300"
required required
> >
</div> </div>
@ -146,7 +146,7 @@
id="kba_addr" id="kba_addr"
v-model="form.addr" v-model="form.addr"
type="text" type="text"
class="input input-bordered !h-10 w-full bg-white" class="input input-bordered !h-10 w-full bg-base-300"
required required
> >
</div> </div>
@ -159,7 +159,7 @@
id="kba_city" id="kba_city"
v-model="form.city" v-model="form.city"
type="text" type="text"
class="input input-bordered !h-10 w-full bg-white" class="input input-bordered !h-10 w-full bg-base-300"
required required
> >
</div> </div>
@ -171,7 +171,7 @@
<select <select
id="kba_state" id="kba_state"
v-model="form.state" v-model="form.state"
class="select select-bordered !h-10 min-h-[2.5rem] w-full bg-white font-normal !text-base" class="select select-bordered !h-10 min-h-[2.5rem] w-full bg-base-300 font-normal !text-base"
required required
> >
<option <option
@ -198,7 +198,7 @@
id="kba_zip" id="kba_zip"
v-model="form.zip" v-model="form.zip"
type="text" type="text"
class="input input-bordered !h-10 w-full bg-white" class="input input-bordered !h-10 w-full bg-base-300"
required required
> >
</div> </div>
@ -211,7 +211,7 @@
id="kba_phone" id="kba_phone"
v-model="form.phone" v-model="form.phone"
type="text" type="text"
class="input input-bordered !h-10 w-full bg-white" class="input input-bordered !h-10 w-full bg-base-300"
required required
> >
</div> </div>
@ -224,7 +224,7 @@
id="kba_email" id="kba_email"
v-model="form.email" v-model="form.email"
type="email" type="email"
class="input input-bordered !h-10 w-full bg-white" class="input input-bordered !h-10 w-full bg-base-300"
required required
> >
</div> </div>
@ -237,7 +237,7 @@
id="kba_dob" id="kba_dob"
v-model="form.dob" v-model="form.dob"
type="date" type="date"
class="input input-bordered !h-10 md:w-full bg-white" class="input input-bordered !h-10 md:w-full bg-base-300"
required required
> >
</div> </div>
@ -250,7 +250,7 @@
id="kba_ssn" id="kba_ssn"
v-model="form.ssn" v-model="form.ssn"
type="text" type="text"
class="input input-bordered !h-10 w-full bg-white" class="input input-bordered !h-10 w-full bg-base-300"
required required
> >
</div> </div>

@ -1,6 +1,3 @@
<a href="/" class="flex justify-center items-center"> <div class="flex justify-center py-4">
<span class="mr-3"> <img src="https://github.com/disruptiverecords/docuseal/blob/master/dr-logo.png?raw=true" alt="Disruptive Records" class="h-8">
<%= render 'shared/logo', width: '50px', height: '50px' %> </div>
</span>
<h1 class="text-5xl font-bold text-center">DocuSeal</h1>
</a>

@ -7,13 +7,14 @@ module.exports = {
{ {
docuseal: { docuseal: {
'color-scheme': 'dark', 'color-scheme': 'dark',
primary: '#97b0b4', primary: '#93bec7',
secondary: '#97b0b4', secondary: '#97b0b4',
accent: '#adada2', accent: '#adada2',
neutral: '#93bec7', neutral: '#2a2a2a',
'neutral-content': '#ededde',
'base-100': '#1a1a1a', 'base-100': '#1a1a1a',
'base-200': '#93bec7', 'base-200': '#252525',
'base-300': '#93bec7', 'base-300': '#333333',
'base-content': '#ededde', 'base-content': '#ededde',
'--rounded-btn': '1.9rem', '--rounded-btn': '1.9rem',
'--tab-border': '2px', '--tab-border': '2px',

Loading…
Cancel
Save