Packages

phoenix_kit

1.7.41
1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
221 Versions
38 Dependencies
Dependants
Files
Activity
phoenix_kit priv static assets css app.css
Raw

priv/static/assets/css/app.css 

/* PhoenixKit DaisyUI 5 Theme Definitions */

/* Color-only themes to prevent layout jumping */



/* ============================================================================

   Fade In/Out Animations

   Used for progress bars and dynamic content

   ============================================================================ */



@keyframes pk-fade-in {

  from { opacity: 0; }

  to { opacity: 1; }

}



@keyframes pk-fade-in-down {

  from {

    opacity: 0;

    transform: translateY(-8px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes pk-fade-out {

  from { opacity: 1; }

  to { opacity: 0; }

}



.animate-fade-in {

  animation: pk-fade-in 0.3s ease-out;

}



.animate-fade-in-down {

  animation: pk-fade-in-down 0.3s ease-out;

}



.animate-fade-out {

  animation: pk-fade-out 0.2s ease-in forwards;

}



/* Custom Phoenix Themes */

[data-theme=phoenix-light] {

  color-scheme: light;

  --color-primary: oklch(57.38% 0.233 262.08);

  --color-primary-content: oklch(98% 0.02 262.08);

  --color-secondary: oklch(75.61% 0.194 333.67);

  --color-secondary-content: oklch(20% 0.02 333.67);

  --color-accent: oklch(74.22% 0.209 6.35);

  --color-accent-content: oklch(20% 0.02 6.35);

  --color-neutral: oklch(23.04% 0.065 269.31);

  --color-neutral-content: oklch(98% 0.02 269.31);

  --color-base-100: oklch(100% 0 0);

  --color-base-200: oklch(96% 0 0);

  --color-base-300: oklch(92% 0.005 286.88);

  --color-base-content: oklch(20% 0.02 269.31);

  --color-info: oklch(72.06% 0.191 231.6);

  --color-info-content: oklch(20% 0.02 231.6);

  --color-success: oklch(64.8% 0.150 160);

  --color-success-content: oklch(20% 0.02 160);

  --color-warning: oklch(84.71% 0.199 83.87);

  --color-warning-content: oklch(20% 0.02 83.87);

  --color-error: oklch(71.76% 0.221 22.18);

  --color-error-content: oklch(20% 0.02 22.18);

}



[data-theme=phoenix-dark] {

  color-scheme: dark;

  --color-primary: oklch(57.38% 0.233 262.08);

  --color-primary-content: oklch(98% 0.02 262.08);

  --color-secondary: oklch(75.61% 0.194 333.67);

  --color-secondary-content: oklch(20% 0.02 333.67);

  --color-accent: oklch(74.22% 0.209 6.35);

  --color-accent-content: oklch(20% 0.02 6.35);

  --color-neutral: oklch(32.77% 0.033 264.54);

  --color-neutral-content: oklch(85% 0.02 264.54);

  --color-base-100: oklch(25.33% 0.024 265.76);

  --color-base-200: oklch(23.45% 0.022 265.76);

  --color-base-300: oklch(21.68% 0.020 265.76);

  --color-base-content: oklch(85% 0.02 265.76);

  --color-info: oklch(72.06% 0.191 231.6);

  --color-info-content: oklch(20% 0.02 231.6);

  --color-success: oklch(64.8% 0.150 160);

  --color-success-content: oklch(20% 0.02 160);

  --color-warning: oklch(84.71% 0.199 83.87);

  --color-warning-content: oklch(20% 0.02 83.87);

  --color-error: oklch(71.76% 0.221 22.18);

  --color-error-content: oklch(20% 0.02 22.18);

}



/* Black Theme - OLED-friendly */

[data-theme=black] {

  color-scheme: dark;

  --color-primary: oklch(65.91% 0.196 273.21);

  --color-primary-content: oklch(17.43% 0.037 277.02);

  --color-secondary: oklch(47.73% 0.103 236.64);

  --color-secondary-content: oklch(89.19% 0.023 236.59);

  --color-accent: oklch(70.71% 0.191 327.17);

  --color-accent-content: oklch(12.19% 0.042 329.69);

  --color-neutral: oklch(14.86% 0.046 272.16);

  --color-neutral-content: oklch(86.9% 0.017 272.16);

  --color-base-100: oklch(9.04% 0 0);

  --color-base-200: oklch(11.13% 0.019 272.16);

  --color-base-300: oklch(15.31% 0.038 272.16);

  --color-base-content: oklch(86.9% 0.017 272.16);

  --color-info: oklch(64.04% 0.197 247.86);

  --color-info-content: oklch(17.43% 0.037 247.96);

  --color-success: oklch(64.04% 0.197 142.5);

  --color-success-content: oklch(17.43% 0.037 142.5);

  --color-warning: oklch(84.71% 0.199 83.87);

  --color-warning-content: oklch(17.43% 0.037 84.24);

  --color-error: oklch(71.76% 0.221 22.18);

  --color-error-content: oklch(17.43% 0.037 22.18);

}



/* Cupcake Theme - Soft pastel light theme */

[data-theme=cupcake] {

  color-scheme: light;

  --color-primary: oklch(69.71% 0.196 12.19);

  --color-primary-content: oklch(27.19% 0.046 12.19);

  --color-secondary: oklch(76.76% 0.152 346.53);

  --color-secondary-content: oklch(23.26% 0.038 346.53);

  --color-accent: oklch(74.83% 0.172 49.77);

  --color-accent-content: oklch(24.92% 0.048 49.77);

  --color-neutral: oklch(89.8% 0.011 319.24);

  --color-neutral-content: oklch(27.19% 0.046 319.24);

  --color-base-100: oklch(100% 0 0);

  --color-base-200: oklch(98.41% 0.014 319.24);

  --color-base-300: oklch(95.27% 0.018 319.24);

  --color-base-content: oklch(27.19% 0.046 319.24);

  --color-info: oklch(65.68% 0.196 247.86);

  --color-info-content: oklch(27.19% 0.046 247.96);

  --color-success: oklch(64.04% 0.197 142.5);

  --color-success-content: oklch(27.19% 0.046 142.5);

  --color-warning: oklch(84.71% 0.199 83.87);

  --color-warning-content: oklch(27.19% 0.046 84.24);

  --color-error: oklch(71.76% 0.221 22.18);

  --color-error-content: oklch(27.19% 0.046 22.18);

}



/* Synthwave Theme - Neon purple/cyan dark theme */

[data-theme=synthwave] {

  color-scheme: dark;

  --color-primary: oklch(69.71% 0.196 331.56);

  --color-primary-content: oklch(17.43% 0.037 331.56);

  --color-secondary: oklch(47.73% 0.103 256.76);

  --color-secondary-content: oklch(89.19% 0.023 256.76);

  --color-accent: oklch(74.83% 0.172 186.39);

  --color-accent-content: oklch(17.43% 0.037 186.39);

  --color-neutral: oklch(21.7% 0.044 264.79);

  --color-neutral-content: oklch(89.19% 0.023 264.79);

  --color-base-100: oklch(26.47% 0.021 264.79);

  --color-base-200: oklch(23.11% 0.018 264.79);

  --color-base-300: oklch(20.14% 0.016 264.79);

  --color-base-content: oklch(89.19% 0.023 264.79);

  --color-info: oklch(65.68% 0.196 247.86);

  --color-info-content: oklch(17.43% 0.037 247.96);

  --color-success: oklch(64.04% 0.197 142.5);

  --color-success-content: oklch(17.43% 0.037 142.5);

  --color-warning: oklch(84.71% 0.199 83.87);

  --color-warning-content: oklch(17.43% 0.037 84.24);

  --color-error: oklch(71.76% 0.221 22.18);

  --color-error-content: oklch(17.43% 0.037 22.18);

}



/* Cyberpunk Theme - Bold yellow/pink light theme */

[data-theme=cyberpunk] {

  color-scheme: light;

  --color-primary: oklch(62.95% 0.238 65.62);

  --color-primary-content: oklch(32.54% 0.058 65.62);

  --color-secondary: oklch(74.51% 0.172 334.94);

  --color-secondary-content: oklch(27.84% 0.053 334.94);

  --color-accent: oklch(74.83% 0.172 0.19);

  --color-accent-content: oklch(27.84% 0.053 0.19);

  --color-neutral: oklch(29.37% 0.066 281.49);

  --color-neutral-content: oklch(92.84% 0.019 281.49);

  --color-base-100: oklch(95.47% 0.019 281.49);

  --color-base-200: oklch(90.41% 0.016 281.49);

  --color-base-300: oklch(84.34% 0.014 281.49);

  --color-base-content: oklch(32.54% 0.058 281.49);

  --color-info: oklch(65.68% 0.196 247.86);

  --color-info-content: oklch(32.54% 0.058 247.96);

  --color-success: oklch(64.04% 0.197 142.5);

  --color-success-content: oklch(32.54% 0.058 142.5);

  --color-warning: oklch(84.71% 0.199 83.87);

  --color-warning-content: oklch(32.54% 0.058 84.24);

  --color-error: oklch(71.76% 0.221 22.18);

  --color-error-content: oklch(32.54% 0.058 22.18);

}



/* Forest Theme - Green nature dark theme */

[data-theme=forest] {

  color-scheme: dark;

  --color-primary: oklch(67.69% 0.187 152.23);

  --color-primary-content: oklch(17.43% 0.037 152.23);

  --color-secondary: oklch(47.73% 0.103 172.79);

  --color-secondary-content: oklch(89.19% 0.023 172.79);

  --color-accent: oklch(74.83% 0.172 142.5);

  --color-accent-content: oklch(17.43% 0.037 142.5);

  --color-neutral: oklch(25.25% 0.032 152.23);

  --color-neutral-content: oklch(89.19% 0.023 152.23);

  --color-base-100: oklch(20.65% 0.025 152.23);

  --color-base-200: oklch(17.85% 0.022 152.23);

  --color-base-300: oklch(15.43% 0.019 152.23);

  --color-base-content: oklch(89.19% 0.023 152.23);

  --color-info: oklch(65.68% 0.196 247.86);

  --color-info-content: oklch(17.43% 0.037 247.96);

  --color-success: oklch(64.04% 0.197 142.5);

  --color-success-content: oklch(17.43% 0.037 142.5);

  --color-warning: oklch(84.71% 0.199 83.87);

  --color-warning-content: oklch(17.43% 0.037 84.24);

  --color-error: oklch(71.76% 0.221 22.18);

  --color-error-content: oklch(17.43% 0.037 22.18);

}



/* Dracula Theme - Purple/pink vampire dark theme */

[data-theme=dracula] {

  color-scheme: dark;

  --color-primary: oklch(65.91% 0.196 327.17);

  --color-primary-content: oklch(17.43% 0.037 327.17);

  --color-secondary: oklch(47.73% 0.103 296.67);

  --color-secondary-content: oklch(89.19% 0.023 296.67);

  --color-accent: oklch(74.83% 0.172 12.19);

  --color-accent-content: oklch(17.43% 0.037 12.19);

  --color-neutral: oklch(26.95% 0.041 277.02);

  --color-neutral-content: oklch(89.19% 0.023 277.02);

  --color-base-100: oklch(21.7% 0.032 277.02);

  --color-base-200: oklch(18.73% 0.028 277.02);

  --color-base-300: oklch(16.17% 0.024 277.02);

  --color-base-content: oklch(89.19% 0.023 277.02);

  --color-info: oklch(65.68% 0.196 247.86);

  --color-info-content: oklch(17.43% 0.037 247.96);

  --color-success: oklch(64.04% 0.197 142.5);

  --color-success-content: oklch(17.43% 0.037 142.5);

  --color-warning: oklch(84.71% 0.199 83.87);

  --color-warning-content: oklch(17.43% 0.037 84.24);

  --color-error: oklch(71.76% 0.221 22.18);

  --color-error-content: oklch(17.43% 0.037 22.18);

}



/* Sunset Theme - Warm orange/purple dark theme */

[data-theme=sunset] {

  color-scheme: dark;

  --color-primary: oklch(69.71% 0.196 38.4);

  --color-primary-content: oklch(17.43% 0.037 38.4);

  --color-secondary: oklch(47.73% 0.103 327.17);

  --color-secondary-content: oklch(89.19% 0.023 327.17);

  --color-accent: oklch(74.83% 0.172 274.97);

  --color-accent-content: oklch(17.43% 0.037 274.97);

  --color-neutral: oklch(26.76% 0.036 19.18);

  --color-neutral-content: oklch(89.19% 0.023 19.18);

  --color-base-100: oklch(21.31% 0.028 19.18);

  --color-base-200: oklch(18.43% 0.024 19.18);

  --color-base-300: oklch(15.93% 0.021 19.18);

  --color-base-content: oklch(89.19% 0.023 19.18);

  --color-info: oklch(65.68% 0.196 247.86);

  --color-info-content: oklch(17.43% 0.037 247.96);

  --color-success: oklch(64.04% 0.197 142.5);

  --color-success-content: oklch(17.43% 0.037 142.5);

  --color-warning: oklch(84.71% 0.199 83.87);

  --color-warning-content: oklch(17.43% 0.037 84.24);

  --color-error: oklch(71.76% 0.221 22.18);

  --color-error-content: oklch(17.43% 0.037 22.18);

}