Style

Doka is quite opinionated about its layout, but fonts, colors, border-radius and some paddings can be fine-tuned without problem.

To override the Doka styles its best to make your styles a little bit more specific by prepending the .doka--root selector. The Doka selectors have been kept as non-specific as possible to make overriding easier.

You can either use CSS Custom Properties or specific selectors to override the styles inside Doka. It's advised to use Custom Properties as that is both easier and less prone to incompatibility with future versions of Doka. Please note Custom Properties don't work on IE11 so either you have to auto generate IE11 fallback values or apply styles based on Doka selectors.

Doka CSS Custom Properties

A lot of the colors Doka uses can be controlled with the --doka-effect--invert property, by setting it from 0% to 100% most colors will be inverted and you'll end up with a "bright" theme instead of the default "dark" colors.

The CSS snippet below will switch Doka to the bright theme and will set a blueish primary color.

.doka--root {
    --doka-effect--invert: 100%;
    --doka-color--alpha: #2990ff;
    --doka-color--alpha-dim: #1a80ec;
}

Of course you can adjust each Custom Property individually to tune the style of Doka to your liking.

/* set to 100% to invert colors */
--doka-effect--invert: 0%;

/* by default these base calculation values are generated by the invert property */
--doka-value--alpha: calc(100% - var(--doka-effect--invert));
--doka-value--beta: var(--doka-effect--invert);

/* primary colors */
--doka-color--alpha: #ffd843;
--doka-color--alpha-dim: #ffc343;

/* default font sizes */
--doka-font-size: 16px;
--doka-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';

/* editor max dimensions */
--doka-editor--max-width: 80em;
--doka-editor--max-height: 60em;

/* spacing between editor and buttons */
--doka-editor--spacing: 0;

/* default size and max size of modal */
--doka-modal--width: 70vw;
--doka-modal--height: 80vh;
--doka-modal--max-width: 56rem;
--doka-modal--max-height: 40rem;

/* frost effect used on browsers that support backdrop-filter */
--doka-effect--frost: blur(10px);

/* color and border-radius values */
--doka-color--beta: hsl(0, 0%, var(--doka-value--alpha));
--doka-color--gamma: hsl(0, 0%, var(--doka-value--beta));
--doka-color--delta: hsla(0, 0%, var(--doka-value--beta), 0.85);
--doka-color--epsilon: hsla(0, 0%, var(--doka-value--beta), 0.75);

--doka-editor--color: hsla(0, 0%, var(--doka-value--alpha), 0.9);
--doka-editor--color-dim: hsla(0, 0%, var(--doka-value--alpha), 0.3);
--doka-editor--background-color: hsla(0, 0%, var(--doka-value--beta), 0.99);
--doka-editor--background-ellipse-inner-color: hsla(
    0,
    0%,
    var(--doka-value--alpha),
    0.15
);
--doka-editor--background-ellipse-outer-color: hsla(
    0,
    0%,
    var(--doka-value--alpha),
    0
);

--doka-modal--background: hsl(0, 0%, var(--doka-value--beta));
--doka-modal--overlay: hsla(0, 0%, var(--doka-value--beta), 0.8);
--doka-modal--shadow: 0 1em 4em rgba(0, 0, 0, 0.25), 0 0.5em 2em rgba(0, 0, 0, 0.25);

--doka-scrollbar-rail--color: var(--doka-color--delta);
--doka-scrollbar-thumb--color: var(--doka-color--epsilon);

--doka-component--color: var(--doka-editor--color);
--doka-component--background: hsla(0, 0%, var(--doka-value--alpha), 0.15);
--doka-component--background-dim: hsla(0, 0%, var(--doka-value--alpha), 0.1);
--doka-component--background-dark: hsla(0, 0%, var(--doka-value--beta), 0.8);
--doka-component--background-darker: hsla(0, 0%, var(--doka-value--beta), 0.9);

--doka-component-alt--color: var(--doka-color--delta);
--doka-component-alt--color-dim: hsla(0, 0%, var(--doka-value--beta), 0.75);
--doka-component-alt--background: hsla(0, 0%, var(--doka-value--alpha), 0.85);
--doka-component-alt-effect--background: hsla(
    0,
    0%,
    var(--doka-value--alpha),
    0.6
);
--doka-component-alt--edge: hsla(0, 0%, var(--doka-value--beta), 0.15);
--doka-component-alt--shadow: 0 0.75em 1em -0.75em rgba(0, 0, 0, 0.4), 0 1em 2em
        0 rgba(0, 0, 0, 0.05);

--doka-button--color: var(--doka-component--color);
--doka-button--background: var(--doka-component--background);
--doka-button--background-dim: var(--doka-component--background-dim);
--doka-button-hover--background: hsla(0, 0%, var(--doka-value--alpha), 0.25);

--doka-button-alt--color: var(--doka-component-alt--color);
--doka-button-alt--background: var(--doka-component-alt--background);
--doka-button-alt-hover--background: hsla(
    0,
    0%,
    var(--doka-value--alpha),
    0.95
);
--doka-button-alt-effect--background: var(
    --doka-component-alt-effect--background
);
--doka-button-alt-effect-hover--background: hsla(
    0,
    0%,
    var(--doka-value--alpha),
    0.75
);

--doka-button-primary--color: var(--doka-color--gamma);
--doka-button-primary--background: var(--doka-color--alpha);
--doka-button-primary-hover--background: var(--doka-color--alpha-dim);

--doka-button-main--radius: 9999em;
--doka-button-tab--radius: 0;
--doka-button-tool--radius: 0;

--doka-dropdown-hover--background: hsla(0, 0%, var(--doka-value--beta), 0.1);
--doka-dropdown-hover-active--background: hsla(
    0,
    0%,
    var(--doka-value--beta),
    0.15
);
--doka-dropdown-selected--color: var(--doka-editor--color);
--doka-dropdown-selected--background: hsla(0, 0%, var(--doka-value--beta), 0.9);
--doka-dropdown-selected-hover--background: hsla(
    0,
    0%,
    var(--doka-value--beta),
    0.8
);
--doka-dropdown-selected-active-hover--background: hsla(
    0,
    0%,
    var(--doka-value--beta),
    0.6
);

--doka-range-input--background: hsla(0, 0%, var(--doka-value--alpha), 0.2);
--doka-range-input-recenter--background: var(--doka-range-input--background);
--doka-range-input-centered--background: var(--doka-range-input--background);
--doka-range-input-thumb--color: hsl(0, 0%, var(--doka-value--alpha));
--doka-range-input-thumb-hover--color: hsla(
    0,
    0%,
    var(--doka-value--alpha),
    0.15
);

--doka-tab--border-color: hsla(0, 0%, 0%, 0.15);

--doka-crop-focal-line--color: hsla(0, 0%, 100%, 0.5);
--doka-crop-corner--color: var(--doka-color--beta);
--doka-crop-corner-focus--color: var(--doka-color--beta);
--doka-crop-corner--shadow: 0 0.0625em 0.125em rgba(0, 0, 0, 0.2);
--doka-crop-edge-focus--color: hsla(0, 0%, var(--doka-value--alpha), 0.5);

--doka-image-outline--color: var(--doka-color--beta);
--doka-image-overlay--color: var(--doka-color--gamma);
--doka-image-focus--color: hsla(0, 0%, var(--doka-value--alpha), 0.25);

--doka-status--background: hsla(0, 0%, var(--doka-value--alpha), 0.1);

--doka-status-bubble--color: hsla(0, 0%, var(--doka-value--beta), 0.8);
--doka-status-bubble--background: hsla(0, 0%, var(--doka-value--alpha), 0.75);
--doka-status-bubble-effect--background: hsla(
    0,
    0%,
    var(--doka-value--alpha),
    0.5
);
--doka-status-bubble--shadow: 0 0.125em 1em rgba(0, 0, 0, 0.2);

--doka-size-indicator--color: hsla(0, 0%, 0%, 0.85);
--doka-size-indicator--background: hsla(0, 0%, 100%, 0.95);
--doka-size-indicator--edge: hsla(0, 0%, 0%, 0.15);
--doka-size-indicator--radius: 0.25em;

--doka-button-zoom--color: hsla(0, 0%, 0%, 0.85);
--doka-button-zoom--background: hsla(0, 0%, 100%, 0.85);
--doka-button-zoom-hover--background: hsla(0, 0%, 100%, 0.95);
--doka-button-zoom-effect--background: hsla(0, 0%, 100%, 0.6);
--doka-button-zoom-effect-hover--background: hsla(0, 0%, 100%, 0.75);

--doka-filter-tile--radius: 0;
--doka-filter-tile-selected--color: var(--doka-color--alpha);

Doka Selectors

A collection of some common style overrides have been summarized below.

/* the default font stack used is the system font stack, it's light-weight and familiar to the user */
.doka--root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol';
}

/* use a hand cursor instead of arrow for the action buttons */
.doka--button {
    cursor: pointer;
}

/* The reset button */
.doka--button-app {
    color: black;
    background-color: white;
}

.doka--button-app:focus,
.doka--button-app:hover {
    background-color: silver;
}

/* The cancel menu button */
.doka--button-action-cancel {
    color: black;
    background-color: red;
}

.doka--button-action-cancel:focus,
.doka--button-action-cancel:hover {
    background-color: orange;
}

/* The call to action menu button */
.doka--button-action-confirm {
    color: black;
    background-color: green;
}

.doka--button-action-confirm:focus,
.doka--button-action-confirm:hover {
    background-color: orange;
}

/* Style the toolbar buttons */
.doka--button-tool {
    color: black;
    background-color: red;
}

If you want to adjust more styles, please inspect the Doka editor with your developer tools or view the source Sass file and adjust your styles accordingly.