zcdziura/aisle17
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Create secondary color scheme

Browse source
This commit is contained in:
Z. Charles Dziura 2025-07-24 09:35:50 -04:00
parent dcd7327eb1
commit fb36716665
2 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
webapp/src/app/routes/login/login.html
View file

@ -9,7 +9,7 @@
Password Password
<input type="password" autocomplete="current-password" [attr.aria-invalid]="isPasswordInvalid()" formControlName="password"> <input type="password" autocomplete="current-password" [attr.aria-invalid]="isPasswordInvalid()" formControlName="password">
</label> </label>
<input type="submit" value="Log in" [disabled]="!isFormValid()"> <input type="submit" value="Log in">
</fieldset> </fieldset>
</form> </form>
<hr> <hr>

30
webapp/src/styles/_theme.scss
View file

@ -4,32 +4,44 @@
--pico-font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', --pico-font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
monospace; monospace;
--theme-light-color-primary: oklch(27.3% 0.076 236.7); --theme-light-color-primary: oklch(57.3% 0.076 236.7);
--theme-light-color-primary-background: oklch(from var(--theme-light-color-primary) 34.8% c h); --theme-light-color-primary-background: oklch(from var(--theme-light-color-primary) 49.8% c h);
--theme-light-color-primary-background-hover: oklch(from var(--theme-light-color-primary) 42.3% c h); --theme-light-color-primary-background-hover: oklch(from var(--theme-light-color-primary) 42.3% c h);
--theme-light-color-primary-focus: oklch(from var(--theme-light-color-primary) 72.3% c h); --theme-light-color-primary-focus: oklch(from var(--theme-light-color-primary) 87.3% c h);
--theme-light-color-primary-hover: oklch(from var(--theme-light-color-primary) 87.3% c h); --theme-light-color-primary-hover: oklch(from var(--theme-light-color-primary) 72.3% c h);
--theme-light-color-secondary: oklch(29.7% 0.116 324.2); --theme-light-color-secondary: oklch(64.8% 0.076 146.7);
--theme-light-color-secondary-background: oklch(from var(--theme-light-color-secondary) 52.2% c h); --theme-light-color-secondary-background: oklch(from var(--theme-light-color-secondary) 57.3% c h);
--theme-light-color-secondary-selection: oklch(74.7% 0.116 324.2 / 50%); --theme-light-color-secondary-background-hover: oklch(from var(--theme-light-color-secondary) 49.8% c h);
--theme-light-color-secondary-focus: oklch(from var(--theme-light-color-secondary) 87.3% c h);
--theme-light-color-secondary-hover: oklch(from var(--theme-light-color-secondary) 72.3% c h);
--theme-light-color-accent: oklch(29.7% 0.116 324.2);
--theme-light-color-accent-background: oklch(from var(--theme-light-color-accent) 52.2% c h);
--theme-light-color-accent-selection: oklch(74.7% 0.116 324.2 / 50%);
} }
// Light Theme // Light Theme
[data-theme='light'], [data-theme='light'],
:root:not([data-theme='dark']), :root:not([data-theme='dark']),
:host:not([data-theme='dark']) { :host:not([data-theme='dark']) {
--pico-text-selection-color: var(--theme-light-color-secondary-selection); --pico-text-selection-color: var(--theme-light-color-accent-selection);
--pico-primary: var(--theme-light-color-primary); --pico-primary: var(--theme-light-color-primary);
--pico-primary-background: var(--theme-light-color-primary-background); --pico-primary-background: var(--theme-light-color-primary-background);
--pico-primary-underline: var(--theme-light-color-primary-hover); --pico-primary-underline: var(--theme-light-color-primary-hover);
--pico-primary-hover: #942d0d; --pico-primary-hover: var(--theme-light-color-primary-hover);
--pico-primary-hover-background: var(--theme-light-color-primary-background-hover); --pico-primary-hover-background: var(--theme-light-color-primary-background-hover);
--pico-primary-focus: var(--theme-light-color-primary-focus); --pico-primary-focus: var(--theme-light-color-primary-focus);
--pico-primary-inverse: #fff; --pico-primary-inverse: #fff;
--pico-secondary: var(--theme-light-color-secondary); --pico-secondary: var(--theme-light-color-secondary);
--pico-secondary-background: var(--theme-light-color-secondary-background); --pico-secondary-background: var(--theme-light-color-secondary-background);
--pico-secondary-underline: var(--theme-light-color-secondary-background-hover);
--pico-secondary-hover: var(--theme-light-color-secondary-hover);
--pico-secondary-hover-background: var(--theme-light-color-secondary-background-hover);
--pico-secondary-focus: var(--theme-light-color-secondary-focus);
--pico-secondary-inverse: #fff;
} }
// Dark Theme // Dark Theme